CSS stylesheet growth
Hi all,
I'm using Drupal 5.1. I am impressed by its power and versatility, and I am getting the hang of it, after a relatively short span of time. I know how to use Content Types, I can set up Views, I play around with user access privileges etc., no problem, I'm getting there.
But there is one part of Drupal which is giving me trouble, and which is giving me conceptual worries, namely the styling of its output.
I just checked the page source in my browser, and there are 14 (fourteen) css stylesheet files active... Where o where am I supposed to find where a particular colour or this or that font size originates from??? And where is that unwanted padding coming from? Quite a few of these styles are in my template's style.css, thank God, but what about all those other 13 .css files? Undocumented css files are already a big pain in the neck to understand, but when there are 14 of them, it becomes umm cumbersome.
It is a good tradition that Drupal is heavily documented, and that most module makers include a readme.txt with their much appreciated packages. But what is lacking, is an instrucitonal sheet with the workings of the various styles, preferably even a few marked-up screen shots, with a clear example of what a "#secondary a.active:hover" or who knows which of the hundreds of other styles is actually doing.
I feel there is something wrong when I can set up a nice list as the result of a complicated View query in a matter of minutes, and then have to spend hours to find out where this or that darn font size is coming from...
If anyone could point me to a good survey of the Visual Results of the various styles, I would be ever so grateful.
Ludo
If you use Mac you could try
If you use Mac you could try this very powerful app called Xyle Scope. Just enter your URI and click anywhere on the web page and it will tell you where exactly the styles are coming from (e.g. blog title "A" is controlled by this line of code in stylesheet B). Then you could edit the CSS and see your web page changes in real time. It saves me hourssssssss of work :)
You could also install the Firefox developer toolbar, but I haven't used it much so you'll have to try it out and see if it fits your needs.
Good luck ! :)
--
I'm from Hong Kong. My profile shows Thailand because Hong Kong was not available from the country list.
or use firebug..
for firefox you can use the fantastic extension "firebug" - www.getfirebug.com
I'm not a Mac user, so
I'm not a Mac user, so apparently the Xyle Scope approach is not available to me - unless there is a PC version, which Google has not yet located.
I am using Firebug in Firefox, and it does solve some of the CSS mysteries, but it does not tell me where, in which of my 14 CSS files, a certain style is located. It highlights a part of the generated source code, and it tells me, for instance, "div class = node". OK, swell. But where is that node class defined? For "node" it's not too difficult, but when things are not named, when you just get html markup in the sense of "bgcolor =#6666CC", where is that defined??? You can't even make see the difference between CSS originated styles and hardcoded PHP "stylish" parts. Hmm, I trust that Drupal doesn't do that last one, but still.
So, yes, Firebug is a smallish improvement, but it's far from what I am looking for. A genuine "CSS debugger", that would be soooo nice to have... Or, as long as that is not there, a nice and clean set of screen shots where the result of styles is shown, with a connection to their origins...
* sigh *
Ludo
of course firebug will show ...
if you are using firebug version 1.0 the css line number will be shown.
see screenshots here http://www.getfirebug.com/css.html
an alternativ is using "DOM Inspector". Firefox Menu Tools -> DOM Inspector or pressing "CTRL+SHIFT+I"
I agree...
I agree that this can be a bit of a pain... the Firefox 'web developer' extension is great. You can view all of the style sheets for a page, click on any element and see all of the css for that element including the various stylesheets, etc... I haven't tried Fire Bug yet but am about to check it out!
That said... I totally agree with your post... Drupal has been great for me except for this exact issue!