LJ Layouts for paid users - using layers and styles

[gossymer]

Layers and Styles are one of the reasons I find paid LJ accounts so useful. Surprisingly, it's all pretty fast to do and saves a lot of time in future.

The Steps

#1: Create the layer(s)

• Go to the Advanced Customization area
• Click on Your Layers
• Scroll down to the bottom where you will see "Create layout-specific layer". Choose "user" from the drop down menu. Then choose your desired layout from the other drop down menu.Click Create
• The page will refresh, displaying your new layer. Note down the number ID on the left of the new layer.
• Scroll up to find the link to Your Styles

#2: Create the style

• On the Your Styles page, scroll to the bottom to the "Create Style" section. Type in a name for your new style and click create.
• On the Edit Style page that shows up select the layout of the layer you made in step one. So if you created a smooth sailing layer, change the Style layout to Smooth Sailing. Click Change.
• The page will refresh. Choose your newly created layer from the "user" drop down menu. Click Save Changes.
• You will be taken back to the Your Styles page. Your new style will be available. Click the "Use" button on the right. Your livejournal will now be using the default version of the layout you chose. Now to customize it...

#3: Add the CSS (and everything else)

• Go to the Customize area for the Journal Display.
• If you saw a pretty layout someone posted the stylesheet for just follow the instuctions they gave that came with the CSS stylesheet.
• Make all the changes you want - title, subtitle, link lists, sidebar/no sidebar, usepics etc. Whatever floats your boat.
• Save your changes.

By doing these steps, you can have several different styles available at the click of a single button. In future just go to the Your Styles area and choose "Use" on the right of the style you set up. You can have up to 150 layers/styles I think.


Additional: Making a layout public (a live preview for others)
Other people can also see the style you made:

• Go to Your Layers
• Find the layer you want to make public and click the "Edit" button on the right.
• Paste these two lines BEFORE all the code:

layerinfo is_public = 1;
layerinfo source_viewable = 1;

• Go to Your Styles - next to the Style name there is a link in brackets (#blahblah). Right click that link and copy the address.

That link can be viewed by others. Alternativley take "?s2id=yourstylenumber" and add it to your livejournal links:

http://username.livejournal.com?s2id=yourstylenumber
http://username.livejournal.com/friends?s2id=yourstylenumber
http://username.livejournal.com/calendar?s2id=yourstylenumber
http://username.livejournal.com/tag?s2id=yourstylenumber
http://username.livejournal.com/yourpost.html?s2id=yourstylenumber

Remember to test out styles with the comment reply page, the navigation bar and ads (vertical and horizontal). Other people can only see the live preview on your own livejournal.


Additional: Fast editting of CSS via layers
Do all the steps above. Go to Your Layers, click Edit. You will see the CSS you added in between "quotes"... just copy and paste the new CSS there instead.

Why is this awesome? You do not need to be using the style. I will have my regular Style which I'm using for the livejournal layout...and an experimental style which can only be seen by those links for live preview. So you can go crazy and make your layout practically unreadable but no one else will see it since your regular Style is the one that is active.


Additional: Web Developer Toolbar for fast results
When I start playing around with CSS I do all the steps above, and then return my livejournal style to the style I normally use. I go to the live preview link of the new Style in Fire Fox after loading my web developer toolbar extension. I choose the Edit CSS option and edit the stylesheet. Be aware that there may be more than one stylesheet being used so click on each stylesheet tab to find the correct one.

DO NOT try to browse other websites in the same Fire Fox window or all your CSS changes will be reset. Copy your CSS changes periodically to a text file or something as a back up. I usually have Firefox open for CSS editing, and my Opera browser open for surfing. Also remember that what may look fine in Fire Fox may still not show up correctly in other browsers. I try to get my layouts in work in Fire Fox, Opera and Internet Explorer.


Additional: What on earth are theme layers?
I'm a bit sketchy on it but here you go. Each Style can use two layers at the same time - a user layer and a theme layer. However, if you go to the Customization area and make any changes, your user layer changes too. Your theme layer is not touched though. Normally I use the theme layer to add programming hacks - adding images to the linkbar, adding image maps, additional structural elements such as menus etc.
For instance, I have a Smooth Sailing theme layer for linkbar images. Even though I may have a dozen smoothsailing styles with different user layers, I can use the same theme layer with all of them. That way I can always use the same linkbar images.

This is a quick tutorial I did for anyone new to layouts and CSS. Probably a lot of typos and stuff but please ignore - or better yet, point out the issues and I'll correct them XD