Color Coded Stylesheet Help
March 29, 2024, 02:40:58 am
Welcome, Guest. Please login or register.

Login with username, password and session length
 
  Home Help Search Arcade Gallery Links Staff List Calendar Members Login Register  

Default Css Guide

Pages: [1]
  Print  
Author Topic: Default Css Guide  (Read 783 times)
simply sibyl
Administrator
*****
Posts: 35



View Profile
« on: December 02, 2008, 01:01:07 am »

The CSS  (Cascading Stylesheet) is the code that defines all the colors, fonts, styles ect on your forum.  
Ive broken down the default css into sections, with explanations of each section, for you.    
My goal with this is not to teach you how to edit these areas -  it is to show you what each of these areas is for.

Best source for help with css:  http://www.w3schools.com/css/



/* Normal, standard links. */
a:link
{
   color: #476C8E;
   text-decoration: none;
}
a:visited
{
   color: #476C8E;
   text-decoration: none;
}
a:hover
{
   color: #000000;
   text-decoration: underline;
}

Defines the colors of the links on your forum.
In the example above the normal and visited links are color #476C8E.
When hovered over with the mouse they change to #000000 and are underlined.




/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #000000;
   text-decoration: none;
}
a.nav:hover
{
   color: #cc3333;
   text-decoration: underline;
}

Defines the colors and style of the navigation links.  (example below)
In the example above the navigation links are color #000000.
When hovered over with the mouse they change to #cc3333 and are underlined.





/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}

Defines the colors of the text such as on the board index, header and footers, and in the main body of text.




/* The main body of the entire forum. */
body
{
   background-color: #E5E5E8;
   margin: 0px;
   padding: 12px 30px 4px 30px;

}

Defines the background color,  margin, and padding.
This is where you would add a background image.
How to put a background image on your forum
You can also change the width of the forum.
Center your forum / make forum exact width       
w3schools css background info:   http://www.w3schools.com/css/css_background.asp




/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   background-color: ;
   color: #000000;
   font-family: verdana, sans-serif;
}

Defines the text color and text sizes of your input boxes, text areas, and buttons. (example below)

You can change the color of those areas by adding a background color and borders.




input, button
{
   font-size: 90%;
}

Defines the font size for the input button




textarea
{
   font-size: 100%;
   color: #000000;
   font-family: verdana, sans-serif;
}

Defines the font size, color and family of the text in the text boxes (areas like the quick reply box, the post editor box, the header/footer,  admin notes area, etc.




/* Selects are a bit smaller, because it makes them look even better Cool. */
select
{
   font-size: 90%;
   font-weight: normal;
   color: #000000;
   font-family: verdana, sans-serif;
}

Defines the text size, font and color for the select boxes. (the drop down menus)




/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

Defines the height, border, color, etc of the horizontal rules.
Horizontal rules are used in areas like at the top of posts,  just above the signature in a post,  and the horizontal lines in this guide, etc.




/* No image should have a border when linked */
a img
{
   border: 0;
}

Simple:   borders will not be put around linked images
If for some reason you want them bordered change it to:
border:  1px solid #000000;
Change 000000 to your preferred color




/* A quote, perhaps from another post. */
.quote
{
   color: #000000;
   background-color: #D7DAEC;
   border: 1px solid #000000;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.4em;
}

Defines the text color, size, border color, background color of the quote boxes in posts.




/* A code block - maybe even PHP . */
.code
{
   color: #000000;
   background-color: #dddddd;
   font-family: "courier new", "times new roman", monospace;
   font-size: x-small;
   line-height: 1.3em;
   /* Put a nice border around it. */
   border: 1px solid #000000;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

Defines the text color, text size, border color, background color, margin, padding, etc of the code boxes in posts.




/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

Defines the headers fpr the code and quote boxes (Where it says either Code: or Quote:




/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

Defines the width of the main posting box.




/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

Defines the color, background color of the highlighted words in Search results




/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #000000;
   background-color: #ECEDF3;
}
.windowbg2
{
   color: #000000;
   background-color: #F6F6F6;
}
.windowbg3
{
   color: #000000;
   background-color: #E0E1E8;
}

Defines the font color and background color for several areas on the forum including alternating posts
(With some imagination you can add background images and bordering to these areas)




/* the today container in calendar */
.calendar_today
{
   background-color: #FFFFFF;
}

Defines the background color for the current day on the calendar




/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
   color: black;
   font-style: normal;
   background: url(http://images.smfboards.com/Themes2/default/images/titlebg.jpg) #E9F0F6 repeat-x;
   border-bottom: solid 1px #9BAEBF;
   border-top: solid 1px #FFFFFF;
   padding-left: 10px;
   padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
   font-weight: bold;
   color: black;
   font-style: normal;
}

.titlebg a:hover
{
   color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
   color: black;
   font-style: normal;
   text-decoration: underline;
}

.titlebg2 a:hover
{
   text-decoration: underline;
}


Defines the background image, text color, text size/font , padding, etc of the titles for the table headers.
This includes areas such as the titles in the Info Center,  the titles at the top of the forum  (where the time is) and many other areas on the forum where those titles are used.



/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
   background: url(http://images.smfboards.com/Themes2/default/images/catbg.jpg) #88A6C0 repeat-x;
   color: #ffffff;
   padding-left: 10px;
   padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
   background: url(http://images.smfboards.com/Themes2/default/images/catbg2.jpg) #A1BFD9 repeat-x;
   color: #ffffff;
   padding-left: 10px;
   padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
   border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
   font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
   font-size: 95%;
   color: white;
   text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
   color: white;
   text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
   color: #e0e0ff;
}

Defines the background image, text color, text size/font , padding, etc of the Category Headers.
This includes areas such as the category headers page indexes, and several other areas in the forum





/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #ADADAD;
   padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   padding: 1px;
   border: 1px solid #696969;
   background-color: #FFFFFF;
}

Defines the parameters for the borders around things.
The first section labeled ".bordercolor" specifies the borders around things such as posts in threads, and items on the menu in the admin center (see top picture).
The second section named ".tborder" is for the borders around things such as categories on the forum index, and just about every other place that has a border on the entire forum.




/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: verdana, sans-serif;
}
.middletext
{
   font-size: 90%;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}

Defines the default font sizes



The Tab Definitions in the css
I've divided the tab section of the css into a few parts to make this easier.


Definitions for the "main" tabs

Example:


This part specifies the font color, size, family, alignment, and text transformation for the main and main_active tabs.


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
   color: white;
   text-transform: uppercase;
   vertical-align: top;
}
.maintab_back, .maintab_active_back
{
   color: white;
   text-decoration: none;
   font-size:  9px;
   vertical-align: top;
   padding: 2px 6px 6px 6px;
   font-family: tahoma, sans-serif;
}




This part defines the background images, and the width of the main tabs.

maintab_first.gif -  The left side
maintab_back.gif - Repeats across the bar
maintab_last.gif -   The right side

   


.maintab_first
{
   background: url(images/maintab_first.gif) left bottom no-repeat;
   width: 10px;
}
.maintab_back
{
   background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
   background: url(images/maintab_last.gif) left bottom no-repeat;
   width: 8px;
}




This part defines the background images, and the width of the main_active tabs

The main "active" tabs are usually a different color then the "main" tabs to show the page you are currently on

maintab_active_first.gif   -  The left side
maintab_active_back.gif  -  Repeats across the bar
maintab_active_last.gif   -   The right side

   


.maintab_active_first
{
   background: url(images/maintab_active_first.gif) left bottom no-repeat;
   width: 6px;
}
.maintab_active_back
{
   background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
   background: url(images/maintab_active_last.gif) left bottom no-repeat;
   width: 8px;
}




Defines the link colors, text-decoration, for the main and main_active tabs


/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
   color: white;
   text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
   color: #e0e0ff;
   text-decoration: none;
}




Definitions for the "mirror" tabs.

Example:


This part specifies the font color, size, family, alignment, and text transformation for the mirror and mirror_active tabs.


/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
   color: white;
   text-transform: uppercase;
   vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
   color: white;
   text-decoration: none;
   font-size: 9px;
   vertical-align: bottom;
   padding: 6px 6px 2px 6px;
   font-family: tahoma, sans-serif;
}



This part defines the background images, and the width of the mirror tabs

mirrortab_first.gif -  The left edge of the tab bar
mirrortab_back.gif - Repeats across the bar
mirrortab_last.gif -   The right edge of the tab bar

   


.mirrortab_first
{
   background: url(images/mirrortab_first.gif) no-repeat;
   width: 10px;
}
.mirrortab_back
{
   background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
   background: url(images/mirrortab_last.gif) no-repeat;
   width: 6px;
}



This part defines the background images, and the width of the mirror_active tabs

mirrortab_active_first.gif -  The left side
mirrortab_active_back.gif - Repeats across the bar
mirrortab_active_last.gif -   The right side

   



.mirrortab_active_first
{
   background: url(images/mirrortab_active_first.gif) no-repeat;
   width: 6px;
}
.mirrortab_active_back
{
   background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
   background: url(images/mirrortab_active_last.gif) no-repeat;
   width: 8px;
}




This part defines the font color, size, family, alignment, and text transformation for the mirror and mirror_active tabs.


/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
   color: white;
   text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
   color: #e0e0ff;
   text-decoration: none;
}




Definitions for the AJAX notifier
Defines things like the background, font color, size, etc.  


/* The AJAX notifier */
#ajax_in_progress
{
   background: #32CD32;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 18pt;
   padding: 3px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
}
Report Spam   Logged

Share on Facebook Share on Twitter



Pages: [1]
  Print  
 
Jump to:  

Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum
Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy