getting started
This is a simple introduction to the things you'll need to make layouts. Or at least the things I use.
1. A Basic Knowledge of CSS
I'm not going to be teaching CSS - I don't know enough about it for a start. If you are very new to this, you may want to visit sites such as W3 School's CSS Intro to brush up. It's pretty simple and straight-forward stuff; font-size means exactly what you think it does.
also see: The ALA Primer Part Two: Resources For Beginners
2. Firefox
Strictly speaking you don't need Firefox. These days everyone and their mum has Firefox, because it is awesome in many ways, but if you don't already then I strongly recommend you do download it. It will make your life much easier.
3. FireBug and Web Developer
+
This is the real reason you will need Firefox. These two add-ons make the creation of layouts incredibly simple. Both of these are live CSS-editing programs integrated with the FireFox browser. FireBug will help you find the elements of your page just with a click, and Web Developer allows you to type your CSS and see the effects directly on the page as you type. Web Developer (unlike FireBug) also allows you to copy your edited code, which can then be pasted into the Custom CSS box.That easy.
4. A text editor
or
or
Show here: Notepad, WordPad and TextEdit
You can also edit your stylesheet in a text editing program. I use this in conjunction with Web Developer as it's particularly useful if you need to replace several instances of text in a code or putting in image urls.
The later two for these programs are RTF editors, which means you can bold and colour the text, which may help you pick apart the stylesheet visually. Obviously these formatting changes won't carry over to Web Developer or the Custom CSS box, so be prepared for a lot of ctrl+c and ctrl+v-ing.
5. Other Helpful FF Add-Ons
FireScope integrates with Firebug and gives examples and definitions for the elements. It's possibly more useful outside of LJ.
ColorZilla is an eyedropper-style tool that can pick the colours from any webpage. A very convenient way to get hex codes for a colour.
LJlogin allows you switch easily between LJ accounts. I use this because I have...*counts*...twelve layout testing journals. And other journals for random reasons.
or
FireShot or Screengrab!; both these programs will take screenshots of your page. You can choose to capture the visible area, the whole area, or just a selection. I use this for presentation purposes. (Fireshot does not work on macs, so fellow mac users should use Screengrab)
Yet Another Window Resizer does pretty much what it says it does. Good for testing purposes if you want to make a resolution-sensitive layout.
6. Inspiration!
Other LJ layouts are a perfectly fine place to look for inspiration. Obviously I don't mean to tell you to plagiarise or create strange, frankenstein layouts made of cut-and-pasted bits of other peoples layouts. Maybe you'll be inspired by a certain font, or a colour scheme, or a layout arrangement.
Web Design Galleries are a more traditional sort of inspiration for LJ layouts.
General design resources. A little bit of everything here.
7. Other Crap Resources
FamFamFam
Pinvoke Fugue pack
Pinvoke Diagona pack
Brand Spanking new
also see:
damnicons's gif icons,
graphicsbyjulz's various icon sets, and
passing-girl's Tiny Icon set 2.
and collections: here, here, and here.
Tiny icons are those lovely little icons you use to replace the default LJ ones. There are many of these around, but these are some of my favourites.
Backgrounds can really spice up an otherwise plain layout.
Fonts are also a lot of fun - everyone loves a nice bit of typography. Dafont.com is a great resource for interesting fonts, but fancy fonts like these aren't widly supported, so their use is pretty much limited to graphics. Information of web-safe fonts can be found here and here.
![]()
1. A Basic Knowledge of CSS
I'm not going to be teaching CSS - I don't know enough about it for a start. If you are very new to this, you may want to visit sites such as W3 School's CSS Intro to brush up. It's pretty simple and straight-forward stuff; font-size means exactly what you think it does.
also see: The ALA Primer Part Two: Resources For Beginners
2. Firefox
Strictly speaking you don't need Firefox. These days everyone and their mum has Firefox, because it is awesome in many ways, but if you don't already then I strongly recommend you do download it. It will make your life much easier.
3. FireBug and Web Developer
+
This is the real reason you will need Firefox. These two add-ons make the creation of layouts incredibly simple. Both of these are live CSS-editing programs integrated with the FireFox browser. FireBug will help you find the elements of your page just with a click, and Web Developer allows you to type your CSS and see the effects directly on the page as you type. Web Developer (unlike FireBug) also allows you to copy your edited code, which can then be pasted into the Custom CSS box.That easy.
4. A text editor
or
or
Show here: Notepad, WordPad and TextEdit
You can also edit your stylesheet in a text editing program. I use this in conjunction with Web Developer as it's particularly useful if you need to replace several instances of text in a code or putting in image urls.
The later two for these programs are RTF editors, which means you can bold and colour the text, which may help you pick apart the stylesheet visually. Obviously these formatting changes won't carry over to Web Developer or the Custom CSS box, so be prepared for a lot of ctrl+c and ctrl+v-ing.
5. Other Helpful FF Add-Ons
FireScope integrates with Firebug and gives examples and definitions for the elements. It's possibly more useful outside of LJ.
ColorZilla is an eyedropper-style tool that can pick the colours from any webpage. A very convenient way to get hex codes for a colour.
LJlogin allows you switch easily between LJ accounts. I use this because I have...*counts*...twelve layout testing journals. And other journals for random reasons.
or
FireShot or Screengrab!; both these programs will take screenshots of your page. You can choose to capture the visible area, the whole area, or just a selection. I use this for presentation purposes. (Fireshot does not work on macs, so fellow mac users should use Screengrab)
Yet Another Window Resizer does pretty much what it says it does. Good for testing purposes if you want to make a resolution-sensitive layout.
6. Inspiration!
Other LJ layouts are a perfectly fine place to look for inspiration. Obviously I don't mean to tell you to plagiarise or create strange, frankenstein layouts made of cut-and-pasted bits of other peoples layouts. Maybe you'll be inspired by a certain font, or a colour scheme, or a layout arrangement.
Web Design Galleries are a more traditional sort of inspiration for LJ layouts.
General design resources. A little bit of everything here.
7. Other Crap Resources
FamFamFam
Pinvoke Fugue pack
Pinvoke Diagona pack
Brand Spanking new
also see:
damnicons's gif icons,
graphicsbyjulz's various icon sets, and
passing-girl's Tiny Icon set 2.
and collections: here, here, and here.
Tiny icons are those lovely little icons you use to replace the default LJ ones. There are many of these around, but these are some of my favourites.
Backgrounds can really spice up an otherwise plain layout.
Fonts are also a lot of fun - everyone loves a nice bit of typography. Dafont.com is a great resource for interesting fonts, but fancy fonts like these aren't widly supported, so their use is pretty much limited to graphics. Information of web-safe fonts can be found here and here.