Icon colors

[Erica Eide]

Hi. I’m hoping to change the colors of the arrow icons. I’m seeing that the default blue color is coming from a .png in the css/images folder. I’m not sure how those work – can I just change the color code to what I want in the filename? For example, can I change ui-icons_d54e21_256x240.png to ui-icons_50027c_256x240.png? Or won’t this work?

[Stephen Harris]

The plug-in uses this stylesheet for front-end styling. Included in that is styling for the agenda widget, calendar and tooltip. See around line 179 for where the images are referenced.

But if you want to alter a part of the plug-in’s styling you need to over-ride the entire stylesheet (since changes made by editing the plug-in will be lost on an update!). You do this in your theme by de-registering the default stylesheet, and registering your own.

To create your own stylesheet, I’d recommend copying the default one an editing the parts you want to. It’s all commented so you know which part is for what. But if you want to use your own jQuery UI theme you’ll want to edit every below around line 24 – including changing the referenced icon sprite to your own provided one (presumably living in the theme).

The jQuery UI site allows you to create your own ‘theme’, and download the resulting stylesheet and images. You can then put the content of that stylesheet into the one you’ve just created above, and put that (and the images) in your theme directory.

Then to tell WordPress to use your stylesheet:

add_action( 'init', 'erica_custom_event_stylesheet', 30 );
function erica_custom_event_stylesheet(){          
      //Deregister stylesheet
      wp_deregister_style( 'eo_front' );

      //Register custom stylesheet - the url will point to your stylesheet in your theme
      wp_register_style( 'eo_front', 'http://yoursite.com/url/to/custom-stylesheet.css' );
 }

[Author]

Posts