Theme Developement Tips & Tricks

Basti

Administrator
Staff member
Hey everyone,
before saying anything else, we want to thank you for contributing skins to VisioList. This is much appreciated :)

Guidelines: Posting your Theme/Skin

After you have created your skin and it is ready to be posted, please include the following into your topic along with any other info you find necessary. This could help the user downloading it, deciding to use the skin or not. We will screen skins posted for quality to ensure a good user experience for our customers.

1) For which VisioList version is this skin designed for?
2) Is this skin under active developement?
YES -
Will be updated to latest Visiolist by author and support all the latest features
NO - Might happen that this skin dont support latest VL features
2.1) Skin / display errors fixed by author?

Guidelines: Theme/Skin Developement

Changing the style for forms
You may ask yourself how you can alter the default style for forms. This is handled through Jquery UI http://jqueryui.com/themeroller/

Here you have 2 options:
1) - Roll a theme which match your skin. Download it and unzip.
- Go into css folder and copy the folder you find inside. That folder you will simply put into your skin folder
- Then update wrapper.html head area with the following
Code:
<link rel="stylesheet" type="text/css" media="screen" href="skins/{$skin_name}/folder_name/css_name.css" />
- Obviously change the above "folder_name" to the name of the folder you copied,
"css_name" to the name of the css inside that "folder_name"

2) Dont use Jquery Themeroller to enhance your forms. To remove this option delete for example the following from join_form.html, it is in the <form> tag
Code:
class="uiform"
Code:
    <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
Include a screeshot with your skin
Each skin has an info.php file which includes the authors name, URL, email and the name of the skin. To include a screenshot, take a jpg screenshot of your skin in action, and name the file whatever the name of your skin is. So with parabola for example, the screenshot is called parabola.jpg this screenshot is located in your skin folder and will be shown in the admin panel.
 
Last edited by a moderator:

r87

Mister "Question"
In wraper.html there is no line:

PHP:
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
It's hardcoded by:

PHP:
{$header_js_files}
Question: from where data is taking? In future: hardcoding is not good ;) it's not user friendly.
 

Basti

Administrator
Staff member
Right, that line is gone since 0.7 final. We have moved the needed core javascript files into a template tag so users always have these updated when required without making changes themeself.
Now if you dont want to use the jquery form, open join_form.html and remove the class="uiform" from the form tag
 

Basti

Administrator
Staff member
yup. The javascript you mentioned have nothing to do with it, well nothing which the core version cannot handle ( version 1.8.20 ). Just for the theme roller all you need to do is step #1
 
Top