24 HOUR FLASH SALE - 30% OFF EVERYTHING - Enter coupon code 24HOURFLASH on any purchase!

Module Style Overrides allow you to tweak the styling of individual module positions. This greatly extends the control of how each of your module positions are displayed and include a host of styling options including background color, background image, text color, heading color, button color and module padding. In this tutorial we will detail how to apply these module position styling overrides to your template.

  1. From your Joomla administration navigate to your template style settings (Extensions -> Templates -> Styles -> [YourTemplateStyle].
  2. Select the Module Style Overrides tab.
  3. Create a new override by clicking the plus (+) icon.
  4. From the Position dropdown, select the module position to which you wish to apply the style override.
  5. Using the options available style the module position to your own taste.
    1. Background Image: Applies an image of your choice to background of your module.
    2. Background Color: Applies the color of your choice the background of your module.
    3. Headings/Title Color: Sets the color for module headings (H1, H2, H3 ect.) and module title.
    4. Text Color: Sets the default text color for your module.
    5. Button Color: Sets the default color for module buttons
    6. Padding: Sets the padding for your module position. Usually your module position will already have padding applied by the template. This option will allow you to override that padding.
    7. Margin: Sets the margin for your module position. Note the difference between padding and margin is best noted when you have a background image or color set. Padding is recognised as spacing within the background image.color while margin is recognised as spacing outside the background color/image.
  6. Once set, hit Save and refresh your frontend to see your newly created module style override in action.

If you wish to apply a Module Style Override to a single page or menu item, a solution is to create a template style specifically for that menu item/page. For details on this topic may I suggest the following article.. Creating multiple template styles (https://www.joomla51.com/tutorials/joomla-basics/creating-multiple-template-styles)

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok