Physical layout creation

[0be1]

At one time there was an image that showed the current layout of a default zc page and had all of the sections nicely laid out so you knew what and where to modify.

Granted the development tools for Firefox (webdeveloper and firebug) help a lot but I would still like to be able to have an old school layout. There may be times that I am not near a computer to layout any thoughts and may need to do so on paper.

Does anyone know:

1) where this post went to on the zc forums.
2) Any software (preferably FOSS) that can read a sites css files and dynamically build a hard coded image of the layout (or something similar).

I am new (somewhat) to designing with css and learn better with visuals. Trying to weed through a lengthy stylesheet seeing what each change brings is getting a little time consuming to do each time I want or need to make a change as well as helping in the forums with other users questions.

I hope what I am looking for is possible and that this post makes sense.

tia...

0be1

[charmedbytina2]

Obe1

That is a good question!

This information would be helpful to lots of folks!

Chapter 16 and 17 of the eStart book is a good starting point.

Tina

[0be1]

Tina;

Thanks, but that is not exactly what I was talking about and I do have the e-start book and there is not much help about whay I am looking for in the two chapters.

There used to be an old layout that was a screen snap and they had it all labeled nice like header, footer, left sidebox, etc. That way you could visually see what the stylesheet was referring to.

Thanks anyway

0be1

[stevesh]

I remember that layout guide, too, although it may be obsolete since Zen switched to CSS throughout.

[0be1]

I have figured out one (cheap way) of getting the solution. If you want to use it for any site you need to use the following add-ons for firefox:

web developer
screen grab

Once these are installed go to the page you are wanting to learn about the css layout and on your web developer toolbar choose information - display id & class details. You should now see the css elements. Now screen grab the screen contents (be sure to use complete page/frame option). Now you have a screen visual that you can see how each css element is layed out and controlled

Here is a screen shot of the zc 1.3.8 contemporary green layout. btw banners are turned off in this screen shot. If you need to know those css elements be sure yours are turned on.






I hope this helps someone else out and answers a lot of the zc css questions in the forums. Maybe the powers that be can sticky this post

Sincerely,

0be1