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.
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:
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.
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: http://pinkmonkeysolutions.com/the-resources
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.
Thanks,
jr
#section2 a, #section2 legend, form.form-login .inputbox, ********#section2 h3********, #main-body ul.menu li.active a, #main-body ul.menu li.active a:hover, #main-body ul.menu li.active .separator, #main-body ul.menu li.active .separator:hover, #main-body ul.menu li.active li.active a, #main-body ul.menu li.active li.active .separator, #main-body ul.menu li.active li.active li.active a, #main-body ul.menu li.active li.active li.active .separator, #main-body ul.menu li a:hover, #main-body ul.menu li .separator:hover, .roktabs-wrapper .dark .roktabs-links ul li.hover, .roktabs-wrapper .dark .roktabs-links ul.roktabs-top li.active, .roktabs-wrapper .dark .roktabs-links ul.roktabs-bottom li.active, 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!
Thanks for finding that! I adjusted the style to:
#section2 h3#resource-listings {}And now it works.
Thanks Apostrophe!
jr