Modifying The Appearance Of The Specials Module

The normal appearance of the specials module, is well, a little too normal. As shown below, it has the same colours as any other part of the front page, and doesn’t really stand-out.

open-cart-unmodified-specials-module-appearance The default appearance of the specials module.

Before we can modify the CSS to change it’s appearance, we need to add a ‘hook’ to the elements of the special module so that the CSS can target them. Otherwise any CSS changes would modify the appearance of many other things on your site as well. To do this, we need to modify the code that generates the special module elements. The default code is at “catalog/view/theme/default/modules/specials.tpl”. Copy this file into your theme directory (e.g. “catalog/view/theme/<theme-name>/modules/specials.tpl”) and then modify this code.

Now that hooks have been added, the CSS file can be edited to change the appearance of the elements with the new ‘box-specials’ class.

open-cart-adding-box-specials-css-class Modifying the CSS to change the appearance of the OpenCart specials module.

The main thing I wanted to do was to change the appearance of the title background to a red colour. Just using CSS to set it to red would make the heading too ‘blocky’. I decided to use GIMP to create a reddish gradient  image that could be repeated in the x direction.

open-cart-creating-title-background-with-gimp Creating a title background for the OpenCart specials module with GIMP.

Posted: April 15th, 2013 at 9:39 pm