This should be moved to themes.tiki.org




Image Tiki Shadow Layers How To.pdf


Theme Layout Reference

Tiki Shadow Layers are a way of modifying the look of your Tiki 50 theme, without directly modifying the HTML/TPL or CSS files. Instead, you can enter HTML and some inline CSS through the “Shadow Layer” tab on the Tiki’s “Look & Feel” administration tab. Intermediate to advanced users can go even further, and use smarty template tags along with HTML and CSS to focus the look for certain features and not others (for example change the look and feel of wiki pages, but not the calendar or articles).

Figure 1 - New Tiki Installation
Figure 1 - New Tiki Installation


Step 1: to begin modifying the shadow layers, go to “tiki-admin.php” ( e.g. http://www.example.com/tiki-admin.php ). Click on the “Look and Feel” button on the administration panel.

Figure 2 - Admin: Look & Feel
Figure 2 - Admin: Look & Feel


Step 2: on the first tab - "Theme" - of the Look & Feel panel, select the "Edit CSS" checkbox, and click the "Apply" button. Being able to access the content of the CSS will allow us to pick some appropriate colors for the shadow layers in upcoming steps.

Figure 3 - Admin: Look & Feel - Theme - Edit CSS
Figure 3 - Admin: Look & Feel - Theme - Edit CSS


Step 3: Go to the "Shadow layers" tab on the Look & Feel panel. Select the "Shadow layer" checkbox and click apply.

Figure 4 - Admin: Look & Feel - Theme - Shadow layers
Figure 4 - Admin: Look & Feel - Theme - Shadow layers

The shadow layer input text boxes are now displayed. There are six pairs of boxes. Any content that is input in these boxes, appears between HTML <div> tags, each of which has an id corresponding to a shadow layer. This statement will make better sense in the upcoming steps.

Figure 5 - Shadow Layer Text Input Boxes
Figure 5 - Shadow Layer Text Input Boxes


Step 4: Add simple text to the shadow layer input boxes, just to see where the content of each ends up. Here I have copied the label of each text box, and place the text in the corresponding field. Click Apply to see the result.

Figure 6 - Input Text for Testing the Shadow Layer
Figure 6 - Input Text for Testing the Shadow Layer


Here is the applied result of Step 4, as seen from the Tiki "HomePage" (home page of the wiki feature):

Figure 7 - Location of Shadow Layer Input
Figure 7 - Location of Shadow Layer Input

As you can see, the text that was input through each of the shadow layer input fields ended up between the same-named <div> tags that comprise the page. If you look at the source code for the tiki home page, you will be able to locate the tags and input-text shown in the box below.


See Also: Theme Layout Reference

Start and End Shadow Layer DIV Tags
Copy to clipboard
<div id="main-shadow">Main shadow start:
   <div id="header-shadow">Header shadow start:
      <div id="middle-shadow">Middle shadow start:
         <div id="tiki-center-shadow">Center shadow start:
            <div class="box-shadow">Module (box) shadow start:
               <div id="footer-shadow">Footer shadow start:
   Header shadow end:</div> 
         Center shadow end:</div>
            Module (box) shadow end:</div>
      Middle shadow end:</div>
               Footer shadow end:</div> 
Main shadow end:</div>


Step 5: Use the "Edit CSS" feature to find some colors that are appropriate to the current tiki theme. First click the "Edit CSS" link in the "Admin" menu.

Figure 8 - Go To Edit CSS
Figure 8 - Go To Edit CSS


Then click the "Display" button so that all the styles are displayed.

Figure 9 - Display the CSS
Figure 9 - Display the CSS


Now scroll down through the stylesheet, until you can locate some colors that match the current theme.

Figure 10 - Locate Colors Matching Current Theme
Figure 10 - Locate Colors Matching Current Theme


Step 6: Go back to the "Shadow layer" tab on the Admin -> Look & Feel panel, and clear out the text that you first input. Click apply after all fields have been cleared. Then input the following text into the Middle-Start, Middle-End, Center-Start, and Center-End shadow layer fields.

DIV Tags for Theme Colors
Copy to clipboard
Middle shadow start: <div style="background-color:#c2eef8;">
Middle shadow end:</div>
Center shadow start:<div style="background-color:#FFFFFF;">
Center shadow end:</div>

Figure 11 - Input DIV Tags
Figure 11 - Input DIV Tags


Click Apply to get the results displayed in the picture below. The outer columns (Middle layer) will be light blue, and the center column (Center layer) will be white. Of course the center layer was white to begin with, but it had to be explicitly set so as not to be overridden by the light-blue setting on the middle layer.

Figure 12 - Different Colors for the Middle and Center Layers
Figure 12 - Different Colors for the Middle and Center Layers


Again, intermediate to advanced users can go even further, and use smarty template tags along with HTML and CSS to focus the look for certain features and not others (for example change the look and feel of wiki pages, but not the calendar or articles).

Image Tiki Shadow Layers How To.pdf