Skin Tutorial
From IkonWiki
Contents |
ISIS™ Tutorial
Preface
It is assumed that your are familiar with CSS, XHTML, and JavaScript.
These are the “requirements” for ISIS™ - IkonForums© Skin System.
If your knowledge in these areas are limited, it is advised that you educate yourself with proper syntax and accepted practices of XHTML and CSS. Though IkonForums has no affiliation with the following websites, they are recommended as a few places to start you on your “Path of Enlightenment” :-)
Where Web Standards are created.
- W3.org - The World Wide Web Consortium
Resources for all aspects of Web Design Excellent source for learning and tutorials. Articles, tutorials, discussion and resources for CSS. For the very beginner, this is a good start.
- W3 Schools - Free, online tutorials
If you have any problems or questions while designing your new skin, please post them on our Forums in Skin Support.
Introduction
IkonForums© Skin Engine ISIS™ is revolutionary in both it's concept and design, and is the brainchild by our lead Perl programmer: $JEET$.
ISIS™ stands for Intuitive Selective Interoperable Skins, and the skins truly are just that.
To work with ISIS™ simply open your IkonForums Control Panel and expand the Appearances & Language section.
You can create multiple: CSS, HTML, JavaScript, Graphics, and Board Template “packages”; while each are separate entities, they can be combined in a "Mix & Match" order via the Skin Manager: creating a whole "new" skin.
If a change of skin color is desired while maintaining the same default layout, all you need to do is create the “newColor.css” file based on the Default CSS and edit/save your changes. Open Skin Manager, type in the name of the newColor skin, set all options to “default” except for CSS, change that to your newColor.css file, click on Create Skin (to save changes). Now you have a new IkonForums skin!
A nice feature for skinning authors, don't you think?
During the course of this Tutorial, you will notice the term Skin Level followed by Beginner, Average, and Advanced. This is meant to define the knowledge level of XHTML, CSS, or JavaScript; depending upon which methodology may be covered in the topic.
--G7W 17:43, 1 January 2007 (UTC)
Skin Manager
Each Skin is a combination of HTML Templates, Graphics, CSS, Javascript, and a Board Template.
There are two sections to ISIS™ Skin Manager.
It would be a good idea to enlarge the displayed thumbnail image to familiarize yourself.
The top section is Management.
This is where you can:
- delete the skin package
- edit the package description
- assign an existing:
- HTML pack
- CSS pack
- Graphic's pack
- JavaScript pack
- a Board Template
The bottom section is where you can create a new Skin and selecting it's components.
Hint:
Components must be created before they can be assigned to a Skin Name.
At IkonForums, we feel that customizing your Board's look should be an easy and enjoyable experience.
Board Template Control
Skin Level: AVERAGE
Language: XHTML
What is a Board Template?
Simple question; simple answer,
"The HTML wrapper that contains your IkonForums© Board."
In the ISIS™ Board Template Control of your IkonForums© Control Panel you can:
- create a new template
- edit or delete an existing template
Caution!
Though safeguards have been put in place so that you cannot accidentally delete your default template, you can edit it. It is recommended that you create a new template based on the default, make any edits to your new template, then assign the new template to your skin via the ISIS™ Skin Manager.
So what's a Board Template look like?
Examine the following code block:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>$data->{'TITLE'}</title>
<meta name="generator" content="IkonForums $iF::VERSION" />
<meta http-equiv="Content-Type" content="text/html; charset=$iF::INFO->{'CHARSET'}" />
<link rel="stylesheet" href="$iF::SKIN->{'CSS_URL'}/main.css" type="text/css" />
$data->{'JAVASCRIPT'}
</head>
<body>
$data->{'BOARD_HEADER'}
<div id="i-header">
<!-- Comment out this empty div if you do not want to display the logo -->
<div id="i-header_logo"></div>
<!-- The tabbed navigation menu do NOT remove -->
$data->{'NAV_TABS'}
</div>
<!-- End - header -->
<div id="i-container">
$data->{'MEMBER_BAR'}
$data->{'NAV_TOP'}
<div id="i-inner_container">$data->{'IKONFORUMS'}</div>
$data->{'NAV_BOTTOM'}
$data->{'BOARD_FOOTER'}
$data->{'STATS'}
<div style="font: normal 12px verdana; text-align:center; margin: 5px 0px;">
$iF::INFO->{'COPYRIGHT_INFO'}<br />
$data->{'COPYRIGHT'}
</div>
</div>
</body>
</html>
| $iF::SKIN->{'CSS_URL'} |
| $data->{'NAV_TABS'} |
| $data->{'TITLE'} |
This stuff isn't HTML!
What am I supposed to do with this?
These are iF Directives.
iF is an abbreviation for ikonForum; a pretty tuff one, huh? :-)
$iF::SKIN->(IDENTIFIER) are IkonForums© Global Variables that the Board can access anywhere.
$data is specific to the Board Templates, it allows IkonForums to load required sections, no matter what name you may give your Board Template.
Pretty cool stuff, huh?
Caution!
It is highly advised that you do NOT remove or rearrange any Perl directives, unless you are familiar with the Perl language and have edited the associated modules to account for modifications made within the Board Template.
CSS Control
The CSS-based images are:
- Board Logo
- logo.png (light-based backgrounds)
- logo2.png (dark-based backgrounds)
#i-header_logo {
background: transparent url(images/logo2.png) no-repeat scroll 0%;
width: 266px;
height: 65px;
margin: 0 auto 5px;
}- header_fill.png
the gradient fill used in the header - section1_fill.png
the gradient fill used in various areas such as Category backgrounds. - section2_fill.png
the gradient used in various areas such at the Forum Header backgrounds. - quote_begin.png
The starting image for Quote Boxes. - quote_end.png
The ending image for Quote Boxes.
Graphic's Properties
IkonForums© is highly graphical; we have incorporated the use of icons for nearly all aspects of navigation and board to user communication.
The intention is to use images as aids to help break language barriers. The default language is English, but you do not need to be fluent to understand how to navigate the Board, you can view the icons as well.
For example look at the main tabbed navigation menu. MINI-IMAGE HERE There is a "house" for Home, a "gear" for Account, a "calendar" for Calendar, etc.
There are over 200 images used in IkonForums.
This does not include the CSS-based images, or Avatars!
For many of the images there is an "associative rule" which we refer to as skin globals which defines what image to use and where to place it within the HTML.
A skin global looks like this:
iF::SKIN->{GLOBAL}
note: define location, directory hierarchy, gfx_data.cfg note: discuss: MIME_
note: discuss: POST_ICON_xx note: discuss: TEAM_ICON_xx note: discuss: SYSTEM_ICON_xx note: discuss: ACCOUNT_xx note: discuss: MOD_xx note: discuss: OEM_xx
HTML Template Control
JavaScript Control
Import & Export Skins
text
