just starting out

Hi all, I’m just starting out with modx and templates. There is a lot to learn, but I love the power (quite honestly it’s gone to my head ...

I humbly submit my first try converting a CSS Zen Garden CSS (Contemporary Nouveau) to use with modx:
http://www.lofland.org/modx/MODx-0.9.1/

Obviously I am not done, the text of the images is all wrong and I’ve yet to really personallize it. I also am having a problem on some of the "shorter" content pages - the right side extends past the end of the page - when it should define it if the page is shorter than the right hand content.

When I’ve completed the work I’ll happily upload it here - for now I’m looking for some feedback.

advTHANKSance!!
Eric

Looks like the sidebar column on the right is either absolutely positioned (taking it out of the flow of the rest of the page), or it is floated right without the div below it set to clear:both; in the CSS.



As you can see, the sidebar travels to the bottom of the page without bringing the rest of the template with this. To fix this, avoid using absolute positioning for dynamically generated lists if possible, or after your floated div, remember to clear:both; on the next div!

-sD-

Thanks for your contribution,
However, did you ask the author to adapt his design?
CSS zen garden aren’t free design and you are not allowed to copy them.

You may not use any of the graphics (image files: GIF, JPG, and PNG) on the Zen Garden elsewhere without the original designer’s written permission. There are no exceptions to this. The Garden is about learning from other people’s work, but not using it uncompensated.

http://www.mezzoblue.com/zengarden/faq/
I think it’s important to mention

D’oh!! I didn’t see that... Thanks for the heads up, I’ll table this and start from scratch when I go to "production". For now however, I’m going to use this for my learning excercise - I still have a major server upgrade in my future and this is only intended as an exploration of what is possible.

xeres makes a great point.
CSSZenGarden is meant to be a showcase of what can be done using XHTML and CSS, and also as a tool for learning CSS. You are encouraged to download a copy of the XHTML and a copy of the designer’s CSS file (there are links for this on each design) but you are forbidden from using the CSS and/or the graphics without the designer’s permission.

Don’t let this discourage you, because everything you have learned from disecting that CSS file and it’s images will be useful in creating your orignal CSS and graphics.

www.csszengarden.com was the premier resource for me when learning CSS. I used it almost exclusively. It took me from knowing nothing about CSS to where I am today. I feel comfortable designing style sheets from scratch and even being a resource for those with questions. My advice... Get started on a new (original) template for your MODx site as soon as possible (It is never a good idea to offend a fellow designer by stealing his or her work LOL!), but don’t get rid of everything you learned by examining their work!

good luck with your styling,

-sD-

If we could get zengarden to power their site on modX

thanks for the encouragement sD, while I’ve read the book on CSS, I haven’t really done anything but tweak it. I’ve never created anything from scratch. How do you work? I’m imagining drawing what I want on paper, then in photoshop, then slicing it up and doing the actual CSS last.

@elofland: If you’d like to drop the designer a line, he can be reached here: http://www.monc.se/. His name is David Hellsing and is a fellow countryman (a Swede). I’ve talked to him once or twice over the phone and he’s a nice chap, very obliging. So don’t be afraid to ask him if you still want to use (at least parts of) his design. The chance that you get an affirmative answer is bigger than you might think.

Mats

Quote from: elofland at Apr 03, 2006, 09:05 PM

thanks for the encouragement sD, while I’ve read the book on CSS, I haven’t really done anything but tweak it. I’ve never created anything from scratch. How do you work? I’m imagining drawing what I want on paper, then in photoshop, then slicing it up and doing the actual CSS last.

That is almost it exactly. I usually open photoshop when I get an Idea, and then sort of lay out what the index page would look like (just graphics, layout of sidebar items, etc... but no content). When I have something I like, I slice it up into 3 images for the head, body, and foot of the page, then make the graphics for sidebar items and other items if necessary. The Key to good CSS is starting with good XHTML, so make sure your code is logical and that it validates before starting to style it. you can use the W3C validator to upload your template file.

next, start with the basics. Look at some other peoples work to see how a CSS file should be organized. Remember the "C" stands for cascading which means that a style you apply to a higher occuring element gets cascaded down and transfers automatically to the elements under it. I start with the *html, body, a:link’s etc... and declare them right away.

Feel free to reference any of my stylesheets. I would discourage copying and pasting, because when I personally do that, I learn less than when I type the style elements and look up the ones I don’t know at the W3 Schools CSS reference .

you can find my current stylesheet and XHTML 1.1 template here:
http://scottydelicious.com/assets/templates/sdposter/sdposter.css
http://www.scottydelicious.com/assets/templates/sdposter/sdposter.html.txt

if you would like to review any of my published templates you may view the list here:
http://www.scottydelicious.com/assets/templates/

please feel free to ping me with any questions or hangups you run into. you can find my Instant Message info in my forum profile.

-sD-

Something you should keep in mind before ever using ANY CSS Zen Garden code for a production site. Because of the stringencies of the rules for that site, where NO html is allowed to be changed on a page, a lot of absolute positioning is used. This is very unwise and cross browser unstable. Now, probably most of those design layouts can be redone to be floated with a lot of grief, heartache and cursing at (you guessed it) IE.

The coding for those designs is NOT meant to be put into production-- they’re just designers stepping up to the plate and meeting the challenge of the rules that exist for a design to be posted to that particular site.

Use it as a visual inspiration but don’t EVER emulate the css code you see there. It is, for the most part, a mess.