Making sense of CSS.

Hey no fair! Commenting on what a particular code line does is considered a faux-pas in the field of computers.

There's no substitute for getting your hands dirty - Get in there and break stuff!

Hey no fair! Commenting on what a particular code line does is considered a faux-pas in the field of computers.

-mattb4

Hmm, that's debatable. I've seen plenty of code with lines beginning
#
or
**
and more, so for the newbies who may be just starting out in CSS coding, I think its invaluable.

So you plan to change the CSS of your forum with some new code. The code you place in the FORUM ADMIN >> APPEARANCE >> CSS overrides that provided by Lefora and gives you the power to really screw things up [image]
Here's an example of what you could enter.
#header {background-color:#DDDDDD;background-image:none;background-position:center top;background-repeat:no-repeat;clear:both;height:140px;margin:0 auto;overflow:hidden;width:990px;border:1px solid #336699;}#forum_title {color:#336699;font-family:tahoma;font-size:21px;}#forum_title {What does it do? What does what?
Well laying the code out differently and adding some notes in make things easier to understand, especially when editing and problem finding.
Try this
/* These are the properties to change for the HEADER area */#header {background-color:#DDDDDD;         /* Changes the background colour to a LIght Gray */background-image:none;                 /* Hides the background image */background-position:center top;background-repeat:no-repeat;clear:both;height:140px;margin:0 auto;overflow:hidden;width:990px;border:1px solid #336699;            /* Makes the Border 1px wide and changes it's colour */}/* These are the properties to change for the FORUM TITLE area */#forum_title {color:#336699;font-family:tahoma;                     /* Changes the font in the title to Tahoma */font-size:21px;                            /* Changes the font size to 12pixels */}Now doesn't that look easier to read?
Anything between /* and */ is a comment and is ignored by the CSS processing of the browser, making changes easier to find when you need to make them.

-hal9000

Hal,  any way of adding font colors ?

Where do you want to change the font colors?

Where do you want to change the font colors?

-coloneljack

in the message ..like this one ..only allows black  and 5 different fonts ..plus like in the tutorial our board has no option of switching  Smart text editor and Visual editor .  The tuturial shows a way  to switch between 2 kinds of posting ..it is above the big B (bold ) letter on the message box in the tutorial . We do not have that option..is something wrong  Thanks  Mike

You can't change the colour of the text in the box using css.

 

You can't change the colour of the text in the box using css.
 

-coloneljack

what about smart text editor and Visual editor..no option to switch between the 2 like the Tutorial says ..Thanks Jack

Sry - that was the old editor. That went the way of the dinosaurs a few months ago...

Hi!
Can I change the colours of the categories and group titles?
Like the ones with red boxes.

Btw...There is no way I can delete those in the blue box, rite?
I'm planning to insert an image with my forum title, but those text (Start a Topic etc.) are really annoying...
Hehe. Maybe you've answered all these before but I'm really stoopid with the codes....(-___-")
Anyway, thanks in advance!

Hi Popsikel.

Looking at your forum I see that your header image is 640*288... To see the whole image, and to also leave room for the Nav Bar, insert this into your css :

#header {height:318px;}

To move the Nav Bar into the free space at the bottom add this :

#nav {margin-top:200px;}

To remove the forum name, description, and start a topic links from the header these are the codes you need :

#forum_name {display:none;}

#forum_description {display:none;}

#start_conversation {display:none;}

or you can combine them all into

#forum_name, #forum_description, #start_conversation {display:none;}

To change the colour of the category headers :

To change the category titles :

Hope this helps!