Adding or Deleting Joomla Template Styles

Last Updated:

June 1st, 2015

Category:

Customization Tips

Sometimes you would like to delete all the GK template styles that come with default Gavick Joomla Template and replace with your own custom one. Sure you can use override method but if you sure that can can control later update process in my opinion the easiest way is modifying the existing template styles. It allows you to reduce number of loaded kb and take control of over the appearance of the template (for example used colors).

How to remove existing Joomla style

In Joomla! if you want to remove the existing styles you should do the following steps:

1. Disable the style switcher under features tab – because in result you will leave only one active style.
2. Select the style I as a default style in the template settings
3. You can remove other styles files:
   1. css/styleX.css,
   2. css/typography/typography.styleX.css, css
   3. css/system/error.styleX.css
   4. css/system/offline.styleX.css

X – style2, style3, style4, style5 and style6 You should leave only the following files:

1. css/style1.css,
2. css/typography/typography.style1.css, css
3. css/system/error.style1.css
4. css/system/offline.style1.css

Of course don’t remove other .css files (gk.stuff.css, font-awesome.css, template.css etc.) – they are very important.

How to remove choosing styles from template configuration options

You can remove other styles from the list in the template options by editing a templateDetails.xml file, find this part:

<field name="template_color" type="list" default="1" label="TPL_GK_LANG_TEMPLATE_COLOR" description="TPL_GK_LANG_TEMPLATE_COLOR_DESC">
<option value="1">TPL_GK_LANG_COLOR_1</option>
<option value="2">TPL_GK_LANG_COLOR_2</option>
<option value="3">TPL_GK_LANG_COLOR_3</option>
<option value="4">TPL_GK_LANG_COLOR_4</option>
<option value="5">TPL_GK_LANG_COLOR_5</option>
<option value="6">TPL_GK_LANG_COLOR_6</option>
</field>

It should be changed (reduced) to only this:

<field name="template_color" type="list" default="1" label="TPL_GK_LANG_TEMPLATE_COLOR" 
description="TPL_GK_LANG_TEMPLATE_COLOR_DESC">
<option value="1">TPL_GK_LANG_COLOR_1</option>
</field>

So only one style, chosen by you option will be available in template configuration (back-end).

Now edit the following files and define your own style colors based on your color scheme:

1. css/style1.css,
2. css/typography/typography.style1.css, css
3. css/system/error.style1.css
4. css/system/offline.style1.css

Color scheme

Do you need to pick out a new color scheme, but don’t know where to begin? Read also this article about choosing a best color scheme: “Colors and color scheme”

This article was first published April 5th, 2014