Figure a
Edit Skin Properties
This is probably one of the most complicated areas for most people to deal with.
We get an overwhelming number of questions regarding how to customize the board
from this area, and, although I'd love to put an extremely detailed description
in here on what does what and how to do this and that, I am going to save that
for a later write-up, if someone doesn't beat me to it. Right now, we're just
going to cover the basics. I'll give you a general idea what each area does
with a brief once-over, except for the global colors area, which I will try
to show you what changes what, as that seems to be one of the largest problems
everyone tends to have.
There are very few limits as to what you can do to customize the appearance
of your ikonboard. It takes a little imagination, some hex codes, maybe a few
graphics and a bit of knowledge about css doesn't hurt at all. If you're really
brave, you might venture into the html parts and alter the layouts of the board,
or even change the skin template to make it do what you want it to. When going
into the Edit Skin Properties area, first you will need to decide which skin
you wish to edit, as well as what area of it you want to change (figure
a).
|
Figure a
|
Skin Sections
CSS - CSS stands for Cascading Style Sheets. This
is a type of coding that allows you to set specific attributes for text, tables,
page properties, links, hover commands and more. With the ikonboard skins, all
font properties and colors are defined here, as well as cells that require a
"topcell" image to appear.
Javascript - The javascript for ikonboard contains
the commands for pop up windows (such as the emoticons & iB code help cards)
and the forum jump attributes. You can add additional ones as necessary, such
as a open all offsite links in a new window, or turning off the ability to right
click and save images (though this is not a recommendation to use such a script,
this is listed only to give examples of other types of javascript).
Global Colors- This area specifically deals with
table width, logo name, table cell colors and so on. This is one of the most
commonly edited areas, even by those who do very little skinning.
Icon/GFX Attributes - Within this area you will
find a list of all images used in a skin (outside of the logo, see above), it's
name, it's alternate text, and where it goes. You can change the name of any
image here to your own, if you prefer not to overwrite the image with the default
names for the files.
HTML - These are actually the miscellaneous html
properties of the board itself. Changing this area can cause you serious problems
if you are not sure what you are doing. There are a lot of various properties
of the skin that can be adjusted here, and the list of things is not only quite
extensive, but as this is done in modules, some parts of the board attributes
can be very complex.
Apply Board Template - This allows you to apply
the template of your choice to any given skin. Very useful if you change the
layout of your board but have chosen to leave the default template untouched,
though wish to use another layout for a particular skin or series of skins.
CSS Properties
CSS is probably one of the most simple parts of the board to change, as for
the most part it only deals with font types, sizes, and colors. Though there
are a few areas here that are not "just" font related, the vast majority
are (figure b). You should be able to figure
the majority of this area pretty quickly.. font : 10px means that the font is
10 pixels high, Veranda is the font name, color: #000000 is the color of the
font, background-color: #F8F8FB is the color of the background that the font
is written on, and so on. For more information on CSS codes, how it works, and
tutorials, you may wish to check out Website
Tips.
|
Figure b
|
Javascript Properties
Most people will probably never need this feature, but it's here
and available for those who do. This area specifically edits the js file in
the non-cgi/skins are, defining the attributes for the javascript used in the
software (figure c).
|
Figure c
|
Global Colors
This has to be the most used area of the ikonboard customization.
Global color settings affect the table's width, border color, logo, background
color, table cell colors, navigation bars, calendar colors, and so on (figure
d). Below you will see a full shot of the entire area, and further
down I have made some notes for you to easier identify the areas certain parts
effect. I will take screenshots and point out affected areas as best I can to
give you a guide as to which item changes what color where.
|
Figure d
|
Table Information
Table Width - This can be set in percentages (scalable
for various resolutions) or fixed (absolute) by changing % to px. This affects
the width of the table the forums and topics are listed in.
Table Border Colour - This is that dark border
around the main table itself in the default skin.
Logo Information
Board Logo - This is the name of the image you
want to appear as the board logo. The image must be uploaded into the iB_html/non-CGI/Skin
area, inside the images folder for the skin number your are editing. It does
not have to be named "logo.gif", so long as you have the correct file
name showing here.
Logo Alignment - You can use "center",
"right", or "left" for the alignment of the logo.
(Please note that for screenshots, the places where the color is 
,
are the areas that have been changed to show you what will be effected by the
color adjustments)
Miscellaneous Colours
Board HTML Background Colour - This
helps alter the background color of the board itself.
Misc. Table Cell Colour #1 (Light) -
This is one of two cell background colors that affect a number of cells in
various parts of the board. screenshot
Misc. Table Cell Colour #2 (Dark) -
This is the second of two cell background colors that affect a number of
cells in various parts of the board. screenshot
Misc. Active Users - This deals
with the active users and event calendar part of the board. screenshot
Misc. Board Statistics - This
is the board statistics area. screenshot
Misc. Invite a friend - This area
is the place where you see the "Invite a Friend" feature. screenshot
Misc. Web Ring - This template
helps you set up the total post count format. screenshot
Misc. Header Table Cell Colour - This is the format
for the last topic posted include for the entire forum. screenshot
Table Title Colours
Title Background Colour - This
helps alter the background color of the board itself. screenshot
Title Table Border Colour - This is one of two
cell background colors that affect a number of cells in various parts of the
board. screenshot
Forum Column
Colours
Post, Topic, and Folder Images - This is the very
first column on the index and topic view list, containing either the read/new
icons or the "envelope" and posticons. #1
Forum and Topic - This will be the cell that contains
the forum name or the topic name in a topic view list. #2
Number of Topics - This is the cell containing
the number of topics in a forum view (such as the main index page, depending
on how yours is set up). #3
Replies - This is the column that contains the
number of replies count. #4
Last Post and Action Info - This
column is the one that shows who was the last person who posted to that forum
(or topic in a topic list view). #5
Topic Starter - This column shows the person who
started the topic in a topic list view. #6
Views - This column shows the
number of times a topic has been viewed. #7
Pinned Post, Topic, and Folder Images - This is
one of two cell background colors that affect a number of cells in various parts
of the board. #8
Pinned Topic Title - This is the second of two
cell background colors that affect a number of cells in various parts of the
board. #9
Pinned Topic Starter - This deals with the active
users and event calendar part of the board. #10
Pinned Number of Posts - This is the board statistics
area. #11
Pinned Number of Views - This area is the place
where you see the "Invite a Friend" feature. #12
Pinned Last Action - This is the format for the
last topic posted include for the entire forum. #13
Category Colours
Category Title Background Colour - This is the
very first column on the index and topic view list, containing either the read/new
icons or the "envelope" and posticons. #1
Nested Category (Expanded) Col. #1 - This will
be the cell that contains the forum name or the topic name in a topic view list.
#2
Nested Category (Expanded) Col. #2 - This is the
cell containing the number of topics in a forum view (such as the main index
page, depending on how yours is set up). #3
Nested Category (Expanded) Col. #3 - This is the
column that contains the number of replies count. #4
Nested Category (Expanded) Col. #4 - This column
is the one that shows who was the last person who posted to that forum (or topic
in a topic list view). #5
Nested Category (Expanded) Col. #5 - This column
shows the person who started the topic in a topic list view. #6
Thread View Row Colours
Thread Entry Colour #1 - The color of the background
of the first and all odd numbered posts in a thread.
Thread Entry Colour #2 - The background color of
the second and all even numbered posts in a thread.
Edited by font size (in pt) - The size of the font
that shows the time and date and who a post was edited by when someone edits
a post.
|
Thread View Row
 |
User CP, User Bar Colours
User Strip Background Colour -
The strip across the top that has the user's name and the link to their control
panel. screenshot
User CP Navigation Tabs: Active - The tab for the
area you are in when viewing your user control panel. screenshot
User CP Navigation Tabs: Inactive - Tabs of those
items you are not immediately viewing in your user control panel. screenshot
Navigation Strip Colours
Navigation Border Colour - The color of the border
around the navigation strip at the top of every page.
Navigation Table Background Colour - The color
of the navigation strip at the top of every page. screenshot
Member Profile & Member List
Title Background Colour - This is the very first
column on the index and topic view list, containing either the read/new icons
or the "envelope" and posticons.
Thread Entry Colour #1 - This will be the cell
that contains the forum name or the topic name in a topic view list.
Thread Entry Colour #2 - This is the cell containing
the number of topics in a forum view (such as the main index page, depending
on how yours is set up).
|
Member Profile & Member List
 |
Calendar Colours
Blank cell - A cell that contains no date, as it
is starting into the next month or left extra from the previous month.
Cells with old or new days - Any date for the current
month that is not the current day.
Current day cell - The cell for the current day.
|
Calendar Colors
 |
Icon/GFX Attributes
If you do your own graphics, or know someone who does, then sooner or later
you're likely to want to replace the images if you're doing a custom skin job
for your board. When that happens, you'll probably need to make some adjustments
in your Icon/GFX attributes, especially if the image names have changed (figure
a). You'll need to go through, enter in the new image's name in the
proper spot, and perhaps you'll want to give it an alternate attribute for the
word that pops up when the mouse cursor hovers over the image. Just remember
to save your changes when you're done.
|
Figure a
|
HTML Properties
This area tends to confuse a lot of people, and making adjustments in here can
be risky if you don't know what you're doing. The HTML information for each
of the "display" areas is stored here, but it can take a little bit
of work customizing them to suit your needs. It's worth it in the end, though,
especially if you need a really customized skin. Each prime area listed shows
a short list of the table areas that are within it, just click on the primary
area, then go in to find the specific tables you need to edit (figure
a).
|
Figure a
|
Apply Board Template
Some skins require their own custom template. Other times, you may make a template
of your own, but need to apply it to your skin, rather than deleting the original
out, just in case it doesn't work. That's specifically what this area is for.
You simply select the template you wish to use for the skin you're editing from
the drop down and hit apply (figure a).
|
Figure a
|
Create New Skin
When you're ready to start making your own skins, you'll probably want to create
a new skin pack for it. Depending on how you want it to look, you will want
to create it based on an existing pack, which can be the default one or another.
Then you will want to choose the Viewable Skin Name, put in your name (if you're
the Author of it, of course) and put in your email address, just in case you
decide to allow someone to download it, if it gets around, then at least there
will be some reference as to who made it (figure a).
After you've created your new skin pack, then you'll go into edit skin properties
to make your changes however you see fit.
|
Figure a
|
Export Skin Pack
If you've created a new skin or made alterations to the existing pack, then
you will likely, in order to save it in case of a crash, want to export it so
that you can download a copy of the files "just in case" (figure
a). If you decide you want to offer it for download, then you will
also want to export it, so that it can be saved in the proper format to be downloaded
and put wherever it needs to be to become downloadable to the general public.
|
Figure a
|
Import Skin Pack
I see this question over and over on the support forums.. "How do I make
a skin available after I've downloaded it?" Well this is your solution.
You'll first need to upload the tar file into your INCOMMING directory, then
CHMOD it to 777. Once you've done that, then you'll come here, select the skin
from the drop down menu. Give it the name you want to appear for your members
if they decide to pick their own default skin, then import (figure
a).
|
Figure a
|
Remove Skin
Just like there are lots of reasons for needing to add skins to your collection,
there are also lots of reasons why you may need to remove one.. or several.
To do this, you simply come here, select the one you want to get rid of and
hit "Remove This Skin" (figure a).
Couldn't be more simple than that. :)
|
Figure a
|
Written 7/13/02 by Snow Wolf for Ikonboard
Jarvis Network
