Customization of default rendering stylesheet

To style rendered products, products archives and compare pages, plugin includes default stylesheet file. By default, this file is loaded on each page. There are several methods you can use to replace all or some of the styles in this file to make rendering look like the rest of your theme.

Changing styles in this file is not recommended, because when you update the plugin, changes you made will be lost. So, how to handle changes you need?

Loading additional stylesheet for the theme

Best way to make changes is to add new file to your theme. Let’s call this file gdpc.css. You also need to let know theme that it needs to load this file. To do this, you need to modify theme header.php file. I recommend to add link to this file after wp_head() call, and before ending </HEAD> tag. So, add this into the header:

[php]<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( ‘stylesheet_directory’ ); ?>/gdpc.css" />[/php]

If you are using xScape Theme Framework theme, you don’t need to add anything to header file, you can load stylesheet by adding it to the theme settings. Open Theme Settings, find last Advanced tab, open Extra CSS styles and files group. In the CSS files list add this: gdpc.css and save. Framework will load additional CSS file.

Adding styles into the theme header

If you don’t want to load extra CSS file, you can add styles you want into the header.php directly. Before closing tag, add block like this one:

[code lang=”html”]<style type="text/css">
/* add your styles here */
</style>[/code]

Similar, if you use xScape Theme Framework theme, you can add additional style to be embedded automatically. Open Theme Settings, find last Advanced tab, open Extra CSS styles and files group. In the CSS styles list enter extra styles you need and save.

Adding styles into theme main style.css file

This method is maybe simplest way to add changes for the plugin default styling. But, there is one negative side to this. Most themes are loading main stylesheet very early before the plugins add own stylesheet. In that case, styles loaded later (default plugin render.css) has higher priority and same styles in style.css file will not be used. Solution is to add !important to each style in style.css to increase its priority.

Overriding default rendering styles

Here is a example. In the plugin render.css file, on line 163 there is a style:

[css].gdpc-properties table tr.gdpc-group th {
background-color: #F0F0F0;
text-align: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #aa0000;
font-size: 0.9em;
font-weight: bold;
padding: 2px 5px;
color: #AA0000;
}[/css]

If you want to change colors and font size, override style will look like this:

[css].gdpc-properties table tr.gdpc-group th {
background-color: #DDDDDD;
border-bottom-color: #440000;
font-size: 1em;
color: #440000;
}[/css]

If you are adding this in your own gdpc.css, or header embedded styles (first two methods above), this new style will override default ones. If you add this to theme style.css, you need to add it like this, to include important elements:

[css].gdpc-properties table tr.gdpc-group th {
background-color: #DDDDDD !important;
border-bottom-color: #440000 !important ;
font-size: 1em !important ;
color: #440000 !important ;
}[/css]

Decide what method is best for you, and use that. Also, make sure that if you update theme, you keep the styles you added, and that’s why additional stylesheet in the theme is best way to do this.

Comments

Leave a Reply