-
Notifications
You must be signed in to change notification settings - Fork 35
Template Theme Editing
The templating system in Zuha makes use of shortcodes. Placing a shortcode within your template files will cause them to be parsed into their true contents. View a Sample Zuha template here.
Here is an incomplete list of the standard available shortcodes.
Display the contents of the current URL *Required :
This is the heavy lifter for the Zuha CMS. It is THE template tag that displays the primary content from cms, and system pages. If you had a header, content area, sidebar and footer. This would go in the "content area".
{helper: content_for_layout}
Display Useful System Alert Messages (like "Saved Successfully", both should be used together)
{helper: flash_auth_for_layout} (for session specific messages)
{helper: flash_for_layout}
Display the title of the page:
{helper: title_for_layout} (title tags, etc)
Display the contents of another Page or Element:
Zuha is a database driven CMS. Anytime you want to make an editable reusable global box/area (eg. a footer, header, sidebar, widget within a sidebar), you would create it by going to the admin of the site and navigating to THEMES > APPEARANCE > WIDGET ELEMENTS. Where you would then add a record and use the id number of the created record to replace "X" in the template tag below.
{page: X}
(where X = ID number of the desired page)
Display the contents of an Element that belongs to a Plugin:
{element: Plugin.element}
(where Plugin is CamelCase plugin name, and element is the element's name)
ex.
{element: Users.login_form}
Display the contents of an Element that belongs to a Plugin, but is in a subfolder:
{element: Plugin.Subfolder/element}
ex.
{element: Categories.categories/tabs}
Passing a variable to element files:
{element: Plugin.element variableName=variableValue}
Display the default, dynamic, Login / Logout element:
{element: Users.login}
Display other <head> elements:
{element: favicon}
{element: css}
{element: javascript}
{element: Webpages.analytics}
Misc:
{element: body_attributes} (used to add current Plugin/Controller/Action as classes)
You should know the difference between content images, and css (background) images to understand this. Also, when you upload images to your site, it would be best to use installed file manager. (edit any page, click on the image icon, and then click "Browse Server").
Once images are uploaded the relative urls for content images would be structured like this...
<img src="/theme/default/upload/[USER ID]/img/[FILE NAME]" />
The path to the same file if used in your css would be...
<style> .someClass { background: url('../upload/[USER ID]/img/[FILE NAME]'); } </style>
Visit http://example.com/webpages/webpage_csses and from there you can add/edit/delete css files, and specify whether a css file is for print, all, or any other media, and which template it should be used with. (Empty will mean that it will be used with all templates)
Visit http://example.com/webpages/webpage_jses and from there you can add/edit/delete js files, and specify which template it should be used with. (Empty will mean that it will be used with all templates)