Compared to the WordPress Zen theme, the Showcase for Joomla’s version of Zen is a lot easier and more flexible because it just needs a module position only. However, to style your showcase header, there’s a few settings to customize…

showcase-settings

To see how each setting changes the Showcase header, you can see a side-by-side difference below:

showcase-samples

The Background Gradient

The background gradient is loaded into the showcase header as a background image and will be seen on the left and right side of the showcase position. By default, the Zen theme displays the dark to light green, as you can see in the screenshot above.

  1. Go to your template settings: Extensions >> Template Manager >> Zentheme
  2. Enable or Disable the Showcase Gradient (default is the green background from dark to ligher)
    sc-gradient
  3. Click Save

Note: The image used (scgradient.png) is located in the Zen theme’s image folder

Showcase Lines

The screenshot above shows lines (also called scanlines) which are displayed as a background image and can be turned on or off (Enabled or Disabled).

  1. Go to your template settings: Extensions >> Template Manager >> Zentheme
  2. Enable or Disable the Showcase Lines
    sc-lines
  3. Click Save

Note: The image used (sclines.png) is located in the Zen theme’s image folder

Showcase Background Colour

The Showcase background needs, or should have a colour applied, and by default, it’s already set as green. If you decide not to use an image background such as the gradient image and just want a colour only, this is what this setting is for. It will also show at the bottom of any other custom gradient image you make if your showcase image or media is bigger in height and your gradient repeats horizontally. This will blend the bottom colour of your gradient with the background colour you select…much like it does with the default green used:

  1. Go to your template settings: Extensions >> Template Manager >> Zentheme
  2. Click in the colour field to bring the colour selector popup in view and choose your colour:
    sc-background-colour
  3. Click outside the colour selector to close it and click SAVE

Showcase Gradient – Your Own

The Showcase gradient background can be your own if you are comfortable in creating one. The image you create will need to be uploaded to the Zen theme’s Image folder (where the template files are) so that it will load properly. This can be a jpg, gif, or png image format:

  1. Go to your template settings: Extensions >> Template Manager >> Zentheme
  2. Change the existing default gradient image (scgradient.png) with the file name of your own image that you uploaded to your template’s image folder:
    sc-background-image
  3. Click SAVE

Note: By default, the background image repeats horizontally and vertically, but if you need to change this, you can make this change by opening the Zen theme’s index.php file and look for the code near line 28:

#showcasewrapper {.......repeat center top;}

The “repeat” near the end is what you will change to either:

  1. repeat-x (this repeats your image horizontally
  2. repeat-y (this repeats your image vertically
  3. repeat (this repeats your image horizontally and vertically
By |2011-02-11T01:19:03+00:00February 11th, 2011|Blog|