Customizing Semiologic

Abby,

Semiologic is very easy to customize without editing the actual template files. You can make all your changes in a custom.css file and put it in the skins folder you are using. Samples of custom.css are located in wp-content/theemse/semiologic/skins/custom-samples. Details are contained in the files.

Mike

Mike,

thank you for responding. I have made some changes and added the custom.css file. However I am very new to css and I didn’t see anything in the custom-samples file about the height of the navigation bar.

I did try and chang the font color of the top of the calendar but it changed the font color for the whole page which I don’t want to do.

Thank you for your help.

Abby

Abby,

To change the calendar headings, add the following to your custom.css file. Obviously change the color to what you want

.custom #wp-calendar thead
{
background-color: red;
}

to change the navigation bar height, add

.custom #header_nav
{
margin-top: 3px;
margin-bottom: 3px;
}

Increase the default 3px larger to give the bar more height.

Mike

Mike,

Thank you for replying again. That didn’t seem to work for changing the size of the header. I tried many different pixel sizes but no change. Also is it possibly to change the height of the navigation bar as well?

Lastly, I would like to change the color of the font in the calendar heading, not the color of the heading itself. Is that possible?

Thank you again so much for your help,

Abby

abbygirl,

css for changing font color

font-color:white;

just make sure you slap it where the clendar heading css is.

I think this is hopeless. The only place where I see anything about the calendar in the custom.css file is this:

/* the navbar and calendar background color */

.custom #navbar,
.custom #wp-calendar thead th
{
background-color: #58708F;
}

I placed:
{
font-color:white
}

after the last } and nothing changed.

Abby

that would be because you placed it after the last } and not within the class, and didn’t use the semi-colon

it should read:


{
background-color: #58708F;
font-color:#fff;
}

(i don’t recommend using words for colors – not for any reason other than it’s my personal opinion, of course – but #ffffff is the color for “white”, and #fff is the shortcut for it)

try doing some “learning” on CSS – it’ll save you lots of heartache whenever you want to make changes like this…

you’ll want to use:

color: white;

font-color is not part of the css specs.

for the font-size, there is a font scheme specific li declaration in the styles, so you’ll want to override it by using:

.custom #navbar li
{
font-size: medium;
}

there’s a reasonably good css tutorial on w3schools, if you feel like reading one.

grr – Denis is right – I just copied what you had there – it should just be color:

That’s what happens when I’ve been thinking all day and try to take on something mindless… LOL sorry about that!