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:
thefulcrum
scholarslayouts
freelayouts
refutare
minty_peach
refuted
milou_veronica
mintyapple
cartonage
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.)
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:
thefulcrum
scholarslayouts
freelayouts
refutare
minty_peach
refuted
milou_veronica
mintyapple
cartonage
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.)