Drupalcamp LA2008 Zen Theme

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


Note blue & yellow area here, due to mouseover in HTML area. This is the calculated layout based on css rules.


Follow README.TXT to create directory structure & copy of appropriate files.


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)


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.



Cool IE 5-6/7 targeted

hacks

Zen

Questions?

Technology

Drupalcamp LA2008 Zen Theme