Custom css & specificity - utterly confuzzled
-
-
- Laura Sage
- Sr. Rocketeer
- Posts: 147
- Thanks: 0
-
I followed the instructions on how to create a custom css file to avoid update issues in the future. It's sort of working. But, while I understand intermediate css, this specificity thing is baffling to me. I can't find anything that explains how to actually order all the attributes/elements/etc. properly in order to get things working properly. I've gone with the shortcut of trying to apply !important to the logo styling, but it's not being applied over the base template.css. I've checked this in Firebug for Firefox, and indeed, my custom styling is not being used.
My issue here is with the logo area in particular (though I'm having template-specific issues as well).
I need help with this, I'm afraid. Pretty please?
Here's the site: http://www.yourbusybee.com/rmsbeta
Thanks in advance.
~Laura
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
specificity means for a style to take precedence over another the elements selected must have a more specific css path tot he element
e.g., for this .logo-type-fresco #rt-logo to be overridden you should refer to it like so body .logo-type-fresco #rt-logo
-
-
-
- Laura Sage
- Sr. Rocketeer
- Posts: 147
- Thanks: 0
- Wow. Would one need to go all the way back to body for all of these? That seems to the newbie eye to be a pretty bloated way to write code of any sort!
-
-
-
- Laura Sage
- Sr. Rocketeer
- Posts: 147
- Thanks: 0
-
Unfortunately it's still not working. I can see that mycustomstyle.css is loading for my social buttons, but it doesn't seem to even be showing up as crossed out in Firebug for my logo. I'm at my wits end with this. I LOVE the idea of not having to worry about files being overwritten when upgrades occur, but I just can't get it to work!
Now, admittedly I've had problems with my cache lately, so perhaps YOU see the correct stuff? But I've turned all zipper and cache items off, disabled everything related to those that I could find in the plugins, have cleared the Joomla cache multiple times, and have been hitting Ctrl+F5 to clear my browser cache when refreshing the page, and NOTHING is making these changes show up.
ARRRRGHHHHHH
I've basically wasted an entire work day just trying to make this change work through this separate stylesheet instead of simply modifying the template.css as I would have ordinarily done. It's just that this SEEMS like such an ideal solution (and I wish there was a way to do this for ALL modifications, like the ones I made in order to add the social buttons).
HELP? PLEASE???
~Laura
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
I missed that the logo-type-fresco is a class in the body tag so ignore my previous comment.
use this:
.logo-type-fresco .logo-block #rt-logo {width: 220px;height: 90px;}
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
this is a very good explanation of css specificity
coding.smashingmagazine.com/2007/07/27/c...ngs-you-should-know/
-
-
-
- Laura Sage
- Sr. Rocketeer
- Posts: 147
- Thanks: 0
-
cdavis411, THANK you for the correction! That's done the trick!
And I've looked through that article several times today, but it's just not clicking yet. Perhaps I'm too tired right now or something.
-
Time to create page: 0.068 seconds