Page 1 of 1
I have the following HTML how do I style it?
Posted: Fri Dec 12, 2008 4:09 pm
by alex.barylski
Joomla generates this code for me:
Code: Select all
<dl id="system-message"><dt class="message">Message</dt><dd class="message message fade"> <ul> <li>The email address provided is invalid.</li> </ul></dd></dl>
I'm supposed to style it using CSS...ideally I want to remove the following element with a display: none
Unforutnately I have tried this to no avail:
Code: Select all
dl#system-message { background-color: orange; } dt.message { background-color: green; }
Background colors are just to make sure the CSS is being applied to the proper element.
Cheers,
Alex
Re: I have the following HTML how do I style it?
Posted: Sat Dec 13, 2008 1:57 am
by SteveC
Code: Select all
#system-message { background-color: orange; } .message { background-color: green; }
Re: I have the following HTML how do I style it?
Posted: Sat Dec 13, 2008 2:58 am
by alex.barylski
Unfortunately that won't work...as I only want to hide dt.message NOT dd.message
I do not have control over the markup either so that is not an option.

Re: I have the following HTML how do I style it?
Posted: Sat Dec 13, 2008 3:24 am
by SteveC
Code: Select all
.message dt { display: hidden; background-color: green; }
Re: I have the following HTML how do I style it?
Posted: Sat Dec 13, 2008 6:27 am
by nickvd
PCSpectra wrote:Joomla generates this code for me:
Code: Select all
<dl id="system-message"><dt class="message">Message</dt><dd class="message message fade"> <ul> <li>The email address provided is invalid.</li> </ul></dd></dl>
I'm supposed to style it using CSS...ideally I want to remove the following element with a display: none
Unforutnately I have tried this to no avail:
Code: Select all
dl#system-message { background-color: orange; } dt.message { background-color: green; }
Background colors are just to make sure the CSS is being applied to the proper element.
Cheers,
Alex
The first thing that I noticed was
Why two message classes? it may not cause a problem, but it's surely not doing anything productive
Code: Select all
dl#system-message { background-color: orange; /* does this rule work? */} dt.message { background-color: green; }
if the first rule doesn't work, then you have a rule that is being more specific, as in
assuming it does work, you could try to be more specific on the rule for the dt.message element.
Code: Select all
dl#system-message dt.message {display:none;}
I'd inspect the page using firebug or the webdev toolbar to see exactly what is going on with the rules.
Just to explain a little better..
Code: Select all
<div class="bar"><span id='foo'>FOOBAR</span></div>
Code: Select all
div {background:red;}.bar {background:blue;}div.bar {background:green;} div span {color:green;}#foo {color:blue;}div span#foo {color:red;}
You (should) end up with a green div with red text, as those rules are targeting the element(s) more specifically.
Re: I have the following HTML how do I style it?
Posted: Sun Dec 14, 2008 4:41 pm
by alex.barylski
Why two message classes? it may not cause a problem, but it's surely not doing anything productive
Ask the Joomla core developers...and while your at it ask them aout their understanding of MVC and software architecture, patterns, etc...
Anyways...enough rant...back on topic:
I will try those suggestions and keep my fingers crossed.

Re: I have the following HTML how do I style it?
Posted: Mon Dec 15, 2008 11:03 pm
by alex.barylski
God I hate Joomla...the developers have made some of the dumbest choices I have ever seen in software...but I digress...
Code: Select all
dl#system-message dt.message { display:none;} dl#system-message ul li { margin: 0px; padding: 0px;}
This works in hiding the dt...but the LI are not being styled properly.

Re: I have the following HTML how do I style it?
Posted: Tue Dec 16, 2008 10:23 am
by pickle
Try putting !important after the declarations, but before their respective ;
Re: I have the following HTML how do I style it?
Posted: Fri Dec 19, 2008 8:57 am
by Chris Corbyn
!important is the work of the devil

Re: I have the following HTML how do I style it?
Posted: Fri Dec 19, 2008 9:40 am
by pickle
Generally yes, but it helps to determine if the style is being overruled elsewhere.
Re: I have the following HTML how do I style it?
Posted: Sun Dec 21, 2008 5:03 am
by Chris Corbyn
Firebug FTW
