{"id":206,"date":"2008-02-23T17:34:31","date_gmt":"2008-02-23T22:34:31","guid":{"rendered":"http:\/\/www.opticality.com\/blog\/2008\/02\/23\/firefox-dom-inspector\/"},"modified":"2008-02-23T17:34:31","modified_gmt":"2008-02-23T22:34:31","slug":"firefox-dom-inspector","status":"publish","type":"post","link":"https:\/\/opticality.com\/blog\/2008\/02\/23\/firefox-dom-inspector\/","title":{"rendered":"Firefox DOM Inspector"},"content":{"rendered":"

Yesterday, I raved about XAMPP<\/a> in this post<\/a>. In there, I made the following statement:<\/p>\n

The other major thing that I don\u2019t like (but which I suspect is easily fixable with a CSS tweak) is that the Sociable plugin formats the icons in a list (one per line) rather than as an inline<\/em> string of icons, which other themes are doing correctly\u2026<\/p><\/blockquote>\n

So, today I spent quite a bit of time playing<\/em>. I enjoyed it, and it was instructive as well. I was able to easily change a bunch of things that I didn’t like about my previous theme. That said, I really like a lot of the Aspire (current) theme, other than the dark image background (which I can live with) and the note above about the sociable list not being inlined<\/em>.<\/p>\n

I decided to experiment in my new sandbox with the Aspire theme. I couldn’t find an easy way to see what css was controlling what element. A quick search said that the built-in DOM Inspector in Firefox<\/a> could help resolve this. It wasn’t in my Tools menu. It turns out it isn’t installed by default on Windows. I reinstalled Firefox, selected custom, and voila, I had the DOM Inspector.<\/p>\n

Once I inspected a page, it became obvious what the problem was. The Aspire theme defines an ID main<\/em>. Then, in addition to default definitions of ul<\/em> and il<\/em> (unordered list, and list element), it also defines #main ul<\/em> and #main il<\/em> (specifically, an unordered list which appears in the main block, and the same for a list element in the main block).<\/p>\n

The DOM Inspector showed me that the sociable.css was correctly being loaded, but that the way more specific #main<\/em> selector was being applied after<\/strong> the sociable.css was parsed. As annoying as it is\/was, there’s some logic to it. If a node can be defined ultra-specifically, and there is a css definition associated with that, then perhaps, you really want that to apply.<\/p>\n

Unfortunately, the specific definition had display: block<\/em> instead of the desired display: inline<\/em>.<\/p>\n

I’ll spare you the stupid gymnastics I performed, trying to over-ride that behavior. Suffice it to say that along the way, I tried doing something like this:<\/p>\n

#main.sociable ul<\/p>\n

ul#main.sociable<\/p><\/blockquote>\n

among other utterly useless attempts to get even more specific<\/em>.<\/p>\n

I broke down and sent a message to the current maintainer of the sociable plugin. Then, two minutes after sending him the message, while browsing formal docs for css, I stumbled on something.<\/p>\n

In some of the attributes in the sociable.css file, he added !important<\/em> to the end of the definition, in others, he didn’t. In the docs, I saw that normally, !important<\/em> is used to signal to the browser that this particular attribute is important, and should be respected over a defaulted value. It’s primary use is to allow users<\/strong> to have stylesheets which over-ride authors<\/strong> stylesheets.<\/p>\n

So, I thought, let’s experiment and add !important<\/em> to the few attributes that weren’t already tagged as such (specifically, the display: inline<\/em> one!). Voila! Now, even though the browser sees that #main ul<\/em> comes after .sociable ul<\/em>, it also knows that .sociable ul<\/em> said that display: inline<\/em> was !important<\/em>, so it retains it!<\/p>\n

There may be a better way to solve this problem (after all, this required me to edit the author’s version of sociable.css, which would get wiped out the next time I upgrade the plugin), but, without my sandbox (courtesy of XAMPP), I wouldn’t have found this one. In addition to XAMPP, I now also need to thank the Firefox DOM Inspector. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, I raved about XAMPP in this post. In there, I made the following statement: The other major thing that I don\u2019t like (but which I suspect is easily fixable with a CSS tweak) is that the Sociable plugin formats the icons in a list (one per line) rather than as an inline string of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4,2],"tags":[23,196,197,21,194],"class_list":["post-206","post","type-post","status-publish","format-standard","hentry","category-4","category-2","tag-blog-software","tag-firefox","tag-plugin","tag-wordpress","tag-xampp"],"_links":{"self":[{"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/posts\/206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":0,"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"wp:attachment":[{"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/opticality.com\/blog\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}