Tips and links on layout design.
not_sally asked if I could do a tutorial on how I come up with and make my layouts, and though this is not exactly a tutorial, I've put together a small list of tips and tricks. I'd like to add that I'm completely self-taught and that this is just my way of doing things, not the way.
1) Use a web developer tool: I have one as an add-on in my Firefox browser. It's super easy to use and extremely powerful. With just a few clicks, you can find all the info you could ever need about the chore structure of a web page. It is most useful when you want to find names of divs, ids and classes for example (Ctrl+Shift+F), but there are lots of other useful tools: I'm especially fond of view image information which can really help you understand how to use pictures on a page. Whenever I stumble upon a site I like, I always take a look at the css, html source and images using the web developer. Best way to learn in my opinion.
2) Visualize your layout before you start: Having a rather definite idea of the look your layout is going to have is important. It seems pretty obvious but it still needs to be said. You'll save a lot of time that way. It's all the more important if you want to include images in your layout as some of your images may define the width or height of certain elements. For that reason and even though it's not set in stone, I'd recommend creating the images before you start coding the css.
Example: For the layout I'm currently using, I created 5 different images (user icons not included): 4 background images, each in a different shade of gray, and 1 header. The header is set as a background image (no-repeat) in the sidebar div and is the only image defining the heigth and width of the div it's in. The other four are set as background images, repeated and fixed. The fixed property is there to give the illusion of transparency when scrolling the page.
Transparency effects are of course not the only thing you can do with images: you can put your userpic in a fancy frame, create shadows, rounded corners, uneven boxes, roll-overs buttons, etc...the sky's the limit. Don't be afraid to use images to cheat and go beyond the limits imposed by the set structure of an lj layout. Since modifying the html source is impossible, images can sometimes be the alternative.
It's also around that time that you have to decide on a color scheme. There are plenty of sites that can help you do that on the www:
3) Keep your css as clean, clear and organized as possible: When your categories and subcategories are clearly defined and regrouped logically, you're less likely to be redundant or forgetful. Start with the biggest elements (structure of the page, body, header, footer, menu, main content...) and then go inwards to the smaller elements (entries, date, subject, userpic, comments, ...). Personally, I like to keep everything regarding typography for last but coding the typography of the div as you're coding the div can be a plus, especially if the font-size influences the padding or other properties. As for the CSS itself, there are tons of useful web sites out there you can use as reference. Here are a few I like:
4) Create your own divs and classes: When I wrote above that it was impossible to edit the html code, it was only partially exact; though you cannot edit it *, you can add to it. How so? Two words: The Blurb. In most layouts, you have the possibility to have a blurb in your sidebar, and for most of them, you can actually write html in it. In other words, it means you can create the look of your blurb from A to Z. \o/
* It may be possible to edit the html structure via theme layers, but I'm not knowledgable in this area. If possible, it would only be possible for paid users in any case.
In Flexible Squares for example, you can put your sidebar in between the header menu and the content, creating a sort of second header. You can choose to put there all the usual elements of your sidebar, including the blurb. In my current layout, there's only the blurb. I've customized it so that it includes a welcome note and the links and filters I use while I read my LJ. Here's how it's structured:
CSS code: Note that not all typographic elements are defined here; as most of them were defined in mother elements, there was no need to repeat them.
/* -----------------
Blurb
----------------- */
#sidebar {
background: url(http://URL/header.jpg) no-repeat top left;
color: #8C8C8C;
height: 220px;
padding: 20px;
margin: 0 0 2px 0;
}
.sbarbody2 {
padding: 0;
margin: 0;
text-align: justify;
}
.blurbcol1 {
width: 190px;
float: left;
padding: 0;
margin: 0;
}
.blurbcol2 {
width: 460px;
float: left;
padding: 0 0 0 35px;
margin: 0;
}
.blurbinnercol1 {
width: 100px;
height: 100%;
float: left;
padding: 0;
margin: 0;
}
.blurbinnercol2, .blurbinnercol3 {
width: 120px;
height: 100%;
float: left;
padding: 0;
margin: 0;
}
ul.blurb {
padding:0;
margin:0;
}
.blurb li {
list-style-type:none;
padding:0;
margin:0;
}
.blurbtitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #637566;
}
.blurblisttitle {
color: #899A8B;
font-weight: bold;
}
ul.blurb a, ul.blurb a:link, ul.blurb a:active, ul.blurb a:visited {
color: #73979D;
font-weight: normal;
}
ul.blurb a:hover {
color: #A1A172;
}
Html code: The code below is what I have written in my blurb box. Note that because the text in the blurb is auto-formatted (which means that LiveJournal adds line breaks any time you hit the enter or return key), it is line break sensitive. Therefore, the code in the blurb is a mixture between html and auto-format. Links, lists, divs are in html, but line breaks are not. It makes the code hard to read because you cannot create line breaks for clarity's sake without creating a physical line break. What I usually do is write it with the line breaks so that I actually see what I'm doing and don't create a big mess, and then remove all the unwanted line breaks before pasting it in the blurb.
Also note that unlike the userinfo, entry text or comments, you cannot use your html in the blurb to disable the auto-formatting. It won't work. Unfortunately.
70% locked.
Entries are public when first posted. After a little while, they all become f-locked but the ones with fan art, which always remain public.
Popular Tags
Fan Art - Comics - Vids.
More at Colordrop.
On LJ - Icons - Layouts.
Links & Filters.
BlogReading
Pixel FunResources
FictionArt & Misc. News
Note: The css and code available above are not for grabs. Feel free to use them as inspiration though.
The blurb is not the only place where you can add html ids and classes. Entries accept both auto-format and html, which means that in addition to the usual customization of links, user icons, blockquote, bold text, italicized text, underlined text, unordered and ordered lists, and so on, you can create new ids and classes. I'm going to take as an example the creation of a border around a picture.
It's very easy to achieve. In your entry, write:
I've added a class that I called "frame" to my image. Now I define this class in my stylesheet:
.frame {
padding:10px;
background: #000 url(http://url/bgpic.jpg) repeat fixed;
}
Note that here I have a background pic, but you can choose not to and only have a background color, or just have a padding and a stylized border. This is only one of the many possibilities. You can also add other properties... if for example you always center your pictures, you can include the centering in the css so that you won't need to do it by hand whenever you post a picture with that class. Anyways, you will see in your entry:
The important thing here is that you keep the name of your classes from one style sheet to another and keep on defining them as time goes by. When defining classes and ids, choose names that you can easily remember. Adding a border to a picture is one of the many things you can do... you can also embbed pictures within text by creating new divs, customize several types of blockquotes by assigning them a class, etc. Your imagination is the limit, and if it's running out, there are web galleries which can always revive it:
Man, do I feel geeky or what? This calls for a McGeek userpic. *selects* I urgently need to go and do something cool now... like rollerskating with my pants almost falling off my hips. Or something. Before the geekiness swallows me whole. What do you mean it's too late?
1) Use a web developer tool: I have one as an add-on in my Firefox browser. It's super easy to use and extremely powerful. With just a few clicks, you can find all the info you could ever need about the chore structure of a web page. It is most useful when you want to find names of divs, ids and classes for example (Ctrl+Shift+F), but there are lots of other useful tools: I'm especially fond of view image information which can really help you understand how to use pictures on a page. Whenever I stumble upon a site I like, I always take a look at the css, html source and images using the web developer. Best way to learn in my opinion.
2) Visualize your layout before you start: Having a rather definite idea of the look your layout is going to have is important. It seems pretty obvious but it still needs to be said. You'll save a lot of time that way. It's all the more important if you want to include images in your layout as some of your images may define the width or height of certain elements. For that reason and even though it's not set in stone, I'd recommend creating the images before you start coding the css.
Example: For the layout I'm currently using, I created 5 different images (user icons not included): 4 background images, each in a different shade of gray, and 1 header. The header is set as a background image (no-repeat) in the sidebar div and is the only image defining the heigth and width of the div it's in. The other four are set as background images, repeated and fixed. The fixed property is there to give the illusion of transparency when scrolling the page.
Transparency effects are of course not the only thing you can do with images: you can put your userpic in a fancy frame, create shadows, rounded corners, uneven boxes, roll-overs buttons, etc...the sky's the limit. Don't be afraid to use images to cheat and go beyond the limits imposed by the set structure of an lj layout. Since modifying the html source is impossible, images can sometimes be the alternative.
It's also around that time that you have to decide on a color scheme. There are plenty of sites that can help you do that on the www:
- Color Schemer -- Very useful to get the HEX value of a color. Darken or lighten it with just a click, see various corresponding colors.
- Colour Lovers -- Search existing color schemes, create your own. Made of fun.
- Stripe Generator -- When you don't want to be bothered creating it yourself.
- Tartan Maker -- More fun.
- Palette Generator -- You have a beautiful header? This tools will give you the HEX values of its color palette.
3) Keep your css as clean, clear and organized as possible: When your categories and subcategories are clearly defined and regrouped logically, you're less likely to be redundant or forgetful. Start with the biggest elements (structure of the page, body, header, footer, menu, main content...) and then go inwards to the smaller elements (entries, date, subject, userpic, comments, ...). Personally, I like to keep everything regarding typography for last but coding the typography of the div as you're coding the div can be a plus, especially if the font-size influences the padding or other properties. As for the CSS itself, there are tons of useful web sites out there you can use as reference. Here are a few I like:
- W3 Schools.
- Style Master.
- CSS, Accessibility and Standards.
- Veerle's Blog -- Everything there is interesting. Click on her CSS tag for tutorials and more.
- Type Tester -- Compare screen type.
4) Create your own divs and classes: When I wrote above that it was impossible to edit the html code, it was only partially exact; though you cannot edit it *, you can add to it. How so? Two words: The Blurb. In most layouts, you have the possibility to have a blurb in your sidebar, and for most of them, you can actually write html in it. In other words, it means you can create the look of your blurb from A to Z. \o/
* It may be possible to edit the html structure via theme layers, but I'm not knowledgable in this area. If possible, it would only be possible for paid users in any case.
In Flexible Squares for example, you can put your sidebar in between the header menu and the content, creating a sort of second header. You can choose to put there all the usual elements of your sidebar, including the blurb. In my current layout, there's only the blurb. I've customized it so that it includes a welcome note and the links and filters I use while I read my LJ. Here's how it's structured:
CSS code: Note that not all typographic elements are defined here; as most of them were defined in mother elements, there was no need to repeat them.
/* -----------------
Blurb
----------------- */
#sidebar {
background: url(http://URL/header.jpg) no-repeat top left;
color: #8C8C8C;
height: 220px;
padding: 20px;
margin: 0 0 2px 0;
}
.sbarbody2 {
padding: 0;
margin: 0;
text-align: justify;
}
.blurbcol1 {
width: 190px;
float: left;
padding: 0;
margin: 0;
}
.blurbcol2 {
width: 460px;
float: left;
padding: 0 0 0 35px;
margin: 0;
}
.blurbinnercol1 {
width: 100px;
height: 100%;
float: left;
padding: 0;
margin: 0;
}
.blurbinnercol2, .blurbinnercol3 {
width: 120px;
height: 100%;
float: left;
padding: 0;
margin: 0;
}
ul.blurb {
padding:0;
margin:0;
}
.blurb li {
list-style-type:none;
padding:0;
margin:0;
}
.blurbtitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #637566;
}
.blurblisttitle {
color: #899A8B;
font-weight: bold;
}
ul.blurb a, ul.blurb a:link, ul.blurb a:active, ul.blurb a:visited {
color: #73979D;
font-weight: normal;
}
ul.blurb a:hover {
color: #A1A172;
}
Html code: The code below is what I have written in my blurb box. Note that because the text in the blurb is auto-formatted (which means that LiveJournal adds line breaks any time you hit the enter or return key), it is line break sensitive. Therefore, the code in the blurb is a mixture between html and auto-format. Links, lists, divs are in html, but line breaks are not. It makes the code hard to read because you cannot create line breaks for clarity's sake without creating a physical line break. What I usually do is write it with the line breaks so that I actually see what I'm doing and don't create a big mess, and then remove all the unwanted line breaks before pasting it in the blurb.
Also note that unlike the userinfo, entry text or comments, you cannot use your html in the blurb to disable the auto-formatting. It won't work. Unfortunately.
70% locked.
Entries are public when first posted. After a little while, they all become f-locked but the ones with fan art, which always remain public.
Popular Tags
Fan Art - Comics - Vids.
More at Colordrop.
On LJ - Icons - Layouts.
Links & Filters.
BlogReading
Pixel FunResources
FictionArt & Misc. News
Note: The css and code available above are not for grabs. Feel free to use them as inspiration though.
The blurb is not the only place where you can add html ids and classes. Entries accept both auto-format and html, which means that in addition to the usual customization of links, user icons, blockquote, bold text, italicized text, underlined text, unordered and ordered lists, and so on, you can create new ids and classes. I'm going to take as an example the creation of a border around a picture.
It's very easy to achieve. In your entry, write:
I've added a class that I called "frame" to my image. Now I define this class in my stylesheet:
.frame {
padding:10px;
background: #000 url(http://url/bgpic.jpg) repeat fixed;
}
Note that here I have a background pic, but you can choose not to and only have a background color, or just have a padding and a stylized border. This is only one of the many possibilities. You can also add other properties... if for example you always center your pictures, you can include the centering in the css so that you won't need to do it by hand whenever you post a picture with that class. Anyways, you will see in your entry:
The important thing here is that you keep the name of your classes from one style sheet to another and keep on defining them as time goes by. When defining classes and ids, choose names that you can easily remember. Adding a border to a picture is one of the many things you can do... you can also embbed pictures within text by creating new divs, customize several types of blockquotes by assigning them a class, etc. Your imagination is the limit, and if it's running out, there are web galleries which can always revive it:
Man, do I feel geeky or what? This calls for a McGeek userpic. *selects* I urgently need to go and do something cool now... like rollerskating with my pants almost falling off my hips. Or something. Before the geekiness swallows me whole. What do you mean it's too late?