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).
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.
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.
Step 3: Go to the "Shadow layers" tab on the Look & Feel panel. Select the "Shadow layer" checkbox and click apply.
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.
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.
Here is the applied result of Step 4, as seen from the Tiki "HomePage" (home page of the wiki feature):
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
<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.
Then click the "Display" button so that all the styles are displayed.
Now scroll down through the stylesheet, until you can locate some colors that match the 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>
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.
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).