Show Posts
|
Pages: [1]
|
1
|
General Category / General / Default Css Guide
|
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 forumYou 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 . */ 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 imagesIf 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 cssI've divided the tab section of the css into a few parts to make this easier. Definitions for the "main" tabsExample: 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 tabsThe 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 tabsmirrortab_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 tabsmirrortab_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 notifierDefines 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; }
|
|
|
3
|
General Category / General / Background Image Tips
|
on: December 11, 2007, 02:27:08 pm
|
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.aspTo add/change your background image for your forum. 1. Admin > Manage StylesAre 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 /* 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: /* 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: /* 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.htmlThe 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" /* 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
|
General Category / General / Default Theme CSS Tutorial
|
on: December 11, 2007, 02:21:24 pm
|
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
|
General Category / General / How to Make tabs using Color Codes
|
on: December 11, 2007, 02:08:33 pm
|
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 tabsLook 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) /* 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
|
General Category / General / How to change the News Fader's Font Color
|
on: October 29, 2007, 12:13:46 pm
|
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 /* News Fader Font and Link Colors */
#smfFadeScroller { color: #000000; text-decoration: none; }
#smfFadeScroller a:visited, #smfFadeScroller a:link { color: #633D9B; text-decoration: underline; }
|
|
|
7
|
General Category / General / How to make the fonts white everywhere on a black background
|
on: May 13, 2007, 10:52:07 am
|
Change the a:link color to #FFFFFF in this section /* 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 sectionNOTE: 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. /* 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:/* 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. /* 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; }
|
|
|
9
|
General Category / General / Stylesheet Help: How do I remove/change a background image?
|
on: March 22, 2007, 01:27:00 pm
|
First off an excellent resource for background images here: Free Background ImagesHoliday backgrounds can be found here: Holiday Background ImagesOkay 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 StyleUsing 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. /* 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 LinksKeep 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: /* 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
|
Example Category (.catbg) / Example Board (.windowbg) / Re: Test Post
|
on: March 13, 2007, 02:53:59 pm
|
testing code box
Change code box color here: /* 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; }
|
|
|
11
|
Example Category (.catbg) / Example Board (.windowbg) / Re: Test Post
|
on: March 13, 2007, 02:53:27 pm
|
Just a test post
Change Quotebox color here: /* A quote, perhaps from another post. */ .quote { color: #000000; background-color: #C1BEB1; border: 1px solid #000000; margin: 1px; padding: 1px; font-size: x-small; line-height: 1.4em; }
|
|
|
13
|
General Category / General / Borders
|
on: March 11, 2007, 07:41:46 pm
|
Since it is hard to see all the borders I did a close up screenshot of the area up by where the time is. This should help you with the borders. FINDING THEM IN THE CSS.bordercolor can be found here: /* This is used for tables that have a grid/border background color (such as the topic listing.) */ .bordercolor { background-color: #FF09DA; padding: 0px; }
.tborder can be found here: The first number (border) is the .tborder color The second number (background-color) is the .tborder background Color /* This is used on tables that should just have a border around them. */ .tborder { padding: 1px; border: 1px solid #696969; background-color: #C0C15F; }
.catbg, .catbg2, .catbg3 border bottom found here: .catbg, .catbg2, .catbg3 { border-bottom: solid 1px #375576; }
.titlebg border-bottom and border-top here: /* 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: #000000; font-style: normal; background: url(http://i102.photobucket.com/albums/m105/mysmileyplace/tutorial/titlebackgroundimage.png) #C0C0FF repeat-x; border-bottom: solid 1px #9BAEBF; border-top: solid 1px #FFFFFF; padding-left: 10px; padding-right: 10px; }
|
|
|
14
|
General Category / General / This site
|
on: March 11, 2007, 06:18:55 pm
|
This sites soul purpose is to create a simple color guide to help you know where the areas are in Manage Styles.
|
|
|
|