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

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

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

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 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

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

See Also: Theme Layout Reference

<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

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

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

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.

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

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

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).

Tiki Shadow Layers How To.pdf