SkaDate 9 Custom Template Creation Manual

Transcription

1 SkaDate 9 Custom Template Creation Manual General template structure Go to "ftp/www/layout/themes" and create a directory with a name of your template (further "new template"). The new directory may contain the following subdirectories: "canvas", "components", "httpdocs", "img", "plugins". If there are no subdirectories in the new template directory - the templates for location and design will apply to the new template from the root directory (ftp/www/layоut/). The "canvas" directory contains subdirectories with the following files: "footer.tpl", "header.tpl" and "style.css" defining the basic parameters of the page content and the page position relative to the user's screen. The "components" directory may consist of subdirectories with the files of the component's page proofs and its styles. If you want to change the component's palette only, you need create a directory with the component's title in "ftp/www/layout/themes/new_template/components/", and a file "name.style" in it. The Httpdocs directory contains the components forming the core of the page. The "img" directory contains pictures used in the active template. If you don't change the pictures in this directory, the picture of the standard template will be applied automatically. The "Plugins" directory includes mockups and styles of different menus and submenus, such as the main menu, sub-menu, bottom menu and the menu block_cap. The "new template" directory should also contain the following files: index.html, interface.style, theme.jpg. If the "index.html" file is missing, the template won't be displayed in the admin area, meaning you won't be able to activate it from there. You can create the index page file in the Admin Panel: The "theme.jpg" picture is displayed in the admin area/template/index page, where you select a template. The "interface.style" file is the main.css used for all styles of different components.

2 General styles Example: Change the background color of the whole site to black. You need to open the "interface.style" file and apply the following changes (We will use the "new template" directory for the examples): $body { background: #000; Also, you can add any styles used in ordinary css files. Use the "$" symbol before the "body" tag, because it is inherited from background: «$body; entered in the "layout.style" file If you want to change the background of a picture, you should do the following: $body { background: image(title_of the_picture.jpg); In this particular case the background addresses to the "img" directory that includes the template picture of the "new_template" directory. Now let's see how to change a color or a picture for the "block_cap":

3 Here is what you need to add to the interface.style:.block_cap { Add the following in the interface.style file:.block_cap { background: #color_code; If you need to insert a picture, use the following code:.block_cap { background: image(title_of_the_pic); Similarly, you can change color and picture for the block_body and block_toolbar. For the block_cap_title you can change only color. Component styles If changing the page markup is not required, simply redefine the styles in the "components" directory. This will simplify the build-to-build update process. In other words, you need to copy the ".style" file from ftp/layout/component/component_name/ to the directory with the same name, and make the necessary changes to that file. It is also possible to modify the HTML code. You need to copy the ".tpl" file to the directory with the same name with the component of the "new_template" directory, and make changes there.

4 Example: Change the color of the calendar in the "Events" component. Go to the "components" directory and create a "events_calendar" directory. It should contain a "style.style" file with styles description. You'll need to modify the following styles:.event_calendar td,.event_calendar th { background: #f0f0f0; - this is a standard color which you may change to any color This is a style description of the general color of the calendar. This applies to the change of the color for the current day:.event_calendar td.current{ background: #fcc; This applies to the change of the color for the marked event:.event_calendar td.link { background:#ccc; Index page creation Go to the admin area of your web site (normally, this would be the following URL: Go to the "Template/Index page" section. There you can edit the index CSS/HTML page code and 'play' with the components. Here is the default code of the index page: {* Theme: A Book of Faces *-Template's title {* Author: Skadate *-Template's author {canvas blank-template's wrapper, which does not include header, footer and sidebar. <div id="page_canvas">

5 {component PageSidebar - The component "sidebar" <div id="content"> {component NavigationlnventoryLine-The component "inventory line" {component PageHeader-Site's header <div id="footer">{component PageFooter</div> </div> </div> {/canvas Here is how it's displayed in a browser: The main components that can be added to the Index page are shown under the index page code.