Unremovable bullets?

Does your website, theme, or plugin have bullet points that you don’t want and you simply cannot get rid of them?

Little arrows in the Default Theme

Little arrows in the Default Theme

No little arrows in the entry post content

No little arrows in the entry post content

List-style-type: none

You’ve loaded firebug and checked thoroughly and this css code is definitely there:

... li {
list-style-image:none;
list-style-type:none;
}

This happens in the default theme and also recently someone had a similar problem using  my ical events plugin with the mango orange i3theme.

List Item Before Content

In the default theme, this code defining some content before the list item, is creating those nifty little arrows:

.entry ul li:before,
#sidebar ul ul li:before {
    content: "\00BB \0020";
    }

So the fix is to override those css specifcations for all, or just the plugin in question.  For example for the default theme, my plugins css now has:

#sidebar .amrcol  li:before,
.entry .amrcol  li:before {
        /* remove list bullets in the default theme and similar themes */
        content: none;
}

List Item Background Image

Upcoming events bullets or List styles in the Mago Orange theme

Upcoming events bullets or List styles in the Mago Orange theme

In the MangoOrange i3theme this css code defining a background image  is affecting your list items

#sidebar-right ul li,
#sidebar-left ul li {
    background:transparent
    url(images/bullet-orange.gif)
    no-repeat scroll 0 0;


My plugin now removes the bullets just for the lists within its code, but leaves those little arrows for the other widgets in the sidebar.

#wcompprop0 ul li,
#calprop0 ul  li,
#compprop0 ul li {  /* remove list bullets */
	list-style: none;
	text-indent: 0;
	padding: 0;
	margin: 0;
	background: none;
    }

If you still wanted the little arrows, then you need to add back the spec for the field that you have chosen as first in that row, and maybe fiddle with the spacing.

#sidebar .amrcol li.EventDate:before {
	content: "\00BB \0020";
}
No little arrows or bullets in the sidebar

No little arrows or bullets in the sidebar

2 Comments

  1. Posted August 5, 2009 at 2:12 am | Permalink

    The plugin’s own css is not over-riding my theme’s css. How can I make an exception just for the plugin?

  2. Posted August 5, 2009 at 11:43 am | Permalink

    Hi Courtney – It requires a knowledge of css precedence and analysis of your theme which cannot be explained simply in a note.

    In the next release of ical (in a day or so) I will attempt to make the ical css more “sticky” and take precedence over any theme’s css for those who want the ical css.

    There seem to be a lot of people using the plugin who do not have strong enough css to understand how to update their theme’s.

    So if you can wait a day or so, and then upgrade the plugin, that should sort that out.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*