Complete Style

All themes have journal links (Recent Entries, Friends, User Info, etc.) available in a sidebar module. Most also place them in the banner area. If you want to remove the version in the banner this is how you do it.

Place the following into your Custom CSS:

#nav-above, #nav-below { display: none; }

If you also want to have the links in a sidebar module instead, scroll up the Custom Options page a bit to where you select sidebar modules and make sure that one of the dropdowns is set to "Nav Links".

In some themes this will be easy, in others more difficult. Let's start with easy.

Let us say you are using the Basic Black and White theme, and just want to remove the black box around the journal title and put your own banner image in the header.

To remove the black box, and make the text black, you will need the paste the following code into your custom css:

#header-text { background-color: none;
border: none;
color: #000000; }
#header-text a { color: #000000; }

If you are using a dark image and want to leave the text white, just don't use the "color: #000000" lines.

Next you need to add your image. First, check to see what size your image is, because you're going to need that. Background images do not take up any "space" by themselves, so you have to specifically tell the container to be as tall as the background image is. Let us say your banner is 300px tall.

You also need to know whether your image should repeat. Is it a big banner you just want to appear once, or is it a smaller image you want to tile? Or is it something you want to repeat horizontally in a strip? Let us say it is a big banner that should not repeat itself at all.

So the next code to paste in will look like this:

#header { background-image: url(http://imagelocation.com/imagename.jpg);
background-repeat: no-repeat;
height: 300px; }

If it had been something you wanted to repeat across, then instead of "no-repeat" you would need to put in "repeat-x". If it's something you want to repeat up and down, you put in "repeat-y".

If you have a more complex set of background images, something you want to layer, there are four header divs available for the purpose. They are, in order from outer to inner:

#header
#header-inner
#banner
#banner-inner

The specific rules you need to alter will quite likely vary a bit from one theme to another, so if you're having trouble the best thing to do is look at the stylesheet of the theme you're using and see whether, for example, you need the change the background of #header-text or the background-color. If you're still stuck, post asking for help!

How much work this will be depends on the theme. With some themes, it will be enough to add the following to your custom css:

a { color: #000099; }
a:visited { color: #009900; }

inserting the color code for whatever color you want your links to be. If you are unfamiliar with hexidecimal color codes, try using a colorpicker to choose them.

Some themes will have different link colors specific to the header or sidebar or main column, however, and those will have to be included separately. If the above code does not do what you want it, the next step is to try:

#beta a,
#gamma a { color: #000099; }
#beta a:visited,
#gamma a:visited { color: #009900; }

for the sidebar, or

#alpha a { color: #000099; }
#alpha a:visited { color: #009900; }

for the main column, or

.entry a { color: #000099; }
.entry a:visited { color: #009900; }

for entries specifically. In fact, if you want to change the link colors only on your entries, and don't mind the sidebar or header colors, your best option is to use the .entry version first thing.

If that still doesn't make your link colors change, you will need to take a look at the style sheet for that theme and track down the places where #anything a { color: #whatever; } is defined. The #anything string will need to be copied exactly into your custom css, with the color changed to the one you want.

A lot of the how-to posts will mention "add this to your custom css". Here is how you do that, for those who have never done it before.

Open a site page, such as your User Info. From the Journal section of the menu, select Customize Journal.

You should now have a page with a tabbed box on it. Click on Custom Options, the third tab over.

Scroll all the way down to the bottom, past all the other option-setting dropdowns and text boxes. The last box will be the Custom Stylesheet.

Paste whatever code you are adding into this box and hit the Save button below.

If you are adding a whole style sheet, to define an entire layout, be sure that you have selected the theme (None), in the Look and Feel tab, unless otherwise directed by the designer. This will remove any other theme style sheets that might interfere.

In the starter set of themes, most of the font is defined in the body tag. To change the font, add the following code to the Custom CSS window:

body { font-family: Verdana; }

Using whatever font you most prefer, of course.