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

doc.tiki.org

Get Started

Admin Guide User Guide

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Elements
Mobile Tiki and Voice Tiki
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Tiki Manager
Trackers
Transitions
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki