Free Web Hosting : Free Hosting : Troubled Teens : Web Site : Report Abuse



Home graphics Graphics CSS Toris Tutorials

iB3 --> Creating your Own Skins
This is where you can SEE where the associated CSS goes.


This Tutorial is for iB3 v3.70 and before. I am currently working on a new Tutorial for iB3 version RC-1

The most important part of making skins, in my opinion, is the proper association of colours throughtout your board. The colour scheme is generated by a file called ikonboard.css and by the Global Colours. What I have done here is broken down the ikonboard.css file to show you what each part of it is associated with. This will, hopefully, help you create a better colour scheme to go along with your newly created images and board colours.

In each of the pictures I tried to make that particular part of the CSS file show up in red PLUS I circled some in red to make it stand out even more. In the future, if I can find the time, I will re-create the 18 pages from the Global Colours and mark on them the effects the different parts of the CSS does on the various pages.


I am using the skin I downloaded from Kreativs website in most of my screen shots.

Start up your favourite browser; one that supports CSS of course.
* Go log into the Admin on your site.
* Go to Skins, Edit Skin Properties.
* Select TESTING SKIN (or whatever you called it) and CSS Style Sheets.

A copy of that page is below. Change your fonts and colours. If you need a quick reference guide for "fiddling" with the basic CSS file then go to this site located at http://www.blooberry.com/indexdot/css/. It seems to be very rich with explanations to help out CSS newbies. Good luck and have fun.
  Main Menu >> Tutorial Menu ->Ikonboard.css Breakdown


/* Base class, the rest inherit from this */
1 TABLE, TR, TD { font: 10px Verdana; color:#3E5AE7 }
2 BODY { font: 10px Verdana; color:#CD9209 }
3 a:link, a:visited, a:active { text-decoration:underline; color:#F89A35 }
4 a:hover { color:#1F911B }

/* Category Headers - Navigation - Misc Stuff */
5 #category { font-size:11px; font-weight : bold; color : #F6D955 }
6 #category a:link, #category a:visited,#category a:active { text-decoration: none; color : #F6D955 }
7 #category a:hover { text-decoration: underline }
8 #nav { font-size:10px; font-weight : bold; }
9 #nav a:link, #nav a:visited,#nav a:active { text-decoration: underline; color : #7AD183 }
10 #redirect { font-size:11px; font-weight:bold; }
 clickable image coming soon
11 #highlight { font-size : 10px; color : #1F911B }
12 #highlight a:link, #highlight a:visited, #highlight a:active { text-decoration: underline; color:#9B6F51 }
13 #highlight a:hover{ text-decoration: underline }

/* Viewing Topics Stuff */
14 #signature { font-size:11px; color:#F89A35 }
15 #postdetails { font-size:11px; }
16 #postcolor { font-size:11px; line-height : 150%; }
17 #membertitle { font-size:11px; line-height:150%; color:#1F911B }
18 #normalname { font-size:11px; font-weight : bold; color:#71A5FD; padding-bottom:2px }
19 #unreg { font-size:11px; font-weight:bold; color:#71A5FD }

/* Titles n' stuff */
20 #titlelarge { font-size:11px; font-weight:bold; line-height:150%; color : #FBFBFB }
21 #titlelarge a:link, #titlelarge a:visited, #titlelarge a:active { color:#CD9209 }
 Clickable image coming soon
22 #titlemedium { font-size:10px; font-weight:bold; line-height:150%; color:#FBFBFB }
23 #titlemedium a:link, #titlemedium a:visited, #titlemedium a:active { text-decoration: none; color : #FFFFFF }
24 #titlemedium a:hover { text-decoration: underline }

/* Menu - Control Panel Stuff */
25 #controlpanel { font-size:10px; font-weight:bold; line-height:150% }
26 #usermenu { font-size : 12px; line-height:150%; color : #F89A35 }
27 #tabs { border:1px solid #71A5FD; vertical-align:middle; font-size: 11px; }
/* Forum Links - Topic Links */
28 #linkthru { font-size:10px; color : #CD9209 }
29 #linkthru a:link, #linkthru a:visited, #linkthru a:active { text-decoration: underline; color : #1F911B }
30 #linkthru a:hover { text-decoration: underline; color : #F89A35 }

/* Copyright and bottom info */
31 #copyright { font-family: Arial; font-size : 9px; text-decoration: none; line-height : 12px; color: #5DC162; letter-spacing: 1px}

/* Ikon Code */

32 #CODE { font-family:Monaco, Courier, Courier New; font-size:11px; color: #000099; background-color: #FFFFFF; border-top:#000000 thin solid;border-bottom:#000000 thin solid;border-right:#000000 thin solid;border-left:#000000 thin solid; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; width:95%;}
33 #QUOTE { font-family:Verdana, Arial; font-size:10px; color: #000000; background-color: #FFFFFF; border-top:#000000 thin solid;border-bottom:#000000 thin solid;border-right:#000000 thin solid;border-left:#000000 thin solid; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; width:95%;}
34 #ME { font-family:Verdana, Arial; font-size:12px; color: #CC0000; text-align:center; font-weight: bold; }
.bottom { vertical-align: bottom }
.forminput { font-size: 8pt; background-color: #CCCCCC; font-family: verdana, helvetica, sans-serif; vertical-align:middle }
.textinput { font-size: 10pt; font-family: verdana, helvetica, sans-serif;vertical-align:middle }
 Clickable image coming soon