Customization: CSS Intro

Folder structure

The number of blogs using GD Star Rating is rising, and with that need for customization of rating blocks to fit into the theme design also rises. So, latest 1.1.4 release adds some things that will further help to achieve just that. This is the first part of the customization tutorial that will help you enable all the options you need and understand the customization concept I have tried to implement.

Starting from version 1.1.4, plugin will create new folder in extra storage location used for additional stars, trends and cache. In this location, plugin will copy empty rating.css file. All changes to CSS should go into this file. To enable loading of this file, check the option on the Features tab:

Load additional CSS file

Next step is to make CSS options visible in settings panel. This option is on administration tab, check it and save settings. And after that CSS options will be visible for posts, comments and multi ratings:

Enable CSS options

Each rating type has it’s own rating settings, and among them are CSS options:

• Standard Posts & Pages ratings: There are two CSS classes that can be added to this rating block. One class is added to the whole rating block and the other only for rating text.
• Review Posts & Pages ratings: Only CSS class for the whole rating block.
• Comments ratings: The same system as for standard ratings with two CSS classes for whole block and rating text.
• Multi sets ratings: For this rating method there are 4 CSS classes added to the rating block. One is for the whole block, one for the table used to render rating elements, one for the rating text and the fourth one is for rating button.

All these settings are applied to all rating blocks inserted automatically or through direct integration and shortcodes. But 1.1.5 version will feature override settings for CSS for shortocode or manual insertion allowing you even more flexibility.

After this post, 2 more will follow. One will explain customization for multi ratings, and the other customization of standard post and comments ratings. Since all this will be done using CSS, you need to know at least basics of CSS. Also, I recommend using Firebug extension for Firefox or Dragonfly for Opera. Similar tools you can find in Safari and Chrome. These tools will allow you manipulating CSS directly on page allowing you to see changes before add them to rating.css file.

Here are few tutorials on using Firebug for CSS:

• http://www.evotech.net/blog/2007/06/introduction-to-firebug/
• http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/
• http://www.youtube.com/watch?v=FsX6qwQqGgQ

I will try to go into as much details as I can, but you still need to know how to work with CSS. If you are not sure about that, please consult your web designer.

Share this: