allwashedout

Layout #1



My first layout, meep. I hope there aren't any confusing parts. /o\ Edit: Sidebar version added.




INFO
  • Style: S2 - Smooth Sailing
  • Two versions: with topbar or sidebar
  • For free, paid, plus accounts (works well when the ads are between entries.)
  • Best viewed at 1024*768 or higher
  • Was tested in Firefox and IE (it works better with Firefox)


INSTALLING THE LAYOUT
1. Pick a header from below and paste its code into the CSS you chose under .pageheaderblock (you can find it in the HEADER section). For example if you choose the Bob header, your .pageheaderblock will look like this.

2. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap)

3. Go to the Theme customization page and choose these options at Presentation, then hit 'Save Changes'. (I marked the important ones, you decide about the rest.)

4. Go to the Sidebar page. With the topbar version the profile userpic and info, page summary, calendar and multisearch box are disabled (free text, links and tags are enabled), so at Profile Position, Summary Position, Latest Month Position and Multisearch Position (under Multisearch Sidebox) choose hide, then hit 'Save Changes'.
NOTE: the topbar is now 160px tall. However, depending on the amount of text/links/tags you have in your sidebar, this height might won't fit. If the topbar overlaps the entries, you'll have to change two numbers in the code:

BASICS --> .bodyblock --> margin-top: 172px

and SIDEBAR --> .sidebar --> margin-top: -160px (increase these numbers if you need a taller topbar, or decrease them if you need a shorter one than 160px).

With the sidebar version every part is enabled and you decide about the sideboxes' visibility and order.

5. Go to Custom CSS, and select the following:
  • Use layout's stylesheet(s): No
  • Use layout's stylesheet(s) when including custom external stylesheet: No
  • Leave the Custom external stylesheet URL box blank.
  • Copy + paste the code to the Custom stylesheet box. (screencap)
Hit 'Save changes', and you're done! I hope.


THE BASIC CODE
WITH TOPBAR


WITH SIDEBAR


THE HEADERS
Choose one and paste its code under .pageheaderblock. Also, upload them to your own server, please (I'm not gonna delete them from photobucket, but y'know, just in case). Photos are mainly from mcr-pics.com and mcr_pic_spam.
PREVIEWS
CODES
background-color: #d5e3ee;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01band1.jpg');
background-color: #000700;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01band2.jpg');
background-color: #17100a;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01bob02.jpg');
background-color: #1e241a;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/frank.jpg');
background-color: #b7d2e7;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/gerard01.jpg');
background-color: #cfdbf1;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01gerard002.jpg');
background-color: #10211b;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/mikey.jpg');
background-color: #201d18;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/ray001.jpg');
I'm not good at making graphics, but hey, I think simple headers work well with this layout. If you'd like to, you can pretty these up, add text to them, etc. Or if you want to make your own, you'll need a good quality picture with a distinct background color, make it 390px tall, then paste its url and the background color's hex code into the CSS.


EDIT: More variety! nokitas made a really, REALLY pretty stock header which is shareable \o/ If you use it, don't forget to credit her as well!
background-color: #000000;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/header_nokitas.png');
(If you use this one, replace
HEADER --> .pageheaderblock --> "height: 390px !important;" with "height: 496px !important;",
HEADER --> .header-menu --> "top: 369px;" with "top: 478px;"
plus at BASICS --> .bodyblock --> "margin-top: (172px or 5px);" add 106 to the number.)


RULES!
1. Credit me. CREDITING IS AWESOME. Also, don't repost the codes as your own.
2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask.
3. Enjoy! :)

layoutspublicsmooth sailing

LJ Video