Plugin and theme css not working well together?

“The plugin does not look right in my theme”

Themes do all kinds of weird and wonderful things sometimes without thinking about the unintended consequences on other html. A classic example of this has been the “unremovable” css bullets.

The icalevents plugin provides a minimal default css with the hope that the html will pick up styling from your theme, enabling the plugin html to blend in with the theme and “belong”.

Sometimes the theme css does not look right when applied to the plugin html, and needs to be “overridden”.

Sometimes the default css is not being used because of the div id’s that your theme uses for it’s content areas.

It is not possible for the default css to deliver a perfect solution for all themes.  The css offered works with the default 2010 theme.  You should have some css skills and familiarity with the firefox firebug tool will help.

Custom CSS

If the default css does not work with your theme, the plugin provides some options.  These are accessed under “Listing Events” / “General Options”.  Please note that these settings apply to ALL list types.

CSS configuration options
CSS configuration options under List events

1.Do not generate any css, use theme css only.

Css setting closeup
Css setting closeup

The expectation here is that either

  • the plugin css is not required – the html looks fine in your theme, or
  • that you have modified your theme’s css

2.Or Create a custom css file for the plugin.

  • Copy/Download the defaut css style in your websites upload folder. (Do not edit the css file in the plugin directory as it will be overwritten).
  • Tailor it to suit your theme, then (put it back in the uploads/css folder).  Maybe change the selectors (the #content maybe ) to whatever your theme uses.
  • Choose the custom file from the list of files in dropdown list in the main

The plugin will then add that css file into the website’s css which ever theme you are using.

OR use wordpress.com’s safecss plugin:

http://wordpress.org/extend/plugins/safecss/

Table widths and css

See table-css-overlapping-or-disappearing-sidebars