“SV Admin” Documentation by “Split-V” v1.0

“SV Admin”

Created: 10/27/2009
By: SplitV

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

HTML Structure
CSS Files and Structure
JavaScript
PSD Files
Sources and Credits

A) HTML Structure - top

General Structure

This theme is a semi fluid/liquid layout with two columns, (css min/max width used). All of the information within the main content area is nested within a div with an id of "content". The sidebar's (column #1) content is within a div with an id of "sidebar". The general layout of the templates code is illustrated below.

Sidebar Content(Main Navigation)

The main navigation consists of a main unordered list, each element in this main list is either a heading for a section of links or a section of links itself. The main unordered list needs to have a class of 'sidebar_menu' and the list elements for the head part of each section of links needs to have a class of 'sidebar_menu_head'. The list of links for each section needs a class of 'sidebar_menu_inner'.

If you want to use the javascript accordion style menu script included then you need to add some ID's to the elements. The main list itself will need to have a ID of 'sidebar_menu'. Now the headings and links sections ID's will have to end in incrementing numbers. This tells the script which heading goes to which block of links. For the headings, each will need a base ID of 'sidebar_head_' plus the incremented number. The list of links will need a base ID of 'sidebar_block_' plus the incremented number.

Main Page Content

There are 4 type of notifications blocks in the template for the main content section: Notice, Error, Inform and Success. Each are structured identical except the outer div uses an ID of either 'error', 'inform', 'succeed' or 'notice' respectively.(As well as using the respective images..eg inform_circle.png, notice_circle.png and etc).

There is a content wrapper for each block of content available in the template. It consists of two divs. The outer div must have a class of 'content_box' and the inner div must have a class of 'content_box_inner'. The actual content is to be placed inside of the inner div. The sections are designed to have an H3 at the beggining of the inner div to give the section a title.

There also exists 2 smaller content blocks available in order to give a content section 2 columns. First, just like a regular content section, there needs to be an outer div with a class of 'content_box'. This time there will be two inner divs and both will still have a class of 'content_box_inner'. The difference is that each inner div will also have a secondary class of either 'left_column' or 'right_column' respectively.

Form elements have a class for each type of element: 'text' for text inputs, 'dropdown' for dropdown selects, 'textarea' for textareas, 'radio' for radio buttons, 'checkbox' for checkboxes, 'upload' for file upload and 'button' for buttons. Beyond those basic classes, text inputs have two types of secondary classes, 'short' for a short input and 'long' for a longer one. Each element is setup to have a label for the title of the field and a div with class 'description' for the description of the field. There also exist an extra css class 'require' which is to be used in conjunction with required fields to make those options stand out.

Sidebar Structure

The only other features you should be aware of is that the tables are structured to look best if thead/th and tbody/td tags are used appropriately and there is a special class called 'tr_alt' specifically for giving the alternating rows of the tables a different look.

From here you may want to read through the example files and comments within them.

B) CSS Files and Structure - top

All CSS files are located in the folder named admin_styles. This template is distributed with 10 stylesheets. Seven of the stylesheets are all variations on the color. The other 3 have specific uses. The stylesheet named 'style.css' contains code related to the overall layout and structure of elements within the page. The 'typography.css' file contains all code relating to the typography of elements(eg. font, color, weight and etc). And finally the 'extra.css' file contains all definitions that pertain directly to one of the available javascript effects/add-ons distributed with the template. You must include the stylesheets in a specific order. First the main structural style sheet(style.css), next the typography stylesheet(typography.css) and finally the stylesheet for the color variation you want to use(eg red.css, blue.css, grey.css and etc...). You only need the extra.css file if using one of the javascript effects.

If you plan on using the stylesheet changer then you must include all color variation stylesheets you plan on making available. The one you wish to be the default stylesheet must have the rel attribute set to 'stylesheet' while all other color variation stylesheets must have the rel attribute set to 'alternate stylesheet'. Each color variation style sheet must also have a unique title attribute set as well because the stylesheet changer will need this to know which stylesheet needs to be activated/de-activated.

Each CSS file is structured so that all code from the same sections are grouped together within Begin/End Comment tags.

If you would like to edit a specific section of the site, simply find the appropriate section in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

For example if you wanted to edit the size of the font in the H2 tag of the content section you would first open the typography.css for editing, since we want to alter the font size. Next, you would scroll down until you found the content section as labeled by the comments.

After that you would scroll down until you found the appropriate section to edit and change the values accordingly.

C) JavaScript - top

There are 12 javscript files included with this template, 1 is just a script containing code specific to the example page provided with the template. All javascript functionality and effects are stand alone scripts that require no third party libraries, that means 50-200kb less the user has to download. It also means that you only need to include the files you plan on using. Below each file is introduced and explained.

-bytebox.js : custom lightbox implementation
Usage:
-1. First you must include the script in the header.
<script src="bytebox.js" type="text/javascript"></script>
-2. Next you need to add 'bytebox' to the rel attribute of any links to images you want displayed in a lightbox
<a href="example.jpg" rel ='bytebox'>Testing</a>
-3. Initialize the script after the DOM has been loaded. Easiest way would be to use windows.onload.
<script type="text/javascript"> window.onload = bytebox.init;</script>

-contentloaded.js : Allows execution of code on DOM loaded instead of window loaded.
Usage:
-1. First you must include the script in the header.
<script src="contentloaded.js" type="text/javascript"></script>
-2. Next you just call the ContentLoaded function before DOM has loaded passing in a reference to the window and a                   reference to a function to be executed.
ContentLoaded(window, function (e) { CODE TO EXECUTE HERE });

-close.js : script to remove elements with transition effects.
Usage:
-1. First you must include the script in the header.
  <script type="text/javascript" src="close.js" ></script>
-2. Now you can use the init function of the script to remove an element.
-The function takes 4 parameters:
- ID of the element to remove
- Type of removal transition - possible values = 'resize' or 'fade'
- duration of transition(optional)
- number of steps in transition animation(optional)
close.init('error',"resize",300,10)
-3. The template includes two classes to be used as handles for the close script.
- To include the 'X' handle in one of the notices use 'close_button_notice'. Insert this after the image.
<div class="close_button_notice" id="close_notice">
    <img src="admin_images/close.png" alt="close"/>
</div>
- To include the 'X' handle in one of the content_box's use 'close_button_content'. Insert this after h3
<div class="close_button_content" id="close_content">
      <img src="admin_images/close.png" alt="close"/>
</div>
-4. If you use one of the handles then you will need to attach the close.init functions to its 'onclick' event.
- Using the notice example above.....
document.getElementById('close_notice').onclick=function(){close.init('content_box_1',"fade")};

-colorfade.js : custom class to fade the background of an element between colors
Usage:
-1. First you must include the script in the header.
<script src="colorfade.js" type="text/javascript"></script>
-2. Now you can use the init function of the script to fade the background of an element between colors.
-The function takes 5 parameters:
- ID of the element to remove
- Start Color
- End Color
- Duration of transition
- Number of steps in transition
colorfade.init('colorfade','00ff00','ff0000',1000,100);

-draggable.js : script to make elements draggable
Usage:
-1. First you must include the script in the header.
<script src="draggable.js" type="text/javascript"></script>
-2. Now you can use the init function of the script to make an element draggable.
-The function takes 1 parameter:
- ID of the element to remove
draggable.init('notice');
**note: for the script to work the elements 'position' attribute needs to be set to 'relative' or 'absolute'.

-fade.js : script to fade an element in and out
Usage:
-1. First you must include the script in the header.
<script src="fade.js" type="text/javascript"></script>
-2. Now you can use the init function of the script to fade an element.
-The function takes 5 parameters:
- ID of the element to remove
- Start Opacity
- End Opacity
- Duration of transition
- Number of steps in transition
fade.init('colorfade',100,0,1000,100);

-menu_script.js : script to handle navigation menu functionality
Usage:
-1. First you must include the script in the header.
<script src="menu_script.js" type="text/javascript"></script>
-2. Next you must call the init function after the dom has loaded.
menu_script.init();

-modalbox.js : modal window class
Usage:
-1. First you must include the script in the header.
<script src="modalbox.js" type="text/javascript"></script>
-2. Now you can use the init function of the script to fade an element.
-The function takes 3 parameters:
- File from server to load into modal window
- width of modal window
- height of modal window
modalbox.init("modal_example.html",300,280);

-resize.js : scripts to resize elements
Usage:
-1. First you must include the script in the header.
<script src="resize.js" type="text/javascript"></script>
-2. Now you can use the init function of the script to fade an element.
-The function takes 5 parameters:
- ID of element
- New width of element
- New height of element
- Duration of transition
- Number of steps in transition
resize.init('resize',100,200,1000,30);

-stylechanger.js : script to allow the change of stylesheets
Usage:
-1. First you must include the script in the header.
<script src="stylechanger.js" type="text/javascript"></script>
-2. Next include all stylesheets like below. The default stylesheet must have a rel attribute set to 'stylesheet'
and all subsequent style sheets must have the rel attribute set to 'alternate stylesheet'. Each stylesheet
will also need a unique title attribute set as this is how the script knows which one you want to use.
<link rel="stylesheet" type="text/css" title="grey" href="style.css"/>
<link rel="alternate stylesheet" type="text/css" title="red" href="red.css"/>
<link rel="alternate stylesheet" type="text/css" title="yellow" href="grey.css"/>
-2. Next you must call the init function of the script. It is best to call this right after the script is included.
  styler.init();
-3. Now you can use the change function whenever you want to change the stylesheet.
-The function takes 1 parameter:
- title set for stylesheet when it was included.
styler.change('yellow');

See the example pages of the template that include javascript functionality for further details and examples of the scripts as well as to see the effects in action.

D) PSD Files - top

There are no PSD files included in this script as it is a minimalistic theme with really only a single image within the structure of the template itself.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

contentloaded.js courtesy of Diego Perini from http://javascript.nwbox.com/ContentLoaded/ - MIT License
minmax.js courtesy of Andrew Clover from doxdesk.com - public domain
Portions of menu_script.js courtesy of Michael Leigeber from http://www.leigeber.com/2008/10/animated-javascript-accordion/ - free for all uses.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

SplitV

Go To Table of Contents