SMF For Free Support Forum
Signup For Free Forum
October 08, 2008, 12:41:43 am *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News: Welcome to SMF For Free. The best free SMF Host
 
   Home   Help Search Arcade Gallery Login Register  

SMF For Free Support Forum > SMF For Free Support > Guides and Tutorials > [Guide] How to put a background image on your forum
Pages: [1] 2
« previous next »
  Print  
Author Topic: [Guide] How to put a background image on your forum  (Read 9653 times)
0 Members and 1 Guest are viewing this topic.
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« on: September 07, 2007, 12:34:04 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.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

Tip:  If you see a stylesheet made by a member here at Support and think "How did they do that?"   Check the Stylesheet Index.   Find the stylesheet... look at the body section to see how it was done.
« Last Edit: November 10, 2007, 11:26:20 am by simply sibyl » Logged
Support FAQ | Guides | Stylesheets | Codes
Tash
SMF For Free Full Member
*
Offline Offline

Posts: 156



View Profile
« Reply #1 on: November 10, 2007, 10:48:55 am »
Forum Url: http://coffeechat.smfforfree3.com
Hi, I'm a little confused.

What would the code be for the Angel image to take up the whole page without it tiling?

I entered a code but it doesn't look right. Roll Eyes
Logged
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« Reply #2 on: November 10, 2007, 10:54:44 am »
Quote from: Tash on November 10, 2007, 10:48:55 am
Forum Url: http://coffeechat.smfforfree3.com
Hi, I'm a little confused.

What would the code be for the Angel image to take up the whole page without it tiling?

I entered a code but it doesn't look right. Roll Eyes

That is going to depend on the size of the image, how you want it to display, where you want it  located.
If the image is large and you want it centered you'ld do:   background-position:   center center;
To make it not tile (repeat)  you do  background-repeat:  no-repeat;
If its the angel on the forum you listed in this message and you are wanting it full screen?   You will have to enlargen that image to make it that way then use position center center as I said to center it on the screen.

You'll have to play with the settings until you get it placed exactly where you want it.

check w3schools for information on positioning and backgrounds

http://www.w3schools.com/css/css_background.asp  gives you all the information you would need for positioning, etc
« Last Edit: November 10, 2007, 11:20:51 am by simply sibyl » Logged
Support FAQ | Guides | Stylesheets | Codes
xxzeza
SMF For Free Newbie
*
Offline Offline

Posts: 6



View Profile WWW
« Reply #3 on: November 18, 2007, 05:15:46 pm »
Very nice whats the color for cyan?  Shocked
Logged
Skilled JAVA coder and hoster of server 24.147.199.37. Website http://privateservers.smfforfree4.com/index.php
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« Reply #4 on: November 18, 2007, 05:23:12 pm »
Quote from: xxzeza on November 18, 2007, 05:15:46 pm
Very nice whats the color for cyan?  Shocked

lol use a color guide from online or your graphics program
Too many "shades" to give you one color code for cyan   Cheesy
http://www.computerhope.com/htmcolor.htm#03
http://html-color-codes.com/
http://www.december.com/html/spec/color.html
http://meyerweb.com/eric/tools/color-blend/
http://www.webmonkey.com/webmonkey/reference/color_codes/
« Last Edit: November 18, 2007, 05:26:08 pm by simply sibyl » Logged
Support FAQ | Guides | Stylesheets | Codes
Defil3d v2
SMF For Free Newbie
*
Offline Offline

Posts: 16


View Profile
« Reply #5 on: March 31, 2008, 07:55:16 pm »
how do u make the skin thing like the blue thing cuz i put flames behind the forum and the skin ( default ) is staying

if u can help me with this it will be nice of u
Logged
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« Reply #6 on: March 31, 2008, 07:57:36 pm »
Quote from: Defil3d v2 on March 31, 2008, 07:55:16 pm
how do u make the skin thing like the blue thing cuz i put flames behind the forum and the skin ( default ) is staying

if u can help me with this it will be nice of u

Im abit confused..     the blue thing?
Logged
Support FAQ | Guides | Stylesheets | Codes
Defil3d v2
SMF For Free Newbie
*
Offline Offline

Posts: 16


View Profile
« Reply #7 on: April 01, 2008, 05:32:44 pm »
uhm.... were it says home admin account etc... like the skin its default here

just check out my forums flamesofdeath.smfforfree3.com

it looks wierd with flames and just the announcement  things default

hope u can try to help me
Logged
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« Reply #8 on: April 01, 2008, 05:38:27 pm »
Quote from: Defil3d v2 on April 01, 2008, 05:32:44 pm
uhm.... were it says home admin account etc... like the skin its default here

just check out my forums flamesofdeath.smfforfree3.com

it looks wierd with flames and just the announcement  things default

hope u can try to help me

thanks Smiley   now I know what you meant. 
Yes, that is because you have only added a background image.

You can edit the forums css to change the look of the rest of it.  (colors/fonts/etc)
Stylesheet Making Tips/Helpful Links

Or you could look thru the Stylesheet Index and see if you can find one that you like , install it, and then put your flame background image in it so you can still use that.

Stylesheet Index


   
Logged
Support FAQ | Guides | Stylesheets | Codes
Defil3d v2
SMF For Free Newbie
*
Offline Offline

Posts: 16


View Profile
« Reply #9 on: April 01, 2008, 07:43:38 pm »
oo tyvm thanx Tongue
Logged
girlylicious
SMF For Free Member
*
Offline Offline

Posts: 27


View Profile
« Reply #10 on: May 13, 2008, 02:27:04 am »
This is really helpful thanks!
Logged
DTS
SMF For Free Newbie
*
Offline Offline

Posts: 7


View Profile
« Reply #11 on: June 13, 2008, 10:12:54 pm »
Hi I want to add  background image to my forum but I cant seen to find the code for it on my .css file?

Here is the code in the css file. Where should I edit ? Sad

Code:
/* Normal, standard links. */
a:link, a:visited { color: #000000; background-color: transparent; text-decoration: none; }

a:hover { color: #999; background-color: transparent; text-decoration: none; }

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited { color: #ffffff; background-color: transparent; text-decoration: none; }

a.nav:hover{ font-weight: bold;color: #4998e0; background-color: transparent; text-decoration: underline;  }


/* These are the main Divs */
#header { padding:10px 30px 10px 30px; }

#footerarea { background:transparent; }

.hedr { background: url('images/header_bg.gif'); background-repeat: repeat-x; color:white; }

.menu { background: url('images/tab.gif') repeat-x; font-weight: bold; border-right: 1px solid #DADADA; border-left: 1px solid #DADADA; }

.menu a:link, .menu a:visited {   color: #005177; background-color: transparent; text-decoration: none; }

.menu a:hover { color: #4998e0; background-color: transparent; text-decoration: none; }

.chromestyle { width: 100%; font-weight: bold; }

.chromestyle { border: 1px solid #BBB; width: 100%; background: url(images/tab.gif) center center repeat-x; padding: 4px 0; margin: 0; text-align: center; /*set value to "left", "center", or "right"*/ }

.chromestyle { display: inline; }

.chromestyle a { color: #005177; padding: 4px 7px; margin: 0; text-decoration: none; border-right: 1px solid #DADADA; border-left: 1px solid #DADADA; }

/****
   These are for the dropdown menus.
****/

a.subPro-link:link, a.subPro-link:visited, a.subPro-link:active { color: #005177; text-decoration: none; border: 0; display: block; background-color: #d8d8d7; text-align: left; padding-left: 5px; line-height: 20px; vertical-align: middle; }

a.subPro-link:hover { color: #003366; text-decoration: none; border: 0; background-color: #d1edff; }

a.subMenu-link:link, a.subMenu-link:visited, a.subMenu-link:active { color: #005177; text-decoration: none; border: 0; display: block; background-color: #d8d8d7; text-align: left; padding-left: 5px; line-height: 20px; vertical-align: middle; }

a.subMenu-link:hover { color: #003366; text-decoration: none; border: 0; background-color: #d1edff; }

/* Tables should show empty cells too. */
table { empty-cells: show; }

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

* html body { overflow:auto; max-height:100%; margin:0; padding:0; width:100%; height:100%; background-repeat: repeat-x; }
body { overflow: auto; font-family:verdana, arial, sans-serif; font-size:76%; background: #667788; }

/* Input boxes - just a bit smaller than normal so they align well. */
textarea { font-size: 9pt; color: #000; font-family: verdana, arial, helvetica, sans-serif; background-color: #D8D8D7; }

/* Checkboxes shouldn't have a background color. */
input.check { background-color: transparent; }

/* Selects are a bit smaller, because it makes them look even better 8). */
input, select, button {   font-size: 8pt;   font-weight: normal;   color: #000;   font-family: verdana, arial, helvetica, sans-serif; }

/* Standard horizontal rule.. */
hr {   color: #003366;   background-color: transparent; }
/* A more colorful hr.. */
.hrcolor {   height: 1px;   border: 0;   color: #003366;   background: #003366; }

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

/* 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%;
   /* If IE wrap its contents, Else show scrollbars. */
   white-space: wrap;   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em; }

/* The "Quote:" and "Code:" header parts... */
.quoteheader { color: #000000; text-decoration: none; font-weight: bold; font-size: 11px; line-height: 1.2em; background-image: url("images/img_quote.gif"); background-repeat: no-repeat; background-position: top right; background-color: transparent; height: 21px; padding: 1px; vertical-align: middle; }

.codeheader { color: #000000; text-decoration: none; font-weight: bold; font-size: 11px;line-height: 1.2em; background-image: url("images/img_code.gif"); background-repeat: no-repeat; background-position: top right; background-color: transparent; height: 21px; padding: 1px; border-top: 1px solid #565962; vertical-align: middle; }

/* the today container in calendar */
.calendar_today {  color:#fff;   background-color: #003366;   border: 1px solid #fff;}

/* Generally, those [?] icons. */
.help {   cursor: help;   background-color: transparent; }

/* /me uses this a lot. */
.meaction {   color: red;   background-color: transparent; }

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

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

/* Alternating backgrounds... */
.windowbg {   color: #000000;   background-color: #ccddee; border: #ffffff 1px dotted; }

.windowbg2 {   color: #000000;   background-color: #f8f8f8; border: #ffffff 1px dotted; }
/* This is for the MouseOver affect */
.windowbg4 { color:#000; background: #e9f0f6; border: #ffffff 1px dotted; }

/* This is for the Show Mod's link */
.mod {   font-size: x-small;   color:#000; background: #dcdcdc;#d2d9c2; border: #ffffff; 1px dotted; }
/* This is for the Child Boards link*/
.child {   font-size: x-small;   color:#000; background: #c1c2c1;#d8c8c9; border: #ffffff; 1px dotted; }

/* Titles - such as table headers. */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {   font-weight: bold;   font-style: normal;   color: #ffffff;   background: url(images/blue_bak.gif) #50729f repeat-x; }

.titlebg, .titlebg a:link, .titlebg a:visited {   font-weight: bold;   color: #fff;   font-style: normal; }

.titlebg a:hover {   color: #ccddee;   text-decoration: underline; }

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

.titlebg2 a:hover {   text-decoration: underline; }
/* The category headers, page indexes, and such things. */
.catbg, .catbg3 {   font-weight: bold;   background-image: url(images/tab1.gif);   color: #000000; }

.catbg2 , tr.catbg2 td {   background: url(images/tab2.gif);   color: #000000;   font-weight: bold; }
/* The borders around things. */
.bordercolor {   background-color: #003366; }

.tborder {   border: 1px solid #003366; }

/* Default font sizes. */
.smalltext {   font-size: x-small;   color:#000; }
.middletext {   font-size: 90%;   color:#000; }
.normaltext { font-size: small; }
.largetext {   font-size: large; }
/*Added Fonts*/
.ratetext {   font-size: x-small;   color:#fff; }
.pagetext { color:#000;}
.linktext {   font-size: 90%;   color:#FFF; }

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

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

/* 3D Raised For the Rounded Corners*/
.raised {background: transparent; width:100%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#1271aa; border-left:1px solid #1271aa; border-right:1px solid #1271aa;}
.raised .b3 {background:#1271aa; border-left:1px solid #1271aa; border-right:1px solid #1271aa;}
.raised .b4 {background:#1271aa; border-left:1px solid #1271aa; border-right:1px solid #1271aa;}
.raised .b4b {background:#12699e; border-left:1px solid #12699e; border-right:1px solid #12699e;}
.raised .b3b {background:#12699e; border-left:1px solid #12699e; border-right:1px solid #12699e;}
.raised .b2b {background:#12699e; border-left:1px solid #12699e; border-right:1px solid #12699e;}

.raised .b1 {margin:0 5px; background:#1271aa;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#12699e;}
.raised .boxcontent {display:block; background:transparent; border-left:1px solid #12699e; border-right:1px solid #12699e;}

/* 3D Raised2 For the Rounded Corners*/
.rrc {background: transparent; width:100%; margin:0 auto;}
.rrc h1, .rrc p {margin:0 10px;}
.rrc h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.rrc p {padding-bottom:0.5em;}

.rrc .top, .rrc .bottom {display:block; background:transparent; font-size:1px;}
.rrc .b1, .rrc .b2, .rrc .b3, .rrc .b4, .rrc .b1b, .rrc .b2b, .rrc .b3b, .rrc .b4b {display:block; overflow:hidden;}
.rrc .b1, .rrc .b2, .rrc .b3, .rrc .b1b, .rrc .b2b, .rrc .b3b {height:1px;}
.rrc .b2 {background:url(images/header_bg.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.rrc .b3 {background:url(images/header_bg.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.rrc .b4 {background:url(images/header_bg.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.rrc .b4b {background:#4e6d9a; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.rrc .b3b {background:#4e6d9a; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.rrc .b2b {background:#4e6d9a; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}

.rrc .b1 {margin:0 5px; background:#6098c9;}
.rrc .b2, .rrc .b2b {margin:0 3px; border-width:0 2px;}
.rrc .b3, .rrc .b3b {margin:0 2px;}
.rrc .b4, .rrc .b4b {height:2px; margin:0 1px;}
.rrc .b1b {margin:0 5px; background:#6098c9;}
.rrc .boxcontent {display:block; background:transparent; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}

/* 3D Raised For the Rounded Corners*/
.board {background: transparent; width:95%; margin:0 auto;}
.board h1, .board p {margin:0 10px;}
.board h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.board p {padding-bottom:0.5em;}

.board .top, .board .bottom {display:block; background:transparent; font-size:1px;}
.board .b1, .board .b2, .board .b3, .board .b4, .board .b1b, .board .b2b, .board .b3b, .board .b4b {display:block; overflow:hidden;}
.board .b1, .board .b2, .board .b3, .board .b1b, .board .b2b, .board .b3b {height:1px;}
.board .b2 {background:url(images/blue_bak.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.board .b3 {background:url(images/blue_bak.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.board .b4 {background:url(images/blue_bak.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.board .b4b {background:#fff; border-left:1px solid #eee; border-right:1px solid #999;}
.board .b3b {background:#fff; border-left:1px solid #ddd; border-right:1px solid #999;}
.board .b2b {background:#fff; border-left:1px solid #aaa; border-right:1px solid #999;}

.board .b1 {margin:0 5px; background:url(images/blue_bak.gif);}
.board .b2, .board .b2b {margin:0 3px; border-width:0 2px;}
.board .b3, .board .b3b {margin:0 2px;}
.board .b4, .board .b4b {height:2px; margin:0 1px;}
.board .b1b {margin:0 5px; background:url(images/blue_bak.gif);}
.board .boxcontent {display:block; background:transparent; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}

/* 3D Raised For the Rounded Corners*/
.bindex {background: transparent; width:95%; margin:0 auto;}
.bindex h1, .bindex p {margin:0 10px;}
.bindex h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.bindex p {padding-bottom:0.5em;}

.bindex .top, .bindex .bottom {display:block; background:transparent; font-size:1px;}
.bindex .b1, .bindex .b2, .bindex .b3, .bindex .b4, .bindex .b1b, .bindex .b2b, .bindex .b3b, .bindex .b4b {display:block; overflow:hidden;}
.bindex .b1, .bindex .b2, .bindex .b3, .bindex .b1b, .bindex .b2b, .bindex .b3b {height:1px;}
.bindex .b2 {background:url(images/blue_bak.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.bindex .b3 {background:url(images/blue_bak.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.bindex .b4 {background:url(images/blue_bak.gif); border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.bindex .b4b {background:#4e6d9a; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.bindex .b3b {background:#4e6d9a; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}
.bindex .b2b {background:#4e6d9a; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}

.bindex .b1 {margin:0 5px; background:url(images/blue_bak.gif);}
.bindex .b2, .bindex .b2b {margin:0 3px; border-width:0 2px;}
.bindex .b3, .bindex .b3b {margin:0 2px;}
.bindex .b4, .bindex .b4b {height:2px; margin:0 1px;}
.bindex .b1b {margin:0 5px; background:#6098c9;}
.bindex .boxcontent {display:block; background:transparent; border-left:1px solid #6098c9; border-right:1px solid #6098c9;}

/* Inset 3D Curved */
.inset {background: transparent; width:70%; max-width:100%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#e9f0f6; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#e9f0f6; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#e9f0f6; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#e9f0f6; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#e9f0f6; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#e9f0f6; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#e9f0f6; border-left:1px solid #999; border-right:1px solid #fff;}
Logged
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« Reply #12 on: June 13, 2008, 10:22:01 pm »
That looks as though its the css for a theme.  You'll have to convert it to use it for your forum as there is a lot in there that will not be used at all, and may be some things missing.     The background image would go in the "body" area in the css.


body { overflow: auto; font-family:verdana, arial, sans-serif; font-size:76%; background: #667788; }
Logged
Support FAQ | Guides | Stylesheets | Codes
DTS
SMF For Free Newbie
*
Offline Offline

Posts: 7


View Profile
« Reply #13 on: June 13, 2008, 10:36:15 pm »
Quote from: simply sibyl on June 13, 2008, 10:22:01 pm
That looks as though its the css for a theme.  You'll have to convert it to use it for your forum as there is a lot in there that will not be used at all, and may be some things missing.     The background image would go in the "body" area in the css.


body { overflow: auto; font-family:verdana, arial, sans-serif; font-size:76%; background: #667788; }

Ya its part of a theme. Im just doing some editing on it.
Oh and your tip worked !
THANKS SO MUCH !!

I got a couple of questions on adding the smf support smiley set to my forum where should I post that ?
Logged
simply sibyl
Global Moderator
*
Offline Offline

Posts: 8421



View Profile WWW
« Reply #14 on: June 13, 2008, 10:39:27 pm »
good luck with the css  Wink

here ya go!
How to use the smileys you see here at support
   
Logged
Support FAQ | Guides | Stylesheets | Codes


Pages: [1] 2
  Print  
« previous next »
 
Jump to:  

Powered by SMF 1.1.6 | SMF © 2006-2008, Simple Machines LLC
ServerBeach Coupon
Page created in 0.299 seconds with 18 queries.