Jun
16
Skins Manager
Filed Under Extensions, SkyBlueCanvas CMS
Templates – or skins – are the presentation layer of a web site and allow you to change the appearance of your site without making any changes to the content (text and pictures). The SkyBlueCanvas template system is very simple and very flexible. What your site looks like is limited only by your imagination.
Skins are comprised of XHTML, CSS, JavaScript? and image files. SkyBlueCanvas templates contain absolutely no PHP or other executable code and incorporates a simple token replacement concept. You build your XHTML files as you would for any web page and indicate a content region using simple tokens like {region:header}, {region:left} and {region:main}.
When you create a template for a SkyBlueCanvas site, you do not need, however, to build the entire page. Every web page includes the HTML, HEAD and BODY regions, so SkyBlueCanvas includes a page skeleton that defines these major elements. Your template only needs to define what appears between the BODY tags.
Diagram 12
When you click the Templates icon shown in Diagram 1-A, you will be re-directed to the Templates Dashboard shown in Diagram 12. This dashboard shows 4 controls:
- Active Skin (Diagram 12-A)
- CSS Editor (Diagram 12-B)
- HTML Editor (Diagram 12-B)
- Skin_Installer (Diagram 12-C)
Caution: Unless you know what you are doing, you should not attempt to edit the CSS or HTML for your site skins.
SkyBlueCanvas allows you to install an unlimited number of templates. You use the Active Skin manager to select the currently active skin. I will not cover this manager here because it is very simple and self-explanatory.
We will use the HTML Editor as our example for explaining how the editor works. It is actually quite simple because it is only a simple text editor.
Diagram 13
To edit the HTML (and similarly the CSS) for your template, click the HTML Editor button on the Templates Dashboard as indicated in Diagram 12-B. You will be re-directed to the familiar List View shown in Diagram 13.
Diagram 13-A
You can create a new HTML Layout File by clicking the Add button shown in Diagram 13-A.
Diagram 13-B
To edit an existing layout file, click the Edit control to the right of the HTML file you wish to edit (Diagram 13-B). You will be re-directed to the HTML Editor shown in Diagram 14.
Diagram 14
Diagram 14-A
In the field indicated in Diagram 14-A, you can enter a name for the skin. However, changing the name of the HTML file does not rename the file. Instead, it makes a copy of the file with the new name. This is a precautionary measure to prevent you from accidentally breaking the appearance of your site. If you have pages that already use the original name of the layout, you would have to go change these pages individually.
Diagram 14-B
Diagram 14-B indicates the text area where you edit the HTML for the layout file. Make the desired changes to the HTML and click the Save button indicated in Diagram 14-C. That’s it. The next time someone visits your site, the new HTML will be displayed.
Comments
Leave a Reply