Modifying the Joomla template on your site is fairly simple if you are using a template from RocketTheme.com (they have a few free ones for use as well.) This tutorial will show you how to easily change the CSS tags on your Gantry 5 RocketTheme Joomla Template.
Hi, I'm Tim Davis from Cybersalt's Basic Joomla channel. I really like the templates that RocketTheme puts out. Their Gantry 5 system makes it super easy to customize the CSS to fit my style and your style. That's what this tutorial is about. Let's head on over to the computer and check it out.
To customize the CSS of a template using Gantry 5 you first need to create a folder inside the template folder to put your custom CSS into. So, let's see how to do that first.
I'm already logged into my cpanel account and the file manager where this Basic Joomla site is installed and what you want to do is go to the templates folder. Go into there and you want to go into the folder that has the same name of the template that you want to customize CSS for. In this case it is the Gantry 5 Hydrogen; G5 Hydrogen. Go into that folder and then into the custom folder.
Now, I just want to point out we're going to be creating a folder called SCSS. There's already one that exists in the template folder, but this is not the one that we're looking for. What we want to do is go into the custom folder and then we're going to create a folder called SCSS. Once we've created the SCSS folder we're going to then go into it and we're going to create a new file named "custom.scss". And we'll create that file.
Now, let's get some CSS to customize and put in there. I'm going to the homepage of Basic Joomla. I have it set up with the default Gantry 5 page, and I want to change the color of this font here. I'm using Chrome so I'm going to use F12 to bring up the element inspector and I'm going to click this arrow and scroll and then we'll select this text here.
We’ll see that heading 1 here is the color grey. Now I can click this button and I can change the color - you'll notice it will change up here – to something that I want. You will also notice that you get a magnifying glass and you can pick a color that’s on the screen. This is great for matching up existing colors in the theme. So why don't we just select this purple here, I'll mouse over it, click on it, and go back down. Here we have Heading 1 and the color is purple.
Now, this CSS, this code here, I’m just going to left click and drag to select it, and then CTRL-C to copy it. Now we then go to the .SCSS custom page that we made. We’re going to right click, edit, and now I’m going to paste the CSS information in there.
Now, if I want to change the color of heading 1, heading 2, 3, 4, 5, 6 and strong to that purple that we selected back here, then I would leave the CSS like this. But let's just change it for heading 1. And basically, we've pasted that code in there. We'll save our changes. Now, I'm going to go quickly into the back end of the Joomla site here and click the clean cache button – I use Regular Labs' cache manager – which guarantees that now when I refresh this page, heading 1 is purple. We can even close the inspector and you're all set up to look for other CSS that you want to customize.
Once you get a hold of the code that you want and set it in the manner that I just showed you, you would then go back and add it to your custom.SCSS file.
So, there you have it; that's how to edit the CSS and a template that's being run on Gantry 5. I hope this tutorial was helpful for you. If it was, why not give it a “thumbs up,” or subscribe to the channel?
Thanks for watching and enjoy working on your Joomla sites. God bless.