four equal blocks of purple and orange shades with a rusty orange block centred on top
[personal profile] facetofcathy
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 )
esperanza
[personal profile] arobynsung
Title: Tabbed
Credit to: [community profile] 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
stock: at rest
[personal profile] arobynsung
Title: Sands of Time
Credit to: [community profile] 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 @ [community profile] visualwit
fandom ยป prydain, the book of three
[personal profile] hymn

Image Preview // Live Preview


Title: Central
Credit to: [community profile] 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.
pic#1935752
[personal profile] chiming
Title: Abstractia
Credit to: [personal profile] chiming
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best resolution: Liquid but 900px+ is best
Tested in: Firefox, Chrome, IE, Safari
Features: 2 columns, fluid width, header, comment pages



(more colors available)


Live Preview

Insructions are here.

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

Somewhat inspired by "Motion", background image is me tooling around in PhotoShop. /shy little wave
It's an Oo Ray!
[personal profile] itsanooray

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


Title: Presser
Credit to: [community profile] 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!
Animated waterfall.
[personal profile] sailorptah
preview

Import of the Sweet Blossoms theme on Wordpress.

Code & Directions

Title: Sweet Blossoms
Credit to: [personal profile] 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
Sir Integra: keeping vampires from eating your dumb ass since junior high.
[personal profile] sailorptah
preview

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

Code & Directions

Title: Gunshots & Ashes
Credit to: [community profile] 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
Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome
[staff profile] denise
[personal profile] bzzinglikeneon gave me permission to post a reminder here: if you're posting your awesome new style or theme to [community profile] dreamwidthlayouts, please also consider submitting it to [site community profile] 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 [community profile] dreamwidthlayouts, and I'd love to be able to add them as system styles.
Animated waterfall.
[personal profile] sailorptah
preview

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

Code & Directions

Title: Open Skies
Credit to: Mostly [personal profile] 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
a girl on a bench.
[personal profile] flamingchemist



Title: CLAMP Border Layout – Red, Yellow, Green, Teal, Blue, and Purple
Credit to: [personal profile] 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!
faris
[personal profile] hymn

Image Preview // Live Preview

Title: Imperium
Credit to: [personal profile] hymn
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.
A pair of brown glasses on a worn wooden table with a shadowed white wall in the background.
[personal profile] megwrites
Title: Flutterby
Credit to: [personal profile] 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: [personal profile] megwrites


Code and instructions beneath the cut! )
It's an Oo Ray!
[personal profile] itsanooray





Title: Hooky
Credit to: [community profile] 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.
a girl on a bench.
[personal profile] flamingchemist


Title: CLAMP Border Layout - Orange
Credit to: [personal profile] 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!
mischief managed;
[personal profile] murdering

click for full-size preview image

A B O U T

Title: Z E N
Credit to: [community profile] yuanru
Base style: Blanket
Type: CSS
Best resolution: Any, though it was designed on 1920 x 1200
Tested in: Chrome
Features: Transparent navigation bar

View more details, installation instructions, and to get the CSS @ yuanru
full moon story
[personal profile] avialan
This is a port of the Motion WordPress Theme for Dreamwidth.

Title: Motion (Port)
Credit to: [personal profile] wiring
Base style: Tabula Rasa
Type: Full Layout (CSS)
Best resolution: Width is fixed, but degrades gracefully to larger resolutions
Tested in: Chrome, Firefox
Features: 2 columns, fixed width


Full-size Preview

Follow this link for instructions/CSS.
okwari
[personal profile] baggyeyes
I found this CSS snippet while trying to find a way to keep large images from swallowing the layout whole:

img, embed, object, video {
max-width: 100%
}

Vanseodesign.com: Flexible Images/


I've only tested it on my reading page, but it seems to work very well.

I hope people find this useful!
arting
[personal profile] rise
[personal profile] foxfirefey suggested we post this here after we posted to [community profile] style_system. We'd somehow never realized we could also post code snippets and layout mods. Sorry about that!

Title: CSS for when you like Crisped but don't like ALLCAPS
Credit to: [community profile] flatlanders
Base style: Crisped
Type: Code Snippet
Tested in: Chrome 14.0.835.186, Fluid 0.9.6, Safari 5.1

We'd been noticing among a few people we know that there are some who really, really like Crisped, but don't want to use it because they can't figure out how to get rid of the forced ALLCAPS that are just about everywhere in it. So, we threw together some Custom CSS to get rid of all the forced uppercase:

code )

If you don't like the forced lowercase in the header, you can also use this:

more code )

And finally, because the decreased letter-spacing can make the navigation menu and header hard to read for some people, especially after removing the allcaps, here's some css that fixes the letter-spacing, too:

also more code )

Hoping this helps!

Profile

Dreamwidth Layouts

February 2012

S M T W T F S
   1234
567 891011
12131415161718
19202122232425
26272829   

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Style:
Yvonne

Expand Cut Tags

No cut tags