Post on 10-Jul-2015
description
Picture of my kid, Nikhil.
Added it here, because I can. Plus he's fun. ;-)
Zen
Using Zen Theme to design & build a website.
By Mike Stewart
Zen
What I'm going to cover How to design a site without (much) coding
Why use Zen? Standards CSS SEO Good framework.
Exposes Drupal through css classes (frontpage, navbar, node view, edit, etc)
Well Documented (better in some ways)
Zen
What is Zen? Its a theme uses css for layout
Fluid layout (expands to screen size) Fixed layout (pixel perfect, negative margins)
Subthemes Build upon, or override Zen (base)
Zen
How we built DrupalCampLA Wireframe
Had to move sidebar Needed to move navbar to top.
Choice 1: move navbar to/near #header Choice 2: move header as child of #main
I chose #2 for better SEO And added a #full-width-wrapper so I could create illusion of
navbar across width of screen. It's in fact a child of #main
#main
Zen
#header
#sidebar-left
#content#sidebar
-right
#footer
How it looksin browser
layout.css#navbar
Zen
#header
#idebar-left
#content
#sidebar
-right
#footer
What is sent to browser
page.tpl.php#navbar
Screenshots added after presentation
Using Firebug to view HTML structure
Screenshots added after presentation
Note blue & yellow area here, due to mouseover in HTML area. This is the calculated layout based on css rules.
Screenshots added after presentation
Follow README.TXT to create directory structure & copy of appropriate files.
Screenshots added after presentation
For DrupalCampLA I edited page.tpl.php to move header to child of #main
Found code by searching for css ID found in firebug. Moved the whole <div> (and any related PHP)
Screenshots added after presentation
Layout.css control position of elements on browser screen. It's important that the position of everything is well defined.
No <div> should overlap. Height of elements above #content need to be
defined. Width of sidebar(s) and content need to be defined.
Div's are not floated (for position), Negative margins force them into position.
Screenshots added after presentation
Screenshots added after presentation
Cool IE 5-6/7 targeted
hacks
Zen
Questions?