History: Shadow Layers

Source of version: 19 (current)

^This should be moved to themes.tiki.org^


%%%
!!!!{img src=lib/images/icons/pdf.png max=50} [dl284|Tiki Shadow Layers How To.pdf]

[http://doc.tiki.org/tiki-index.php?page=Theme+Layout+Schema|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).

{img fileId="272" max=550 stylebox=border desc="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.

{img fileId="273" max=550 stylebox=border desc="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.

{img fileId="274" max=550 stylebox=border desc="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.

{img fileId="275" max=550 stylebox=border desc="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.

{img fileId="276" max=550 stylebox=border desc="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.


{img fileId="277" max=550 stylebox=border desc="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):

{img fileId="278" max=550 stylebox=border desc="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:  [http://doc.tiki.org/tiki-index.php?page=Theme+Layout+Schema|Theme Layout Reference]

{CODE(caption="Start and End Shadow Layer DIV Tags" colors="HTML" ishtml="1")}
<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>
{CODE}

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

{img fileId="279" max=550 stylebox=border desc="Figure 8 - Go To Edit CSS" }

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

{img fileId="280" max=550 stylebox=border desc="Figure 9 - Display the CSS" }  

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

{img fileId="281" max=550 stylebox=border desc="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.

{CODE(caption="DIV Tags for Theme Colors" colors="html" ishtml="1")}
Middle shadow start: <div style="background-color:#c2eef8;">
Middle shadow end:</div>
Center shadow start:<div style="background-color:#FFFFFF;">
Center shadow end:</div>
{CODE}

{img fileId="282" max=550 stylebox=border desc="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.

{img fileId="283" max=550 stylebox=border desc="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).

!!!!{img src=lib/images/icons/pdf.png max=50} [dl284|Tiki Shadow Layers How To.pdf]