Current date/time is November 28th 2020, 9:36 am

Search found 93 matches for ffffff

Learning the basic CSS

Learning the basic CSS



Hello and welcome to this tutorial.

The purpose of this tutorial is to learn you how to create and/or modify yourself the CSS of your forum. It's created for a phpBB2 version, but when you will have learned the basic points, you will be able to modify even another board. But let's begin immediatly ! Here is the organization of this tutorial :

1. CSS? What is it?
2. OK. But where is it?
3. How is the CSS organized?
  3.1. Modifying an attribute
4. Basic values of CSS
5. Basic values of your forum
6. OK I've understood, but now I want to change something...
7. Recapitulative pictures


1. CSS? What is it?
A CSS stylesheet is a file written at the same time than your site. In fact, it is very useful, because it enables you to write all the styles you want to put in your board in the same file.
By modifying your unique CSS stylesheet, you can modify your whole site very quickly. Wihout CSS, you would have to modify each file from your template manually to get the same result.
Programmers are very often lazy. And that's good !

2. OK, but where is it?
To access your CSS stylesheet, Forumotion made you the way simple. In fact you just need to go to your admin panel, and go to display-> colors. If needed, choose "yes" to the question "Deactivate the
basic CSS", and click on the "save" button. Then when the page has reloaded, click on "See your forum basic CSS" and paste it into the white box called "CSS". Here is your basic forum CSS.
Now, let's try to modify it !

3. How is the CSS organized?
The organization of CSS is very easy to understand. In fact, just imagine it as some boxes, with things in it. Every box represents a piece of your board, and every thing in the box represents
an attribute of this piece. For example, the box "img" represent all the images of your board. In this box, you can find an attribute "border". By modifying it, you can choose to add a border to
each image on your forum. Well of course, this example is useless, but it's for you to understand. Here is an example.
To make a link to my example, the box here is ".bodyline", and the attributes are "background-color" and "border". A box can contain loads of attributes.
Code:
.bodyline{
    background-color: #cedfff;
    border: 2px #6F0019 solid;
    }

As you can see, a box's attributes are always between { and } for your browser to know the limits of the box.
The attributes ALWAYS finish by a ";" so that the browser knos where the attribute stops.
To illustrate my example, here is what the box "bodyline" represents.
https://i.servimg.com/u/f86/13/66/78/75/sans-t37.jpg

3.1. Modifying an attribute.
Let's at first modify the background-color. As the name means it, the background-color is the background-color of the bodyline. It's not interesting here. Let's modify the border.
Here is the basic CSS code : border: 2px #6F0019 solid;
2px : The width of the border.
#6F0019 : the hexadecimal code for the colour.
solid : a solid line.

But for your design, you prefer to have a black border of 5px, and dashed. Well it's easy, try this code :
border: 5px black dashed;
(click on the submit button to validate your changes).
(you can use the real name of the color for basic colours like : blue, red, cyan, black, white, etc.). Here is the result :
https://i.servimg.com/u/f86/13/66/78/75/sans-t38.jpg
Awful, but that's not the point. Have you seen the change? Smile

4. Basic values of CSS
You will see in your stylesheet, there are some attributes that occur nearly for every box. That's because every box has it's own color, size, border, etc. Here are the most useful attributes you
can use :

4.1. background-color: #FFA443;

This represents the background color of the box.

4.2. background-image: url("https://i.servimg.com/u/f86/13/66/78/75/sans-t35.jpg");
This represents the background image of the box.

You can add this to the code :
background-repeat: repeat-x;
This means the background will repeat horizontally. You can also use : repeat-y, no-repeat. If you don't put this attribute, the background will repeat horizontally and vertically.

4.3. border: solid #FF9F3B 0px;

This modifies the border of the box. The explanation has already been discussed before.

* you can modify only one side of the border bu using for example :
border-top: solid #FF9F3B 0px;
border-left: solid #FF9F3B 0px;
This way, the bottom and right border won't be modified !

4.4. width:80%;
This is the width of the box.

* "height" is the height of the box.

4.5. color: #ffffff;
This is the font color used in the box.

4.6. padding: 2px;

This represents the space between the border and the content of the box.

* "margin" represents the space between the box and the rest of the page.

4.7. font attributes
font-weight: bold; -> the font will be bold in the box.
font-size : 12px; -> the font size will be 12px in the box.
text-decoration: underline; -> the text will be underlined in the box.
font-family: Verdana; -> the text in the box will be in "Verdana".

These were the basic attributes. You can find on google for example more attributes to give more style to your boxes, but with only these, you can give a good look to your design.

5. Basic values of your forum

The basic values of your CSS are in the "boxy" box. You can modify it to modify all your forum. Here is the body box of my board :

Code:
body {
   background-color: #FFA443;
   background-image: url("http://i86.servimg.com/u/f86/13/66/78/75/sans-t35.jpg");
        background-repeat: repeat-x;
   background-attachment: scroll;
   }


As you can see, my body box only enables me to modify my forum background-image, and the background color of the page. As you can see, I use this picture : https://i.servimg.com/u/f86/13/66/78/75/sans-t35.jpg for the background, that repeats only horizontally. Then I choose the background-color, that continues the page. This gives a nice effect of shade from the top of the board to the bottom.
My body box is not very complete, but here is a body box more complete :

Code:
body {
   background-color: #FFA443;
   background-image: url("http://i86.servimg.com/u/f86/13/66/78/75/sans-t35.jpg");
        background-repeat: repeat-x;
   background-attachment: scroll;
color: #042C54;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
margin: 15px;
margin-top: 0px;
padding-top: 0px;
   }


As you can see, you can modify what you want, and when you want it !


6. OK I've understood, but now I want to change something...


This is the biggest chapter of this tutorial. Indeed, to modify your board, you need to know what corresponds to what. You could learn by yourself by modifying something and see what is the result, but it takes long, and is not really easy. In this chapter, I will provide you pictures of the boxes, and their names, so that modifying them will be much more easy ! To have an example on how to modify an attribute, check point 3.1 !

Let's start slowly. I will at first show you which part of the CSS is really useful to modify. If you want more, just check google to get more infos !


Code:
body {
   background-color: #FFA443;
   background-image: url("http://i86.servimg.com/u/f86/13/66/78/75/sans-t35.jpg");
        background-repeat: repeat-x;
   background-attachment: scroll;
   }

Already seen before, just re-read it !

Code:
a img {
    border: none;
    }
a:link,a:active,a:visited {
    color : #ffffff;
    }
a:hover{
    text-decoration: underline !important;
    color : #ffffff;
    }


The "a" box represents the links on your forum.
a:active and a:visited represent the links already clicked by the user, and a:hover represent a link while the user's mouse is on it.

Code:
.bodyline{
    background-color: #FFB878;
    border: 1px #6f0019 solid;
   }
.bodylinewidth {
   width:80%}


Already seen before, just re-read it !

Code:
.forumline{
    background-color: #cedfff;
    border: 1px #6f0019 solid;
    }
td.row1{
    background-color: #FF9F3B;
    }
td.row2{
    background-color: #FF9F3B;
    }
td.row3{
    background-color: #FF9F3B;
    }
td.rowpic {
   background-color: #9ad6ff;
   background-image: url("http://i86.servimg.com/u/f86/13/66/78/75/sans-t34.jpg");
   }


Check the picture to see what is what :
https://i.servimg.com/u/f86/13/66/78/75/sans-t39.jpg

Code:
.cattitle{
    font-weight: bold;
    font-size: 12px ;
    letter-spacing: 1px;
    color : #ffffff}
h1.cattitle {
   margin:0;
    padding: 0;
    display:inline;
   }
a.cattitle{
    text-decoration: none;
    color : #ffffff;
    }
a.cattitle:hover{
    text-decoration: underline;
    }


The categories title, and the link in it (the "a" represent a link, as seen before).



Code:
.forumlink{
    font-weight: bold;
    font-size: 12px;
    color : #ffffff;
    }
a.forumlink {
    text-decoration: none;
    color : #ffffff;
    }
a.forumlink:hover{
    text-decoration: underline;
    color : #ffffff;
    }


The link you click to open a forum and begin to discuss.

Code:
.topictitle,h1,h2{
    font-weight: bold;
    font-size: 11px;
    color : #ffffff;
    }
div.topictitle {
   display: inline;
   }
h2.topic-title {
   display: inline;
    margin: 0;
    padding: 0;
   }
a.topictitle:link{
    text-decoration: none;
    color : #ffffff;
    }
a.topictitle:visited{
    text-decoration: none;
    color : #ffffff;
    }
a.topictitle:hover{
    text-decoration: underline;
    color : #ffffff;
    }


Here is the picture that corresponds to this code : https://i.servimg.com/u/f86/13/66/78/75/sans-t40.jpg

Code:
.code{
    font-family: Courier,CourierNew,sans-serif;
    font-size: 11px;
    color: #057500;
   background-color: #8fa4b9;
    border: #FF9F3B;
    border-style: solid;
   border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px}
.quote{
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    color: #040404;
    line-height: 125%;
   background-color: #8fa4b9;
    border: #FF9F3B;
    border-style: solid;
   border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px}


This is to modify the code and quote boxes, in the post.

Code:
.copyright{
    font-size: 10px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #ffffff;
    letter-spacing: -1px;
   }
a.copyright{
    color: #ffffff;
    text-decoration: none;
   }
a.copyright:hover {
    color: #ffffff;
    text-decoration: underline;
   }


This is to modify the page copyright.

Code:
.coloradmin {
    color: #93076d}
.colormod {
    color: #057500}


The mod and admin colors.

The rest is just about the input buttons, forms etc. I don't advise you to modify them, because very often this make the forum unreadable because of contrasts problems. Just by modifying these boxes, you will give a good look to your board !
* If you need a precise CSS code modification, ask it to me by PM, and I will add it to the tutorial !

7. Recapitulative pictures

Here are some screenshots that show you which box modifies what. If you need more pictures, just ask by pm !

Index page : https://i.servimg.com/u/f86/13/66/78/75/sans-t42.jpg
Forum Page : https://i.servimg.com/u/f86/13/66/78/75/sans-t43.jpg
Post Page : https://i.servimg.com/u/f86/13/66/78/75/sans-t44.jpg


I hope this tutorial will help you to understand how your CSS works. If you need more precisions on a point, or more CSS code to help you, don't hesitate to ask it by PM, and I will add it to the tutorial.




by Splytte
on April 19th 2009, 8:19 pm
 
Search in: Frequently Asked Questions
Topic: Learning the basic CSS
Replies: 0
Views: 11768

CSS Tutorial for your forums

CSS Tutorial for your forums



Quick CSS tutorial to make your forum look smarter.

Throughout the forum CSS has been referred to, to make text larger, smaller and to
align text and tables however it can also be used to clean and hide
certain parts of the forum. Relatively easy to use, CSS only hides the
forum sections to make it look cleaner rather than deleting sections
just in case you change your mind later.

1. Log into your forum and access the “Administrator Panel
2. Select “Display
3. Select “Colors
4. You should now be able to select the “CSS Style Sheet” tab

! The sheet will be blank if you have not used this before!


5. Once you selected the relevant text from below simply add the text to this section and press “Submit”, this will be reflected on your forum immediately.

Phpbb2:

Hide "Who Is Online" Text:
Spoiler:
.cattitle{
font-weight: bold;
font-size: 12px ;
letter-spacing: 1px;
color : #006699}
a.cattitle{
text-decoration: none;
color : #006699;
display:none
}


Hide "Time & Date, legend bar and text":
Spoiler:
.gensmall {
font-size : 10px;
display: none
}
.gen,.genmed,.gensmall {
color : #000000;
}
a.gen,a.genmed,a.gensmall {
color: #006699;
text-decoration: none;
display: none
}
a.gen:hover,a.genmed:hover,a.gensmall:hover{
color: #dd6900;
text-decoration: underline;
}




Phpbb3:

Hide "Legend bar"
Spoiler:
ul#picture_legend, ul#privmsgs-menu {
text-align: center;
display: none;
}
ul#picture_legend li, ul#privmsgs-menu li {
display: inline;
margin: 2px 10px;
display: none;
}
ul#picture_legend li img, ul#privmsgs-menu li img {
vertical-align: middle;
display: none;
}


Hide "Stats"
Spoiler:
#page-body p.page-bottom {
margin: 0;
display: none;
}


Hide "Last post"
Spoiler:
dd.lastpost span, ul.topiclist dd.searchby span, ul.topiclist dd.info
span, ul.topiclist dd.time span, dd.redirect span, dd.moderation span {
display:none;
padding-left:5px;
}


Hide "Navbar"
Spoiler:
ul.linklist li {
list-style-type: none;
width: auto;
font-size: 1.1em;
line-height: 2.2em;
display: none;
}


Punbb:


Hide "Legend Bar"
Spoiler:
ul#pun-legend li {
display: none;
margin-right: 20px;
}


Hide "Online list"
Spoiler:
#onlinelist p {
line-height: 150%;
display: none;
}


Hide "Time & Date"
Spoiler:
#pun-visit {
border-color: #dddddd;
border-style: solid;
border-width: 1px;
padding: 0.6em 1em;
background-color: #f4f4f4;
margin: 0 0 1em 0;
display: none;
}


Change "navigation background colour"

Colour background:
Spoiler:
#pun-head #pun-navlinks {
padding: 0.5em 1.1em 0.6em 1.1em;
background-color: #ffffff;
border-color: #dddddd;
}


Or

Image background:
Spoiler:
#pun-head #pun-navlinks {
padding: 0.5em 1.1em 0.6em 1.1em;
background-image: url('http://yourimagehere.jpg');
background-repeat: repeat-x;
border-color: #dddddd;
}


Craig


by Nessa
on July 23rd 2008, 12:12 pm
 
Search in: Tips & Tricks
Topic: CSS Tutorial for your forums
Replies: 1
Views: 12631

How to add a theme to your board

How to add a theme to your board



How to add a theme to your board.

PHPBB VERSION 2

There are a few ways to add a theme to your site. Firstly forumotion has a list of preset themes that you can find in "Admin Panel >> Display >> Choose a theme". You can select either the colours of the theme, or the images of the theme or both. It does this all automatically for you.

Secondly you will see when choosing a theme that there is a tab for www.hitskin.com a site in conjunction with forumotion that has a database of phpbb 2 and phpbb 3 themes. You can choose any of these and it will be added automatically to the site. Please read this tutorial on how to install hitskin themes properly.

Thirdly, you can manually add a theme. This is not easy for those with little HTML and CSS knowledge, so i firmly suggest creating a test board to practice on. I normally choose the standard subsilver theme from the choose a theme and install it on my test forum ready to begin.

Step 1.

Find a phpbb 2 theme you like from the many sites out there that offer themes. Google free phpbb themes. Download it to your computer.

Step 2.

Extract all files within the theme and search for the one that says its file type is a Cascading Style Sheet, The examples below are for the girltalk theme i use on my site. Open the Cascading Style Sheet and copy all the code within it.

Girltalk CSS
Spoiler:
/*
girltalk2 by napy8gen from forumtemplates.com
*/

body {
background-image: url(images/girTalk2_bg.gif);
background-repeat: repeat;
background-color: #E6F6F9;
margin: 0px;
padding: 0px;
height: 100%;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color:  #EF6B6B;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
.L {
background-image: url(images/girTalk2_bdrL.gif);
background-repeat: repeat-y;
width: 16px;
}
.R {
background-image: url(images/girTalk2_bdrR.gif);
background-repeat: repeat-y;
width: 16px;
}
.headerwrap {
background-image: url(images/girTalk2_headerbg.gif);
background-repeat: repeat-x;
height: 128px;
background-color: #E2F1F2;
}
.navwrap {
background-image: url(images/girTalk2_navbg.gif);
background-repeat: repeat-x;
height: 34px;
background-color: #F8E3FB;
}
.cwrap {
background-image: url(images/girTalk2_cbg.gif);
background-repeat: repeat-x;
height: 200px;
background-color: #FFFFFF;
}
.wrapper {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B6E0E3;
}
#navstyle{
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FBD9D9;
margin-top:0px;
font-weight: bold;
}
#navstyle a{font-family:Tahoma,Arial, Helvetica, sans-serif;
       font-size: 13px;
color: #EF6B6B;
       text-decoration: none;
   font-weight: bold;}
#navstyle a:hover{font-family:Tahoma,Arial, Helvetica, sans-serif;
   font-size: 13px;
color: #B54BD8;
   text-decoration: underline;
font-weight: bold;}


/* General font families for common tags */
font,th,td,p { font-family: Tahoma, Arial, Helvetica}
a:link,a:active,a:visited { color : #EF6B6B; }
a:hover { text-decoration: underline; color : #B54BD8; }
hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}


/* This is the border line & background colour round the entire page */
.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #D8F2F4 solid; }


/* Main table cell colours and backgrounds */
td.row1 { background-color: #E2F1F2; }
td.row2 { background-color: #FCF2FE; }
td.row3 { background-color: #FEFBF2; }


/*
 This is for the table cell above the Topics, Post & Last posts on the index.php page
 By default this is the fading out gradiated silver background.
 However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #F4D2F9;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
color: #E2F4F5; font-size: 11px; font-weight : bold;
background-color: #E6B1EE; height: 25px;
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-color:#F4D2F9; border: #FFFFFF; border-style: solid; height: 28px;
}


/*
 Setting additional nice inner borders for the main table cells.
 The names indicate which sides the border will be on.
 Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
background-color: #F0D3F5; border: #FFFFFF; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }


/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2 {
font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #0066CC;
}


/* General text */
.gen { font-size : 14px; }
.genmed { font-size : 12px; }
.gensmall { font-size : 11px; }
.gen,.genmed,.gensmall { color : #336699; }
a.gen,a.genmed,a.gensmall { color: #EF6B6B; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #B54BD8; text-decoration: underline; }


/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #0066CC}
a.mainmenu { text-decoration: none; color : #EF6B6B;  }
a.mainmenu:hover{ text-decoration: underline; color : #B54BD8; }


/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px; letter-spacing: 1px; color : #EF6B6B}
a.cattitle { text-decoration: none; color : #EF6B6B; }
a.cattitle:hover{ text-decoration: underline; }


/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #EF6B6B; }
a.forumlink { text-decoration: none; color : #EF6B6B; }
a.forumlink:hover{ text-decoration: underline; color : #B54BD8; }


/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #006699;}
a.nav { text-decoration: none; color : #EF6B6B; }
a.nav:hover { text-decoration: underline; }


/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #006699; }
a.topictitle:link   { text-decoration: none; color : #EF6B6B; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #B54BD8; }


/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #0066CC;}

/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #0066CC; }


/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #EF6B6B }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #B54BD8}


/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #0066CC; text-decoration: underline;}


/* Form elements */
input,textarea, select {
color : #0066CC;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #0066CC;
}

/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF;
color : #0066CC;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
background-color : #FAFAFA;
font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
background-color : #FAFAFA;
font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
 help line. This is actually a text box, but if set to be the same
 colour as the background no one will know Wink
*/
.helpline { background-color: #DEE3E7; border-style: none; }


/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");




Step 3.

In "Admin Panel >> Display >> Pictures & Colors >> Colors", you will see the tab for your CSS Stylesheet at present. Click it. The box for it is most likely empty. Paste your copied CSS code in the empty white box and save. Leave default style sheet to yes.

Step 4.

You now need to host the images that your pasted CSS needs.

body {
background-image: url(images/girTalk2_bg.gif);
background-repeat: repeat;
background-color: #E6F6F9;
margin: 0px;
padding: 0px;
height: 100%;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color:  #EF6B6B;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;

as you can see from the snippet of the CCS i am using as an example, the part in bold needs to be changed. It is only half a URL. You need to find the image within the theme folder (it will have the same tite as the end of the code, for example in my case the image would be saved in the theme folder under: girTalk2_bg) and save it to your computer, then upload the image to the likes of servimg, photobucket imageshack etc. You then need to replace the link in bold, with the direct URL to your hosted picture.

body {
background-image: url(https://2img.net/r/ihimg/7878/23/girTalk2_bg.gif);
background-repeat: repeat;
background-color: #E6F6F9;
margin: 0px;
padding: 0px;
height: 100%;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color:  #EF6B6B;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;

Step 5.

Work through your style sheet and theme folder saving images, hosting and changing URLs till they are all done. Then save. You can then preview your forum to see the changes. if your default themes headers etc are still present you need to go into modify the pictures and remove the URLS for them and save, as this will leave them empty and your CSS will take over.

Step 6.


You can then continue to use images from the unzipped theme files on your computer and  hosting them, for the forum icons, buttons etc in "Admin Panel >> Display >> Pictures & Colors >> Pics Management". Its very time consuming.

One you have uploaded all the new images, that should be your theme installed on your forum.



by Shadow
on March 7th 2008, 10:17 am
 
Search in: Frequently Asked Questions
Topic: How to add a theme to your board
Replies: 0
Views: 10560

Back to top

Page 4 of 4 Previous  1, 2, 3, 4

Jump to: