Recent Topics

[3.3.3] overriding list bullet styles -- SOLVED

Started by on Oct 10, 2010 – Contents updated: Oct 10, 2010

Oct 10, 2010 01:20    

My b2evolution Version:

Running 3.3.3 released on 12/15/09.

Website in question: http://carymathews.com
Style sheet: http://carymathews.com/blogs/skins/evocamp/style.css

The "#midcontent" id specifies style for the middle sidebar of the site. It specifies a background-image for a sub-unordered list bullet:

Code

#midcontent ul li ul li {
list-style-type:none;
padding-left:15px;
margin:0;
background:url(img/zekebullet.gif) 0 5px no-repeat;
}

I've added a Universal Item List widget to the middle sidebar with a CSS class "witty". This universal item list will display a single random post of the "sidebar post" type. I want to display this single post without any bullet or image.

I've added a ".witty" selector to my style.css to accomplish this:

Code

/* *** Does not work *** */
.witty ul li {
        list-style-type: none; /* ul - changes bullet style */
        list-style-image: none;
        background-image: none;
}

I've been playing and can get the background color to change:

Code

/* *** Does work *** */
.witty ul {
        background-color: green;
}

But I cannot figure out what I need to do to override the prior id selector for this single instance of a sub-list item.

I'm sure there is a simple solution, but I'm starting to go cross-eyed trying to understand the cascading nature of CSS! Thank you in advance for any help provided.

EDIT: added b2evo version in Subject line
EDIT: added SOLVED notation in subject

Oct 14, 2010 01:29

Found a solution:

Code

#midcontent .witty ul li {
        background-image: none;
 
}

By specifying the id, then the class, then the selectors, I was able to override the default background image. I hope this can help someone out in the future.


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.