Rounded Corners 1

We’re having some discussion on using radius for rounded corners with regards to achieving it for a table row for the ical events plugin.   At time of writing the radious options do not play nice with table elements, especially if collapsed.

http://www.google.com.au/search?q=css+border+radius+on+table+elements

Thinking about styling the ul /li elements within the table cells and so somehow  achieving the same result.   There are some things to think about though if you want to use it for menus – ie with hyperlinks

http://www.onderhond.com/blog/work/trouble-with-rounded-corners

Chrome content: none

Those unremoveable bullets strike again!  It seems that the Chrome browser does not recognise the content: none declaration combine with the before after selectors.

This means that in the wordpress default theme, if you wish to override the bullets as I do in the amr ical events calendar widget and plugin, one has to resort to content: “” !important;

Removing arrows in the default theme in the chrome browser

Removing arrows in the default theme in the chrome browser

Unremovable bullets 2

Another example of “unremovable bullets” by some one using the Corporate theme by StudioPress. It is not really practical for widgets and shortcodes to cover all the ways that a theme may have chosen to specify bullet styling, so at times you may well have to get in and add your own override.

In this example, the ical widget shows up like this

Css Bullets Problem Example

Css Bullets Problem Example

Once again chris pederick’s web developer add on for firefox is invaluable in highlighting what the problem is:

Web Developer highlights the issue - the theme css is taking precedence

Web Developer highlights the issue - the theme css is taking precedence

Here we see that the icallist.css clearing of the background for list items

icallist.css (line 36)
#wcompprop0 ul li, #calprop0 ul li, #compprop0 ul li {
background:transparent none repeat scroll 0 0;

is being overridden by the theme’s

style.css (line 318)
#homepage ul li li {
background: transparent url(images/icon.gif) no-repeat scroll left top;
....

There are a number of ways to correct this, either in the theme or in the icallist.css.  Either of the following should work:

#homepage #wcompprop0 ul li {
background:transparent none repeat scroll 0 0;

OR

#wcompprop0 ul li li, #calprop0 ul li li, #compprop0 ul li li {
background:transparent none repeat scroll 0 0;

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

Breadcrumb Widget

I have just finished off a breadcrumb widget.  If your theme’s header has been widgetized, then you will be able to use the breadcrumb widget in the header which is typically the obvious place to put it.