Treehouse: Grow your CSS skills. Land your dream job.

Joomla inherited CSS attribute problem

  • # November 17, 2009 at 2:54 pm

    Hi all,

    I’m have a Joomla template driven website that I’m trying to write a CSS style for.

    The existing template defines a style for the <h4> tag that I like. However, I would like to define the same style for the <h3>. I have tried doing this and have succeeded with every element except the color of the font. I’m convinced that the <h3> tag is inheriting the font color from another style but I can’t figure out how to override it.

    Here is the page:

    Notice the <h4> heading : "I Do Wedding Services". That is the existing template style.

    Now go down to the <h3> heading: "Aspen Vail Ice". This is the new style I created. I would like to be able to change the font color to the Pink I use elsewhere. This is where the attribute is being overridden.

    Here is the style I wrote and included in the template.css file of the site template:

    h3#resource-listings {
    color: #86CFC2;
    font-family: “Lucida Grande”,Helvetica,Verdana,sans-serif;
    font-size: 14.4px;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: 18.7px;
    text-align: start;
    margin: 0 0 10px 0;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #cccccc;

    I’ve tried to figure out using Firebug where the font color is being declared, but have not had success. I’m not that great with Firebug so the fact that I can’t find it isn’t any real surprise to me. :)

    If anyone can help me out it would be greatly appreciated.



    # November 17, 2009 at 3:07 pm

    Try changin it to #section2 h3#resource-listings – just a thought.

    # November 17, 2009 at 3:35 pm

    It’s set to white in the styles in the document head (the bit wrapped with stars):

    #section2 a, #section2 legend, form.form-login .inputbox, ********#section2 h3********, #main-body a, #main-body a:hover, #main-body .separator, #main-body .separator:hover, #main-body a, #main-body .separator, #main-body a, #main-body .separator, #main-body li a:hover, #main-body li .separator:hover, .roktabs-wrapper .dark .roktabs-links ul li.hover, .roktabs-wrapper .dark .roktabs-links ul.roktabs-top, .roktabs-wrapper .dark .roktabs-links ul.roktabs-bottom, span.number, span.inset-left, span.inset-right, span.dropcap, span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey {color: #ffffff;}

    Man, you have a lot of divs on the page!

    # November 17, 2009 at 4:09 pm

    Yes, those Joomla templates are loaded with DIVs. That’s why I try to not use Joomla where I can avoid it. The templates are overly complicated.

    Thanks for finding that! I adjusted the style to:

    #section2 h3#resource-listings {}

    And now it works.

    Thanks Apostrophe!


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.