Printable View
Hi All
This may be a really silly and stupid question...
But...
I realise we style everything with CSS and have gone some way to perfecting our site http://www.morvargh-sailing.co.uk but I have to reverse engineer everything, by that i mean i look at the source for each webpage on our site to find the CSS classes/classnames is this the way that everyone else does it? Or am I missing some magic list of classes somewhere???
Hopefully dont look too dim :D
Thanks for your help
Matt
Well, I'd be happy to share my workflow, for what it's worth.
Some basic things to keep in mind...
1. The outer shell (#header, #left, #main, #right, #footer, etc.) will always be the same, so if you create an empty CSS "skeleton", you can reuse that on all your projects.
2. For everything else, you can assign a custom class or ID to it. I do this instead of relying on the built-in classes (that start with "mod_" or "ce_"). If fact, I'm experimenting with a custom plugin that strips those out to keep the markup clean (experimenting because I haven't tested the performance hit this induces, if any).
Of course, everyone is different. For me, when I hand-code a template (for non-Contao sites), I tend to write all of the HTML in one fell swoop by referencing the design on one screen and writing the HTML in another.
Next, I go back and write a CSS "skeleton" for everything I want to style in the design. Skeleton meaning I write all of the selectors out but keep the rules blank.
After creating the skeleton I go back and fill in all of the style rules.
The thing is, by the time I get to the end of the HTML part, I don't remember exactly what code I wrote, so I reference my HTML code anyway when I do the skeleton part.
So the point is, whether I'm looking at my own HTML source code, or the rendered source created by Contao, very little changes in my process. The only difference is I don't have to hand-code everything when using Contao :).
I would definitely recommend using Firebug or similar DOM tool to help you see the entire HTML tree -- it's A LOT easier than looking at raw source code. Just open that on the left half of your monitor (or separate monitor if you have one), and your CSS file in the other half, and fire away.
Once you get used to it, you can be very efficient.
If you want to hunt for classes, the lil' javascript link on this website is super useful.
http://slayeroffice.com/tools/modi/v2.0/modi_help.html
Just save the link as a bookmark as it tells you to do, and just hit the bookmark whenever you want to use the tool.
As I LOVE firebug, this little tool is great as you mouse over an element, it gives you its class and parent elements/classes. And it's small enough that you can do this on a single screen.