Joomla! provides us with a simple way to add CSS classes to HTML elements so that we can target them with our own custom CSS. Lets start by adding some classes to our module to see how this works.
1. Create a new custom HTML module.
2. Click on the advanced tab
3. In the Module Suffix Class add your custom CSS classes. In the example above I have added 3 different classes. The first class is called title1, it will control how the title of the module looks. The second class will remove the margin from the module and the final class removes the padding. These last two classes work the same on every template and can be useful if you want to tighten up the module or remove some extra spacing on your site. These classes are formulated in the same way across templates, but willl create a different look and feel depending on the template.
Below you can see how the module Class Suffix is applied to the underlying HTML.
Below are links to the original RJ Web Builder templates and thier available built- in Class Suffixes.
Dor V Dor (Reflex)
Kol Yisrael (Panacea)
Rimon (Radiance)
Arava (Camber)
Write Your Own Class Suffix
You will notice that each module displays differently depending on the Class Suffix and the template. This is because every template has its own built in style sheet and default Class Suffixes. Now that we have an idea of what the Class Suffix is and how it works lets do a small exercise and write our own custom Class Suffix which places a background color of our choice on any module to which it is applied.
For this next step we will be editing the stylesheet of our template. This means we will be directly interacting with some of the code. Please make sure you backup your website before proceeding.
1. Go to your template manager and click into your master sheet. Make note of which style sheet your template is currently using.
In the example above we are using style1.css.
2. Go to your component menu and click on OSE Fileman. Open the folder titled public_html. If you don’t see public_html then you are already in it. This is where all the files that your site needs to run is stored. Do not touch anything else here unless you are sure you know what you are doing.
3. Click into the following folder: templates/the-name-of-your-template/css/your-style-sheet
The path above will differ in name depending on the name of your template and the style sheet you are using. In the screen shot above you see the style1.css which controls the styles for my particular site. Find your style sheet and open it. You will see a lot of CSS code, don’t be alarmed. We won’t be modifying any of it.
4. Scroll down to the bottom of the style sheet and find the last line of code. After the closing curly bracket is where we are going to add our custom style.
The code we will be using is below:
.my-module-background {background-color: #000}
The code above defines a new CSS class called my-module-background. Inside the curly brackets is the code which will change the background color for the module. In this particular case the background will be black.
Now that we have created our class we can return to the backend of our site and add this class to our module using the steps from the first part of this tutorial.If you have done everything correctly, when you publish the module you should see it in its assigned position with a black background.
For more on the syntax of CSS please take a look at some of these tutorials.
Stay Tuned!
In the next post I will be talking in even more depth about CSS and how we can use the Page Suffix to create different background images on different menu items