Dreamwidth Layouts

Transmogrified CSS: Lefty

2012-05-16T03:21:45Z

Title: Lefty
Theme Titles/Live Preview Links: Green Party and Pinko
Credit to: sarken or rentals
Base style: Transmogrified
Type: Full layout in CSS
Best resolution: Variable width
Tested in: Internet Explorer 8, Chrome 17, Firefox 3.6, Opera 11.6, Safari 5.0
Features: Comment pages, fixed width sidebar, fluid width entries, custom control strip, variety of page set-ups
Link: CSS & Instructions

comments

layout: smooth operator (tabula rasa)

2012-04-24T01:14:33Z

Title: Smooth Operator
Credit: visualwit
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best Resolution: Width is fluid (%)
Tested in: Chrome
Features: No sidebar

CODE: Smooth Operator

comments

layout: Brittle, "tumblrina"

2012-03-09T04:29:23Z

Live Preview | Image Preview

Title: Layout, "Tumblrina"
Credit to: vigils
Base style: Brittle
Type: CSS layout
Best resolution: 960 grid, so should be fine in 1024+
Tested in: Chrome, Firefox, Safari
Features: Fixed-width, easily customizable sidebar image.

Instructions and CSS here @ vigils

comments

Joyride for Tabula Rasa

2012-03-05T01:55:11Z

Click images above for Image Previews - Live Preview

Title: Joyride
Credit to: betterdolphin
Base style: Tabula Rasa
Type: CSS
Best resolution: Made on 1280 x 1024, should work at a minimum of 1024 x 600 (netbook)
Tested in: IE7-9, latest Firefox and Chrome (see post for notes on IE)
Features: 6 different colors (though you're free to edit) and fixed side menu

EDIT There was an issue with the profile userpic being distorted on phones/some browsers, I have fixed it, so please grab again if you want!

Find it all here!

comments

Transmogrified layout - The journalist

2012-02-28T02:00:01Z

Title: The journalist
Credit to: inconformista
Base style: Transmogrified
Type: full layout in CSS
Best resolution: 1024x768 or above
Tested in: Firefox, Google Chrome IE8
Features: Custom comment pages

Click the thumbnail to preview the layout.

You can get it here.

comments

Transmogrified layout - Daydreaming

2012-02-26T21:26:10Z

Title: Daydreaming
Credit to: inconformista
Base style: Transmogrified
Type: full layout in CSS
Best resolution: 1024x768 or above
Tested in: Firefox, Google Chrome IE8
Features: Custom comment pages

Click the thumbnail to preview the layout.

( + no sidebar and sidebar on right versions )

You can get it here.

comments

layout: seamless (tabula rasa)

2012-02-19T00:51:10Z

Title: Seamless
Credit: visualwit
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best resolution: Width is fluid (%)
Tested in: Firefox
Features: 2 columns, header navigation

CODE: Garden Seamless

CODE: Cloudy Seamless

comments

layout: sensibility (tabula rasa)

2012-02-12T21:07:21Z

Title: Sensibility
Credit: visualwit
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best resolution: Width is fluid (%)
Tested in: Firefox
Features: 2 columns, fluid text (em so tweaking text size is as simple as editing the body font-size); header navigation

CODE: Moded Sensibility

CODE: Clear Sensibility

CODE: Given Sensibility

comments

Tabula Rasa: New York Evening

2012-02-10T23:49:29Z

Original layout using this Creative-Commons-licensed Manhattan panorama. Screenshot is of the version with the old image; live preview has the new image. Thanks to facetofcathy for pointing me in the right direction!

Previews & Code

Title: New York Evening
Credit to: sailorptah
Base style: Tabula Rasa
Type: Full layout in CSS
Best resolution: 1024x768+
Tested in: Firefox, Chrome
Features: customizable, fixed width, 2 columns

comments

Code Snippet - Making the Navstrip fluid.

2012-02-08T17:05:38Z

Title: Fluid Navstrip
Credit to: n/a
Base style: All
Type: Code Snippet
Best resolution: Display widths of 20em and up
Tested in: Firefox, Chrome, Opera
Features: Cells and contents of the navstrip table wrap as required by the user's display.

This is a code snippet that will work on any layout/style (barring any conflicts with other styles applied to the navstrip). The purpose is to make the navstrip wrap at larger font sizes or smaller screen widths rather than triggering a scrollbar as it does normally.

( Screencaps of the code in action under the cut )

The content of each cell in the navstrip table wraps as well, and you can get below a 20em display width without any scrollbars. There is padding added, a font size in ems, and a generous line-height. The result has a little more space around the log out button, which may help with accidental log outs for some users.

There is a 1px bit of visible body background colour at the right, left and bottom edges some of the time in all tested browsers, but I see that with my background image as well.

This code should work correctly in all browsers except IE7 and lower.

Padding, font-size and line-height can be customized at will.

( code under the cut )

comments

layout: tabbed (tabula rasa)

2012-01-29T00:49:19Z

Title: Tabbed
Credit to: visualwit
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best resolution: Width is fluid (%)
Tested in: Firefox
Features: 2 columns, fluid text (em so tweaking text size is as simple as editing the body font-size)
NOTE: Works best with short navigation text and shorter titles otherwise they'll bleed into each other.

CODE: Tabbed Vintage

CODE: Tabbed Comfort

CODE: Tabbed Bright

comments

layout: sands of time (tabula rasa)

2012-01-23T01:47:43Z

Title: Sands of Time
Credit to: visualwit
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best resolution: Width is fluid (%)
Tested in: Firefox
Features: 2 columns, fluid text (em so tweaking text size is as simple as editing the body font-size)

CODE: Sands of Time @ visualwit

comments

Central for Blanket

2012-01-21T05:33:27Z

Image Preview // Live Preview

Title: Central
Credit to: vigils
Base style: Blanket
Type: Custom CSS
Best resolution: 800x600 +
Tested in: Firefox, Chrome, Safari
Features: 1 column, fixed width, instructions for header image

Instructions and CSS can be found here.

comments

dreamwidthlayouts @ 2012-01-17T19:31:00

2012-01-18T00:34:54Z

Title: Full House
Credit to: flamingchemist
Base style: Bases
Type: Full Layouts in CSS
Best resolution: Fluid
Tested in:Mozilla Firefox
Features: 1 column or 2 columns, fluid width

Available here!

comments

Layout: Abstractia

2012-01-15T09:11:34Z

THIS LAYOUT IS NOW OFFICIAL! /noisemaker

Title: Abstractia
Features: all column options, fluid width, header, comment pages

(more colors available)

~~Live Preview~~

Notes for tweaking the official style back to its original form are here.

~~All feedback completely welcome. I kind of hope to make this into an official layout.~~

comments

Presser for Blanket

2012-01-15T07:35:08Z

Click images above for Image Previews - Live Preview with Bottombar - Live Preview with Sidebar

Title: Presser
Credit to: betterdolphin
Base style: Blanket (specifically "Peach")
Type: CSS
Best resolution: Made on 1280 x 1024
Tested in: IE7-9, latest Firefox and Chrome (see post for notes on IE)
Features: One with a bottombar, one with a side bar, both with 4 color variations. All pages styled. (Should be at least, tell me if I missed something, still not 100% familiar with the innerworkings of DW haha.)

Find it all here!

comments

Tabula Rasa: Sweet Blossoms

2012-01-15T05:36:22Z

Import of the Sweet Blossoms theme on Wordpress.

Code & Directions

Title: Sweet Blossoms
Credit to: sailorptah
Base style: Tabula Rasa
Type: Full layout in CSS
Best resolution: 1024x768+
Tested in: Firefox, Internet Explorer, Chrome
Features: customizable, fixed width, 2 columns

comments

DW Layout (Transmogrified): Gunshots & Ashes

2012-01-11T05:23:50Z

Layout code modified from Just An Illusion by fania at mentahelada.
Art by Kohta Hirano from the Hellsing manga.
Color scheme and graphics by yours truly.

Code & Directions

Title: Gunshots & Ashes
Credit to: mentahelada & Kohta Hirano
Base style: Transmogrified
Type: Full layout in CSS
Best resolution: 1024x768+
Tested in: Firefox, Internet Explorer, Chrome
Features: customizable, fixed width, 2 columns

comments

Come up with something awesome? Submit it to dreamscapes!

2012-01-10T08:40:58Z

bzzinglikeneon gave me permission to post a reminder here: if you're posting your awesome new style or theme to dreamwidthlayouts, please also consider submitting it to dreamscapes, which is the community for submitting layout layers and theme layers to Dreamwidth for conversion and addition to the available system choices at the Select Journal Style area. You can submit either new styles or themes for existing styles.

The submission guidelines go into detail about what we need for a system style in terms of browser compatability, design guidelines, etc. You can submit new styles as either S2 layers, or as a CSS stylesheet to be applied against an existing style. (For best and fastest results in getting a whole new style added to the site, S2 layer submission is easiest for us; second easiest is a CSS stylesheet to be applied against the Tabula Rasa style, which is designed to have no real styling itself but serves as a CSS-classed "blank slate" like the CSS Zen Garden project.)

When submitting a style to us for inclusion on the site, we ask that you send us a Contributor Licensing Agreement, or CLA. This agreement explicitly gives us a non-exclusive license to redistribute your work (both on dreamwidth.org itself and as part of our open source codebase) and protects you by explicitly stating that you keep all the intellectual property inherent in your design: you aren't signing over your work, you're just letting us use it.

Things get a little more complex if you're including any images that you didn't make yourself; any images you use in a design you submit for official use need to be licensed under terms that allow us to use and redistribute it. If you aren't sure, we'll do the checking on that for you: just be sure to include information on where you got the image when you make the submission.

To help reward people who contribute styles and themes, we have a Dreamwidth Points bounty on all submissons: when a style or theme you create is added to the site, you'll receive 30 points per theme, and 90 points per style.

Right now we're particularly looking for holiday themes of all types -- secular, religious, national, seasonal, etc. But we'd love to see anything you come up with!

If you've got any questions, feel free to ask me! I really love a lot of the creative themes and styles we've been seeing here in dreamwidthlayouts, and I'd love to be able to add them as system styles.

comments

Transmogrified: Open Skies

2012-01-10T06:43:06Z

Layout code modified from the DW-modified Elegant Grunge layout by Alis Dee (dee).
Color scheme and some graphics by yours truly.

Code & Directions

Title: Open Skies
Credit to: Mostly dee, frankly.
Base style: Transmogrified
Type: Full layout in CSS
Best resolution: 1024x768+
Tested in: Firefox, Internet Explorer, Chrome
Features: customizable, fixed width, 2 columns

comments

CLAMP Border | Tabula Rasa | More Colors!

2012-01-06T04:26:20Z

Title: CLAMP Border Layout – Red, Yellow, Green, Teal, Blue, and Purple
Credit to: flamingchemist
Base style: Tabula Rasa
Type: Full layout in CSS
Best resolution: Made in 1024x768
Tested in: Mozilla Firefox
Features: Customizable, Fixed Width

Click the thumbnails for the full size previews
Available here!

comments

Imperium for Five AM

2012-01-06T02:50:05Z

Image Preview // Live Preview

Title: Imperium
Credit to: terra
Base style: Five AM
Type: Custom CSS
Best resolution: 1024x768 +
Tested in: Firefox, Chrome
Features: 2 columns, fixed width

Instructions and CSS can be found here.

comments

Flutterby for Tabula Rasa

2012-01-05T21:17:33Z

Title: Flutterby
Credit to: megwrites
Base style: Tabula Rasa
Type: Layout in CSS
Best resolution: Any
Tested in: Chrome, Safari, Firefox
Features: Color and background easily customizable, readable, and very simple.

Click picture for larger preview. You can also see a live preview (for now) at: megwrites

( Code and instructions beneath the cut! )

comments

Hooky for Crossroads

2012-01-04T04:06:45Z

Title: Hooky
Credit to: betterdolphin
Base style: Crossroads (specifically "Lettuce")
Type: CSS
Best resolution: Made on 1280 x 1024
Tested in: IE7-9, Firefox, Chrome (see post for notes on IE)
Features: Fixed/scrolling sidebar, fixed navigation, icons, many variations

Find it all here!

NOTE: My first Dreamwidth layout converting a LJ layout for a DW format. If I've missed anything, please feel free to tell me.

comments

CLAMP Border | Tabula Rasa

2011-12-29T17:15:04Z

Title: CLAMP Border Layout - Orange
Credit to: flamingchemist
Base style: Tabula Rasa
Type: Full layout in CSS
Best resolution: Made in 1024x768
Tested in: Mozilla Firefox
Features: Customizable, Fixed Width

Click the thumbnail for the full size preview
Available here!

comments