Color Coded Stylesheet Help
May 30, 2020, 10:35:14 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  

Pages: [1] 2
 1 
 on: December 02, 2008, 01:01:07 am 
Started by simply sibyl - Last post by simply sibyl
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;
}

 2 
 on: November 16, 2008, 02:28:26 am 
Started by simply sibyl - Last post by simply sibyl
*leaving a post so this forum does not get deleted.

 3 
 on: December 11, 2007, 02:27:08 pm 
Started by simply sibyl - Last post by simply sibyl
To begin with w3schools has all the information you need on this page for putting backgrounds in css:
http://www.w3schools.com/css/css_background.asp



To add/change your background image for your forum.

1.  Admin >  Manage Styles

Are you using the Default Style?  (the style you see here at Support)    If not skip to step 3

2.  Click Create Style
    Type in a name for your style,  scroll to the bottom and save.

3.  Click Modify Style
    Choose your stylesheet in the dropdown box

4.  Scroll to the bottom to where the css is
    Look for this section in the css

Code:

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




The two most common ways to use a background:

1.  To add a background that repeats horizontally and vertically:
     Change #E5E5E8 to a color that matchs your background image.
     The image is set to "repeat" so that it will repeat (tile) on the entire page.
     Put your background image url in as shown below:

Code:

     /* The main body of the entire forum. */
body
{
            background-color: #E5E5E8;
            background-image: url(PUT YOUR BACKGROUND IMAGE URL HERE);
            background-repeat: repeat;
            margin: 0px;
            padding: 12px 30px 4px 30px;
}



2.  To add a background that is "fixed"
     (A fixed background image will not move as the page is scrolled, your forum will "slide" over the top of the
      background)
     Change #E5E5E8 to a color that matchs your background image.
     The image is set to "repeat" so that it will repeat (tile) on the entire page.
     (If using a large image (not recommended) change it to no-repeat)
     The image is set to "fixed"

     Put your background image url in as shown below:

Code:

     /* The main body of the entire forum. */
body
{
             background-color: #E5E5E8;
             background-image: url(PUT YOUR BACKGROUND IMAGE URL HERE);
             background-repeat: repeat;
             background-attachment: fixed;
             margin: 0px;
             padding: 12px 30px 4px 30px;
}


 



Want to do something different?
Lets do some background positioning.

Have an image you want to set in a specific position on the background?

Let's make the background grey, then center a white oval on it.

Here is how that would look:   http://members.cox.net/mysmileyplace/backgrounds/centeredandfixed.html
The white oval image is the background image.
It is centered on a grey background color. 
Your forum would slide over the top of this.   

To do this:
We change #E5E5E8 to the color we want to use (in this case a grey shade)
Put your background image url in as shown below.
We do not want to repeat the oval image so we set it to "no-repeat"
We are going to center the oval,  so the position is set to "center"

Code:

     /* The main body of the entire forum. */
body
{
             background-color: #E5E5E8;
             background-image: url(PUT YOUR BACKGROUND IMAGE URL HERE);
             background-attachment: fixed;
             background-repeat: no-repeat;
             background-position:  center;
             margin: 0px;
             padding: 12px 30px 4px 30px;
}


 
An image can be set to  any position on the page.   

Go here for information on background image positioning: http://www.w3schools.com/css/pr_background-position.asp

 4 
 on: December 11, 2007, 02:21:24 pm 
Started by simply sibyl - Last post by simply sibyl
I came across the following Tutorial for the Default CSS  over at simplemachines.org.
It was written by patrick as a Theme Writing Tutorial however the section in the link
below is totally for the default core theme's css.

It describes each section in the css (with pictures) and should help you alot.

patrick's tutorial

 5 
 on: December 11, 2007, 02:08:33 pm 
Started by simply sibyl - Last post by simply sibyl
The code for the main and mirrortab section is after the instructions.

Instructions:

To change the background color of the main and mirror tabs:

Look for the following in the codes for the main and mirror tabs :
        background:  #5F81A0;   
Replace the color code with your own.


To change the border color of the main and mirror tabs:

Look for the following in the code for each of the main and mirror tabs and replace the color code with your own.
(note:  not all tabs will contain all 3 of these)
 
       border-left:  1px solid #696969;
       border-right:  1px solid #696969;
       border-bottom:  1px solid #696969;


To change the background color of the main and mirror active tabs

Look for the following in the codes for the main and mirror active tabs : 
       background: #98B2CB;   
Replace the color code with your own.


To change the border color of the main and mirror active tabs:

Look for the following in the code for each of the main and mirror active tabs and replace the color code with your own.
(note:  not all tabs will contain all 3 of these)
 
      border-left:  1px solid #696969;
      border-right:  1px solid #696969;
      border-top:  1px solid #696969;

Save it at this point to be sure you have the background and borders as you want them.
Once that is done go back in and go thru to change the color codes for the fonts.

* Keep in mind that although this does work the tabs will have a flat appearance to them because they are not graphic images and will look like this:






Replace the ENTIRE main and mirror tabs section with the following code:
(WARNING:   This is not the entire css.  This is ONLY the css for the tabs)

Code:

/* 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;
}

.maintab_first
{
background: #5F81A0;
             border-left:  1px solid #696969;
             border-bottom:  1px solid #696969;
width: 10px;
}
.maintab_back
{
background: #5F81A0;
             border-bottom:  1px solid #696969;
}
.maintab_last
{
background: #5F81A0;
             border-right: 1px solid #696969;
             border-bottom: 1px solid #696969;
width: 8px;
}
.maintab_active_first
{
background: #98B2CB;
             border-left:  1px solid #696969;
             border-bottom:  1px solid #696969;
width: 6px;
}
.maintab_active_back
{
background: #98B2CB;
              border-bottom:  1px solid #696969;
             
}
.maintab_active_last
{
background: #98B2CB;
             border-right:  1px solid #696969;
             border-bottom: 1px solid #696969;
width: 8px;
}

/* 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 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;
}

.mirrortab_first
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 10px;
}
.mirrortab_back
{
background: #5F81A0;
             border-top:  1px solid #696969;
}
.mirrortab_last
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-right:  1px solid #696969;
width: 6px;
}
.mirrortab_active_first
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 6px;
}
.mirrortab_active_back
{
background: #98B2CB;
             border-top:  1px solid #696969;
}
.mirrortab_active_last
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-right: 1px solid #696969;
width: 8px;
}

/* 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;
}


 6 
 on: October 29, 2007, 12:13:46 pm 
Started by simply sibyl - Last post by simply sibyl
Add this to the top of the css.    

The first part of it is for the normal text
The second part of it is for links

Code:

/* News Fader Font and Link Colors */

#smfFadeScroller
{           color: #000000;
             text-decoration:  none;
}

#smfFadeScroller a:visited, #smfFadeScroller a:link
{           color: #633D9B;
             text-decoration:  underline;
}



 

 7 
 on: May 13, 2007, 10:52:07 am 
Started by simply sibyl - Last post by simply sibyl
Change the a:link color to #FFFFFF in this section

Code:

/* Normal, standard links. */
a:link
{
color: #FFFFFF;
text-decoration: underline;
}
a:visited
{
color: #333333;
text-decoration: none;
}
a:hover
{
color: #525252;
text-decoration: underline;
}


Change the Navigation link color to:   #FFFFFF in this section
NOTE:   I set font weight to bold so that it shows up better on a dark background.
This can be done in other areas as well.

Code:
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #FFFFFF;
             font-weight: bold;
text-decoration: none;
             width: 50%;

}

 

Look for this:      

/* The main body of the entire forum. */
body

Add  "color: #FFFFFF;


Look for this:

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


Change it to:

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


Look for the section for windowbg, windowbg2, windowbg3 (heading for it is:  /* Alternating backgrounds for posts, and several other sections of the forum. */)

replace it with this:
NOTE:   be sure you set your background colors/fonts as you want them.
           This section now allows you to setup windowbg, windowbg2, windowbg3 separately so that you can
           change the default colors in other sections without it effecting these sections.

Code:
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #000000;
background-color: #D4D4D4;
}
.windowbg2
{
color: #000000;
background-color: #DBDBDB;
}
.windowbg3
{
color: #000000;
background-color: #BDBDBD;
}

/* windowbg, windowbg2, windowbg3 link colors */
.windowbg a:link, .windowbg2 a:link, .windowbg3 a:link
{
color: #000000;
text-decoration: none;
}
.windowbg a:visited, .windowbg2 a:visited, .windowbg3 a:visited
{
color: #000000;
text-decoration: none;
}
.windowbg a:hover, .windowbg2 a:hover, .windowbg3 a:hover
{
             color: #000000;
text-decoration: underline;
}


 8 
 on: March 31, 2007, 01:21:14 pm 
Started by simply sibyl - Last post by simply sibyl
Separate Buttons can be downloaded below.  

Right Mouse click on each button to download.
Upload to your Photobucket account.
Get the links.   
Go to Admin/Manage Styles/Customize Images


                          

                          

                          

                          

                          

                          

                          

                          

                          


This is the .png file of all of the images.  You can open it in Paint Shop Pro, Photoshop, etc.
From there take out the ones you want and save them as .gif files.

since this is a .png file it will not appear transparent to those using Internet Explorer 6.0
This is why I suggest they be saves as .gifs as the corners do need to be transparent.
 
Feel free to download and use as you like. 
screenshot:    (click image)




 9 
 on: March 22, 2007, 01:27:00 pm 
Started by simply sibyl - Last post by simply sibyl
First off an excellent resource for background images here:   
Free Background Images
Holiday backgrounds can be found here:
Holiday Background Images


Okay so you install a stylesheet and you:

a.  Do not care for the background image in the style
b.  Do not want a background image
c.  Want to put your own background image in
d.  Want to put a Holiday background image in
Easy!

Go to Manage Styles > Modify Style
Using the dropdown box choose the style you want to change the image in.
Click pick style button.
After the page reloads go all the way to the bottom of the page to where you can edit the css.

Look for the following section and put YOUR background image url in place of the one that is there.
Change background-color to a color of your choice.   This would be the color you want the background
to be should someone using your forum have graphics turned off in their browser.

If you do not want a background image at all:

Remove the background-image part of the code and change the background-color to reflect your color choice.

When done click MODIFY STYLE at the bottom of the page.    Refresh your browser to see the change.


Code:

/* The main body of the entire forum. */
body
{
background-color: #E6E6E6;
margin: 0px;
padding: 10px 30px 4px 30px;
background-image: url(http://i148.photobucket.com/albums/s20/smfstyles/luna5blue/computerbackground4.jpg);
}


Navigation Links

Keep in mind that if you remove the background you may not be able to see the navigation links that are just underneath the Home/Search/Profile/Arcade etc buttons.

Example:    There is a light colored background in the style.
                You remove the background and replace it with black or a dark background.
               
You can no longer see those nav links because they were black (or another dark color) so they would show up on the light background.

You can change those by looking again in the css  (see steps above to get there)

Look for:

Code:

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


Change color:  under .nav, .nav:link, .nav:visited to the color you want the links to be
Change color:  under a.nav:hover to the color you want them to be when you hold your mouse over them

 10 
 on: March 13, 2007, 02:53:59 pm 
Started by simply sibyl - Last post by simply sibyl
Code:
              testing  code  box   


Change code box color here:


Code:

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #C1BEB1;
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;
}




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