CSS Template: Black and White and Red All Over version 2.0 [s2 -- Smooth Sailing]
For a long time, I thought this layout was lost, thanks to a server move where the files disappeared. Thanks to kaizoku, I got the CSS back, and fixed it up some. This is a re-post [the original was posted here], but version 2.0 includes a dark version of the layout as well.
Note: All CSS templates I post are created with Mozilla Firefox in mind, and therefore will probably not work so well in Internet Explorer.
Black and White and Red All Over
A LiveJournal CSS Template by wherethewind, Featuring:
» Optional Header Image
» "Floating" Entry and Sidebar Boxes
» Center Alignment
Version A: Black and White and Red All Over
view larger · live preview · download css
Version B: Bram Stoker Was Here
view larger · live preview · download css
I've made some adjustments to the original version of this layout while trying to keep the basic feel of it similar to the original. Here's hoping I succeeded.
Installation
1. Download the template CSS using one of the above links.
2. Feel free to edit the colors, images, etc. to your liking. DON'T DO ANYTHING BEYOND CHANGING THE BASICS IF YOU DON'T UNDERSTAND CSS.
3. Go to LJ's Customization Center and find Smooth Sailing in the search box. Select any one of the themes listed and then choose "2 Column (sidebar on left)".
4. Go to the Custom CSS tab and select NO on both dropdown menus, then paste the custom CSS in the box and select "Save Changes".
5. To edit the header image, find .header-title in the stylesheet. In that block, replace http://lj.flight-of-fancy.net/layouts/smoothsailing/01/fake-header.jpg with the URL of your own header image. The image must be 832px wide; however, if you change the "height" variable for the .header-title block, your header does not need to be 250px high.
6. If you do not want to use the navigation strip, which I've attempted to customize to suit the layout, then find .pageblock in the CSS and set margin-top to 0px. Once you've implemented the CSS change, go to the Display tab and under Navigation Strip, uncheck both boxes.
7. Crediting me for this layout would be fabulous. You can edit it to your heart's content -- go crazy with color, images, etc. if you want.
Images
The following images are used in the layout. Please upload them to your own server, as they are currently hosted on my private webspace:
» background image located in the body block of the CSS -- original made by The Inspiration Gallery, edited and recolored by me
» comment header accent image located in .commentHeader
If you're having issues with pictures on your friends list stretching out your layout, try the following in your CSS:
In .entryText, add EITHER overflow: auto; OR overflow: hidden; to the block. The first option will insert a scrollbar when needed, to corral those pesky stretchy images. The second option will clip all content wider than the constraints of the entry. I prefer the latter, but only because I don't care for scrollbars going all willy-nilly in my layouts.
Note: All CSS templates I post are created with Mozilla Firefox in mind, and therefore will probably not work so well in Internet Explorer.
Black and White and Red All Over
A LiveJournal CSS Template by wherethewind, Featuring:
» Optional Header Image
» "Floating" Entry and Sidebar Boxes
» Center Alignment
Version A: Black and White and Red All Over
view larger · live preview · download css
Version B: Bram Stoker Was Here
view larger · live preview · download css
I've made some adjustments to the original version of this layout while trying to keep the basic feel of it similar to the original. Here's hoping I succeeded.
Installation
1. Download the template CSS using one of the above links.
2. Feel free to edit the colors, images, etc. to your liking. DON'T DO ANYTHING BEYOND CHANGING THE BASICS IF YOU DON'T UNDERSTAND CSS.
3. Go to LJ's Customization Center and find Smooth Sailing in the search box. Select any one of the themes listed and then choose "2 Column (sidebar on left)".
4. Go to the Custom CSS tab and select NO on both dropdown menus, then paste the custom CSS in the box and select "Save Changes".
5. To edit the header image, find .header-title in the stylesheet. In that block, replace http://lj.flight-of-fancy.net/layouts/smoothsailing/01/fake-header.jpg with the URL of your own header image. The image must be 832px wide; however, if you change the "height" variable for the .header-title block, your header does not need to be 250px high.
6. If you do not want to use the navigation strip, which I've attempted to customize to suit the layout, then find .pageblock in the CSS and set margin-top to 0px. Once you've implemented the CSS change, go to the Display tab and under Navigation Strip, uncheck both boxes.
7. Crediting me for this layout would be fabulous. You can edit it to your heart's content -- go crazy with color, images, etc. if you want.
Images
The following images are used in the layout. Please upload them to your own server, as they are currently hosted on my private webspace:
» background image located in the body block of the CSS -- original made by The Inspiration Gallery, edited and recolored by me
» comment header accent image located in .commentHeader
If you're having issues with pictures on your friends list stretching out your layout, try the following in your CSS:
In .entryText, add EITHER overflow: auto; OR overflow: hidden; to the block. The first option will insert a scrollbar when needed, to corral those pesky stretchy images. The second option will clip all content wider than the constraints of the entry. I prefer the latter, but only because I don't care for scrollbars going all willy-nilly in my layouts.