SMF For Free Support Forum
Signup For Free Forum
July 05, 2008, 03:52:40 pm *
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 [3]
« previous next »
  Print  
Author Topic: [Guide] How to put a background image on your forum  (Read 7522 times)
0 Members and 1 Guest are viewing this topic.
Defil3d v2
SMF For Free Newbie
*
Offline Offline

Posts: 19


View Profile
« Reply #30 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
*
Online Online

Posts: 6840



View Profile WWW
« Reply #31 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
Looking for help?:
General Support FAQ | Guide/Tutorial Index | Stylesheet Index | Codes Index
Defil3d v2
SMF For Free Newbie
*
Offline Offline

Posts: 19


View Profile
« Reply #32 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
*
Online Online

Posts: 6840



View Profile WWW
« Reply #33 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
Looking for help?:
General Support FAQ | Guide/Tutorial Index | Stylesheet Index | Codes Index
Defil3d v2
SMF For Free Newbie
*
Offline Offline

Posts: 19


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

Posts: 30


View Profile
« Reply #35 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 #36 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
*
Online Online

Posts: 6840



View Profile WWW
« Reply #37 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
Looking for help?:
General Support FAQ | Guide/Tutorial Index | Stylesheet Index | Codes Index
DTS
SMF For Free Newbie
*
Offline Offline

Posts: 7


View Profile
« Reply #38 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
*
Online Online

Posts: 6840



View Profile WWW
« Reply #39 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
Looking for help?:
General Support FAQ | Guide/Tutorial Index | Stylesheet Index | Codes Index
fallenmonkscape
SMF For Free Member
*
Offline Offline

Posts: 54


View Profile
« Reply #40 on: June 16, 2008, 11:49:20 am »
Very nice Smiley saved me a lot of time that i probably would have wasted trying to figure this out. lol
Logged
Gh0st JR
SMF For Free Newbie
*
Offline Offline

Posts: 2



View Profile WWW
« Reply #41 on: July 03, 2008, 10:07:37 pm »
thanks helped alot.
« Last Edit: July 03, 2008, 10:10:14 pm by Gh0st JR » Logged


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

Powered by SMF 1.1.5 | SMF © 2006-2008, Simple Machines LLC
ServerBeach Coupon
Page created in 0.264 seconds with 17 queries.