Log in

09 June 2012 @ 06:32 pm
How to make a custom LJ layout (Cheater's Method)  
One of the things I love most about LiveJournal is that I can make my journal look however the hell I want. True, half of the time it's only me seeing it because everyone else is reading my entries through their own Friends page, but it just gives me a little bit of joy to have a good-looking layout. And it is so EASY to have a nice one, although it's not very intuitive to figure out how to go about it. I had a LiveJournal for about 6 years before I figured it out. 

Now with some edits.
Back in the early days of this account, I had a plain, LJ-made layout:

(Click for larger)

Yeurk. This is the Gothic style (Bloggish). I really don't like LJ's pre-made styles, which sometimes look unfinished to me.

It was like a revelation when I discovered you could actually customize stuff with a free account using CSS, and I made this:

(Click for larger images)

I made this layout from scratch using the Expressive style. It took DAYS to make. Making a layout from scratch is not practical for someone who has no idea how to use CSS properly (e.g. me). (The entirety of my computer coding knowledge is a handful of HTML tags.)

But then I realized that there are people who actually know what they are doing who make custom layouts and give them away for others to use.  Here are some resources for free layouts:


Look how much better the professionally-made layouts look! I used the colorful design for a short time (this Mixit layout), then settled on the blue layout, which is this Flexible Squares layout with a customized header image.

(Click for larger)

I had the blue layout for a year before finally getting tired of it, but the general structure of it was still how I wanted the journal to look. And that's when I invented The Lazy Cheater Method for Easy Journal Customization. Here's how it works.

1. Find a free layout that has the basics of how you want your journal to look. Maybe it's not the exact color you'd like your journal to be, but you like the layout of the sidebar and entries. Pick a Flexible Squares, Mixit, or Expressive layout because these are the easiest to modify. (Personally, I think Flexible Squares is easiest.) Follow the author's instructions to install it.

2. Use a LJ CSS guide to figure the name of property you want to change. For example, want to change the background color of your entry titles? The CSS guide will tell you that you need to modify the ".subject" class (in Flexible Squares). (In an Expressive layout it's ".asset-header h2"--so just use the guide that applies to your layout.)

Flexible Squares CSS Guide
Expressive/Mixit CSS Guide
Smooth Sailing CSS Guide (I think the CSS classes for Smooth Sailing are not as logical as they are for Flexible Squares and Expressive/Mixit, but here's a guide in case you want to modify some of those layouts.)

Edit: Thanks to this post I just got taught this tip for Firefox. Right click on the element you're interested in changing and choose "Inspect Element." It will automatically show you the CSS class and inside of which elements it is nested. Very cool!

3. Use your best pal Google to figure out CSS questions. Let's say you want the entry title to have a black background with white text. First, look in your layout CSS and see if the ".subject" class is already there. Let's say you see something like this:

.subject {
   color: #000000;
   font-size: 18px;
   font-family: Arial, Helvetica, sans-serif;

For the font color, I googled "css font color." That told me that the "color" property sets font color, and it's already in there, so that's easy. For changing the background color of the entry title, I googled "css background color" and the first link told me that I needed to add a "background-color" property. Then I googled "hex color picker" to tell me the alphnumeric code of the color I wanted. #000000 is black and #FFFFFF is white so I put those in the appropriate places. Putting it together:

.subject {
   color: #FFFFFF;
   font-size: 18px;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #000000;
changes the entry title background to black and font color to white.

Edit: This tutorial shows some basic CSS for modifying LJ layouts, if you don't want to go in completely blind.

Bottom line:
Because you're using a layout that's already extensively modified, most of the time you're just looking through the CSS for the appropriate class and changing or adding a few little things like colors. It takes very little time (a couple hours, maybe) and very little special knowledge.

So if you look closely, my next layout was essentially the same as the blue layout. I just changed the header image, the colors, added borders, and didn't show my user icon. Sneaky and easy.

(click for larger)

And the current layout? No borders this time, and again changed the colors, header image, and font, but it's the still the same damn CSS! (The calendar design is a dead giveaway.)
Rebecca: G-d loves a duckrebecca_in_blue on June 10th, 2012 09:47 pm (UTC)
Haha, and I thought I was the only one who kept track of all my old journal styles! Actually, counting my current one, I've only had two since I first joined five years ago. Your Lazy Cheater Method is pretty much what I did to get my current style, which is Minimalism with a customized header and content width. I really love that colorful layout.
kew121kew121 on June 10th, 2012 11:22 pm (UTC)
I had actually forgotten them before the blue one and had to look back through the choose a style page to remind myself.

I think you were a bit quicker at figuring out that you could customize your layout. For years I thought it was only paid users who could customize their layouts. I'm so glad I know now, even if I do go about it in a lazy/"wrong" way.