First I made a PDF (see below), but Rowan linked a brilliant Firefox extension which does the job even better:
https://addons.mozilla.org/en-US/firefox/addon/655
It develops the view you need, with only your fields, and your CSS files.. So rather than making a PDF, I'd recommend people install and use Firefox and this extension as part of building their own Zen sub-theme. It's perfect really.
Zen Layout PNG I was having trouble 'visualizing' a customization of Zen, and realized I needed a simple model to have to refer to- does this exist already? When you first install Zen, this is the layout... I thought others might find it useful. The source file is just hosted temporarily. If anyone likes it and would like to offer it a permanent space? 'Source' file: Zen Layout Graffle - Omni Graffle is a mac tool for building flowcharts and diagrams, etc.
| Attachment | Size |
|---|---|
| zen-layout-tiny.png | 7.62 KB |
| zen-layout2.png | 98.55 KB |
Comments
thanks!
This is a nice resource and I'm sure it'll help loads of people understand Zen a little better. I hosted it quickly in ImageShack:
--
Nicolas
NIce!
This will be very helpful for people. However, it should probably also contain the nav bar and regions (left, right, content-top, content-bottom). I'm not sure if it was your goal to be complete or just to give people an idea of "what's in there", but if we're going for completeness, you'd want these in there.
Nice work though! I'll open up OmniGraffle and take a shot at it myself if I get a chance.
-= Jeff Robbins | Lullabot | Drupalize.me =-
sounds good!
Maybe you can start with heather's diagram, so you don't have to start from scratch. Thanks jjeff for starting the Zen theme, I loved it at the beginning then had some trouble with really long content tables breaking the layout and stopped using it. I recently started using the new version and it is absolutely amazing!! I was very impressed on how quickly you can do subthemes, and it generally is a very nice complete project. Maybe its time to add Zen to the core?
--
Nicolas
@ mm yeah, i will add more
@ jjeff mm yeah, i will add more to the nav bar. (i'll do that today when i get home :) i was trying to get div with IDs... and then i added some
<
div class> info to show there were some classes inside the beefier areas.
@ ipwa, yeah i was able to upload the image files here in drupal. but for the long term the source code of the graffle would need to be available to make changes to. so as it is, it's just hosted in a temp place.
need server space?
I can hook you up with an ftp account on my shared hosting server if you want to upload the source file. I use graffle, and it would be really handy to have the original file. I'm on the process of getting my virtual dedicated server, but won't have that until next week.
I had a slight sense of deja vu when I saw your diagram, so I delved deep into my hard drive and found this:
http://ipwa.net/assets/homepage-diagram-zen.pdf
It was originally uploaded by someone else, but couldn't find the original post. I don't know what version of Zen this diagram is based on, but its from when Zen had a default style (blue primary links).
Graffle is great, your diagram looks very nice and clean, maybe add it as a link in the Zen project page or documentation once the diagram is finished?
--
Nicolas
yeah! that is exactly what I
yeah! that is exactly what I had been looking for, ipwa! and with color!
I figured someone else had done this before, possibly as part of developing Zen.
and the color version is much better, yep, that pretty much looks a bunch better than mine. Also, using the full line div id="container" class="clear-block" is better than just saying ID container, like i did.
I will double check each item, does it look like the one ipwa submitted is out of date? ( the latest version of Zen doesn't have "squeeze" anymore... i think?) i made mine off of a fresh default installation of drupal and default installation of zen. hence, no right sidebar.
i will start now to update the version I did based on the color one.
Good stuff
Even having this just on Flickr would be of use.
Web Development in Nottingham, UK by Kineta Systems
Web Development in Nottingham, UK by Kineta Systems / Follow me on Twitter! @NikLP
updated the layout
updated the layout .png
http://groups.drupal.org/files/zen-layout2.png
I updated the source graffle : Zen layout 2 . graffle
- Added a comment layer, for others who wish to use or edit it.
- Separated out regions onto their own layers - giving them a shadow effect, to make them stand out.
- Identified a default story node with 2 comments to use as the model.
- I couldn't figure out the color system of the old diagram... So i just stuck with grey for the 'inner' divs, which makes it easier to see those things which fit in main regional dividers.
@NikLP, yeah I thought of flickr, but it only hosts image files. and anyway groups.drupal allows us to post images... it's that graffle i wanted to host... but this free file site for the .graffle seems OK for now.
@ jjef: you mention "it should probably also contain the nav bar and regions (left, right, content-top, content-bottom)" ... i made the diagram from output HTML of a default installation of drupal and Zen. are you referring to template regions?
I guess this diagram has its limitations, but I suppose the simpler the better?
Yup
Navbar you had actually... I just missed it. But yes, I was thinking it would be good idea to give designers an idea what regions there were available and where they got nested. For instance, (and I'm only going from memory here,) #content-top and #content-bottom are actually nested inside of #content-inner above and below #content-area, respectively. But if I can't remember where they go, it would certainly be helpful to have it illustrated for others! :-)
-= Jeff Robbins | Lullabot | Drupalize.me =-
I think this is a great
I think this is a great idea. Sometimes a printed sheet on the desk works best. Thanks.
Missing regions
Heather, if you don't have anything in a region, Zen won't output the HTML for that region. It would probably be easier to get the divs from page.tpl.php.
- John (JohnAlbin)
- John (JohnAlbin)
ah okey... i getcha. i
ah okey... i getcha. i thought i should just go with the lowest common denominator, but i see your point. better get all possible regions in there. i'm currently up to my eyeballs, but i will try out what you suggest- and get the other regions in.
Easy to remove 'em once we make 'em
You've got a good point that it's probably best not to attack people with a diagram of 1,000 divs. But maybe we can provide a couple of diagrams -- one that's a "typical" setup and another that shows everything that might ever happen.
lol... I say "we", but I should probably just say "you".
Keep on rocking, Heather!
-= Jeff Robbins | Lullabot | Drupalize.me =-
Useful!
Thanks, Heather!
I've been (slowly) redesigning my site using Zen, and this is a great visual resource. I did have the older file mentioned above, but this version with all the new Zen niceness is really useful!
Wicked! :)
Reminds me of this Firefox
Reminds me of this Firefox extension: https://addons.mozilla.org/en-US/firefox/addon/655
Hm!
Yeah I've had that installed for years, but I always forget about it! Thanks for the reminder :)
Web Development in Nottingham, UK by Kineta Systems
Web Development in Nottingham, UK by Kineta Systems / Follow me on Twitter! @NikLP
wow! that extension is
wow! that extension is perfect :) thank you! okay... this kinda makes my PDF moot here, heh. but great~!
Thanks for the diagram!
Hey thanks for the diagram. I had the pdf mentioned earlier and was about to fire up photoshop when I found yours. I vote for complete divs and regions, a graphical representation of page.tpl.php I am going to download the latest rendition you have uploaded.
Thanks again!
Craig Bertrand
Craig Bertrand
this firefox extension,
this firefox extension, which rowan linked above, has proved far far more effective than this here PDF i made.
https://addons.mozilla.org/en-US/firefox/addon/655
the great thing is, it develops the view you need, with only your fields. instead of making a PDF, which we'll find hard to keep up to date... i think we should recommend people use firefox and this extension as part of building their own zen theme.
Man not ready for FF3
Too bad its not ready for FF3 yet. Soon hopefully!
Thanks for the tip.
Craig Bertrand
Craig Bertrand
Not ready for FF3 but she's working on it.
You will be pleased to know that I have a working beta for FF3 from her which seems to be fine.
So all should be good soon.
Zen v2 version
For anyone who stumbles on this looking for a layout example of Zen version 2 I posted one here but with a reduced amount of containing divs.
Hope it helps someone.