Loading...
 
Skip to main content

Tiki Design


Shadow Layer Example, and Theme Layout Schema

posts: 6 Canada

Good morning fellow Tikists,

Can someone point me to an example of a complete Tiki 5 Shadow Layer page? I have found the lovely Shadow Layer admin tab and see Main shadow start: Main shadow end: Header shadow start:, etc. but don't know how to use them.

Also is there an updated view of the Theme Layout Schema? I see the page

http://doc.tikiwiki.org/tiki-index.php?page=Theme+Layout+Schema

noticed the table-less layout diagram at the bottom of the page but don't know if that's current or applies to all themes or what. Also it's a little mysterious and opaque to me, does anyone have a fuller description of any kind?

Cheers,

-Kent

posts: 254 Japan

I just know of one site offhand that uses the shadow layer to get additional divs for styling purposes - a music site done by luci. (And will update this post when I have a chance to look for the URL.)

Turning on shadow layers simply activates additional div tags at the start and end of main areas of the page, such as each module, the header, middle section, footer and so on. Then either outside CSS rules can be added to give those new divs some properties (in the theme stylesheet or a custom.css file) or some in-line CSS code can be added in the shadow layers textareas in the Look and Feel admin page, to get the desired effect.

You could just activate the feature and try adding an image or some html or text, etc., to give it a test.

Yep, definitely some docs and a tutorial would be good to have for this.

About the Theme Layout Schema page, the bottom image is still valid as a schematic of the basic page construction. This is the default columns layout code and shouldn't have to be touched (but can be overridden in theme stylesheets as needed). Of course new divs have been added on top of that to enable more flexibility and so on. All of the themes included in the Tiki package use this method (lite.css) except for the Dark Shine theme that uses a table for layout. We want this theme to go to lite.css also but haven't figured out how to do it yet.

-- Gary


posts: 2 United States



There is now a basic Shadow Layer Tutorial at Tiki's Documentation site. I'm sure there
are more advanced ways of using the shadow layers, but the tutorial should suffice as a start.

-Ed

Kent Barrett wrote:

Good morning fellow Tikists,

Can someone point me to an example of a complete Tiki 5 Shadow Layer page? I have found the lovely Shadow Layer admin tab and see Main shadow start: Main shadow end: Header shadow start:, etc. but don't know how to use them.

Also is there an updated view of the Theme Layout Schema? I see the page

http://doc.tikiwiki.org/tiki-index.php?page=Theme+Layout+Schema

noticed the table-less layout diagram at the bottom of the page but don't know if that's current or applies to all themes or what. Also it's a little mysterious and opaque to me, does anyone have a fuller description of any kind?

Cheers,

-Kent

posts: 254 Japan
Ed wrote:



There is now a basic Shadow Layer Tutorial at Tiki's Documentation site. I'm sure there
are more advanced ways of using the shadow layers, but the tutorial should suffice as a start.

-Ed


Nice job on the tutorial, although in its example of shadow layer use, I wonder why you wouldn't just change the background colors of the existing #middle and #tiki-center divs, which would have the same effect, if I'm not mistaken. But the procedure for using the shadow layer option is described well.

-- Gary