My CSS is overriding my applied CSS class

Please register or log in to post to the forums
3 replies [Last post]
February 14, 2012 - 3:36pm
roryjasonmartin
roryjasonmartin's picture
Offline
Joined: 2011-05-27
Posts: 12
My CSS is overriding my applied CSS class

I am attempting to use the fusion accelerator and fusion core to create my own sub theme; however, when I attempt to apply a CSS class in the "edit skin" settings, I get no results. When I use firebug to check the css, the applied CSS class "skin" is being overridden by my default css file. My site is roryjasonmartin.com/blog. I am attempting to have the search box in the sidebar not have a background color. If you want to check out the code you would notice that both sidebar-second css class and the alternate-sidebar css class are being applied, but the alternate-sidebar is being overridden. Please advise on what might be the problem.

BTW the div id is "block-search-form"

Rory

image/png iconScreen Shot 2012-02-14 at 4.31.32 PM.png
Top
Tags:
February 14, 2012 - 4:47pm
#1
sheena
TopNotchThemer
sheena's picture
Offline
Joined: 2010-02-09
Posts: 1600

You'll want to learn a bit about CSS Specificity. This is a good article on the subject: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheri...

Your main theme's CSS that adds the block background color is more specific than the skin's CSS that removes the background color. The more specific CSS takes precedence and overrides the less specific CSS. Once you understand the concepts of CSS Specificity and Inheritance, you will be able to avoid this sort of issue intuitively in the future!

Cheers,
Sheena

Top
February 17, 2012 - 9:37am
#2
roryjasonmartin
roryjasonmartin's picture
Offline
Joined: 2011-05-27
Posts: 12

ok, I think I understand the concept of specificity to a degree, but I still can't get it to work. Could you give me some instructions on entering css classes on the edit skins screen. I have changed the css itself to be more specific; however, now it doesn't even call that css class according to firebug. So here is my question: If I changed my css class to .alternate-sidebar-inner .block or something similar; how do I call for that on the edit skin css class option? do I enter it as alternate-sidebar-inner-block or do I leave off the block? I can't enter the period as it is an unacceptable character.

Top
February 17, 2012 - 11:37am
#3
sheena
TopNotchThemer
sheena's picture
Offline
Joined: 2010-02-09
Posts: 1600

Rory,

The period is not actually part of your Class and does not need to be part of the text that you enter in the CSS settings on the block. Also, when I mentioned to specificity before, I was referring to the specificity of the CSS selectors you are building within your CSS rules, not the actual classes you are applying to your blocks. Without seeing specific examples of your code and the HTML on your site, I'm not sure whether the issue here is something odd that is happening within your site's settings or just a misunderstanding of how CSS selectors work.

I would suggest learning a bit more about the basics of CSS and writing CSS selectors. This is a good tutorial on the basics of how classes and IDs relate between HTML elements and CSS rules: http://css.maxdesign.com.au/selectutorial/

If you find yourself in need of more dedicated and detailed help with learning CSS or writing custom CSS for your custom theme, you might want to consider our Fusion Pro program. We regularly help Fusion Pro members better understand how to use CSS and assist with writing and troubleshooting custom CSS code.

Cheers,
Sheena

Top