How to make skins?
What are skins?
Skins let you change appearance of your website. They are placed inside style directory. After clean F3Site installation there are 2 folders:
- default - standard skin - the most important templates:
- body.html - main template, website layout
- admin.html - admin panel layout
- 404.html - non-existing page
- css.html - CSS scheme selection
- login.html - login page (not menu panel)
- message.html - announcement or error on separate site
- content.html - content editing panel
- rate.css - appearance of stars for rating content
- 1.css, 2.css... - schemes that everyone may select
- admin - admin panel templates, e.g.
- config.css - settings menu, icons
- summary.html - admin panel homepage
Every skin may contain any number of schemes - CSS sheets describing position, shape, size, margins, colors, fonts, backgrounds of elements... Names of .css files must be natural numbers: 1, 2, 3... All users may select skin's scheme at area specified by you in body.html.
Where to change skin?
Contrary to schemes (main CSS style sheets), only administrators may change skin in main options.
How to create your own skin?
First get a good WWW editor with syntax highlighting. Don't use Notepad! Install extensions for developers in your web browser. Don't be discouraged if you meet with difficulties while writing HTML and CSS code. Firebug for Firefox may help you.
If you want to change the appearance entirely, create your own skin. Add a new folder to style directory. Copy all files from exemplar skin, unless you want to write everything from stratch.
Keep your HTML and CSS up to date
Follow new standards and trends. Try to avoid obsolete and outdated methods of creating layouts and deprecated tags. However, a lot of people still use old versions of browsers.
Layout base - body.html
Here you can find main part of your skin - layout with document type declaration (DTD), title, tags <meta>, <link>... It describes particular layout elements: top, panels, footer, navigation, skin and language selection... In case of non-standard layouts it's recommended to write own HTML code with styles in CSS file.
DTD and lang attribute
Remember to insert document type declaration (DTD) in the beginning of HTML code. Otherwise browsers will use quirks mode and may display your website incorrectly! Tag <html> must have lang attribute with {LANG} value. It's required by some F3Site components, e.g. comments system.
Variables in body.html i admin.html
Some values dependent on current page, time and other factors may be placed automatically. You only need to specify their space by putting variables in proper area:
- {LANG} - current language, e.g. en, pl...
- {PAGE TITLE} - module title, np. Users
- {MAIN TITLE} - website title, np. COMPMaster
- {cfg.metaDesc} - website description set in settings
- {cfg.robots} - search engines indexing options
- {cfg.footer} - footer
- {CSS} - number of used CSS, e.g. 1, 2, 3...
- {HEAD TAGS} - additional scripts, <link> - place before </head>
- {BANNER X} - random HTML code for generator ID = X
- {TODAY} - current time
- {CONTENT} - main website title
- {LEFT MENU} - left menu
- {RIGHT MENU} - right menu
- {MENU} - admin panel menu
See examples in existing skins.
CSS stylesheets
They describe colors, fonts, backgrounds, borders, margins, position and dimentions of objects, sometimes even layout arrangement. You can modify most website appearance.
Currently making layouts based on tables is inadvisable because they are intended for presenting tabular data. If you decide on layout without tables, you must set exactly position and margins, e.g. menu, middle area - as in default skin. CSS 3 is expected to help making multi-column layouts, but it's still not finished.
Template system syntax
To simplify designing skins, F3Site 3 introduces easy template language. The syntax is based on insets and HTML comments:
{variable}
{array.key}
{object->property}
Conditional instructions:
<!-- IF variable --> Text will appear if the variable has logical value TRUE <!-- END --> <!-- IF array.key --> If the array's element has logical value TRUE <!-- END -->
Instruction ELSE = otherwise:
<!-- IF new --> Item is new. <!-- ELSE --> Wpis jest old. <!-- END -->
Loops foreach - events stored in $events array:
<!-- START events --> <div> User {from} talked to {to}. </div> <!-- STOP -->
Notice array's keys inside the loop are treated as variables in order to increase code readability and reduce its size.
How to traverse array containing only keys and scalar values?
<!-- START array --> Key: {KEY} Value: {ITEM} <!-- STOP -->
Including other templates:
<!-- INCLUDE template_name_without_extension -->
Template will be loaded from directory set in $content->dir or skin's folder.
PHP code
Usually there's no need to add PHP code. It's better to use template syntax.
By default PHP code is interpreted but may be dangerous. If you're afraid skins downloaded from the Internet may damage or destroy data, open lib/compiler.php and set removePHP to true.
Make forms easier
Fields <select>, checkbox and radio may need to have checked or selected attribute to be displayed as enabled. To simplify it, you may add additional attributes to <form> or its elements:
<form action="" method="post" f3:array="array"> <input type="checkbox" name="key" /> <select name="selection"> <option value="1">Option with value 1</option> <option value="2">Option with value 2</option> </select>
Fields select, checkbox and radio can be selected automatically. Consider checkbox containing name="klucz". If $array['key'] has logical value TRUE, it's checked by default.
In case of select and radio, values of each option are compared. Look at the above example. If $array['key'] reachs 2, the second item will be selected.
In text fields you must always insert value into value=""
<input name="title" value="{array.title}" />
You may also add f3:var attribute to specified fields: select, radio or checkbox. Element is checked if its logical value is TRUE or the same as option's value.
Conclusion
If you want to create your own skin, it's recommended to base on existing one, e.g. default. Analyse language instructions in templates. You will learn to make and edit skins for F3Site faster.