Advertise Here

Author Topic: [Guide] How to put a background image on your forum  (Read 60160 times)

0 Members and 1 Guest are viewing this topic.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
[Guide] How to put a background image on your forum
« 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: [Select]

     /* 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: [Select]

     /* 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: [Select]

     /* 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: [Select]

     /* 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 »

Offline Tash

  • SMF For Free Full Member
  • *
  • Posts: 157
    • View Profile

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: [Guide] How to put a background image on your forum
« 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. ::)

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to put a background image on your forum
« Reply #2 on: November 10, 2007, 10:54:44 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. ::)

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 »

Offline xxzeza

  • SMF For Free Newbie
  • *
  • Posts: 6
    • View Profile
    • mopaerscape private server forums

  • Total Badges: 11
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 First Post
Re: [Guide] How to put a background image on your forum
« Reply #3 on: November 18, 2007, 05:15:46 pm »
Very nice whats the color for cyan?  :o
Skilled JAVA coder and hoster of server 24.147.199.37. Website http://privateservers.smfforfree4.com/index.php

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
« Last Edit: November 18, 2007, 05:26:08 pm by simply sibyl »

Offline Defil3d v2

  • SMF For Free Newbie
  • *
  • Posts: 16
    • View Profile

  • Total Badges: 10
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to put a background image on your forum
« 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

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to put a background image on your forum
« Reply #6 on: March 31, 2008, 07:57:36 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?

Offline Defil3d v2

  • SMF For Free Newbie
  • *
  • Posts: 16
    • View Profile

  • Total Badges: 10
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to put a background image on your forum
« 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

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to put a background image on your forum
« Reply #8 on: April 01, 2008, 05:38:27 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 :)   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


   

Offline Defil3d v2

  • SMF For Free Newbie
  • *
  • Posts: 16
    • View Profile

  • Total Badges: 10
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to put a background image on your forum
« Reply #9 on: April 01, 2008, 07:43:38 pm »
oo tyvm thanx :P

Offline girlylicious

  • SMF For Free Member
  • *
  • Posts: 23
    • View Profile

  • Total Badges: 10
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to put a background image on your forum
« Reply #10 on: May 13, 2008, 02:27:04 am »
This is really helpful thanks!

Offline DTS

  • SMF For Free Newbie
  • *
  • Posts: 7
    • View Profile

  • Total Badges: 8
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 First Post
Re: [Guide] How to put a background image on your forum
« 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 ? :(

Code: [Select]
/* 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;}

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to put a background image on your forum
« 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; }

Offline DTS

  • SMF For Free Newbie
  • *
  • Posts: 7
    • View Profile

  • Total Badges: 8
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 First Post
Re: [Guide] How to put a background image on your forum
« Reply #13 on: June 13, 2008, 10:36:15 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 ?

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to put a background image on your forum
« Reply #14 on: June 13, 2008, 10:39:27 pm »
good luck with the css  ;)

here ya go!
How to use the smileys you see here at support
   

 

Related Topics

  Subject / Started by Replies Last post
forum background image

Started by guest4485 Code Requests

2 Replies
1883 Views
Last post June 04, 2008, 09:43:46 pm
by guest4485
1 Replies
1184 Views
Last post August 28, 2008, 04:05:00 pm
by simply sibyl
1 Replies
1003 Views
Last post January 30, 2009, 02:11:07 pm
by simply sibyl
26 Replies
40928 Views
Last post February 03, 2010, 08:56:00 pm
by Gablilg
0 Replies
15981 Views
Last post February 07, 2010, 02:08:38 am
by Ezpk