Here is the relevant transcript for this video:
I received a request from one of my clients asking for help to modify the CSS (Cascading Style Sheet) for a template on a site that he is building. He is using a Rocket Theme template. I really like their templates; I like their extensions; I like tons of features in them. One of the things that is super about them is it’s really easy to modify the template itself by changing the CSS. It used to be very complicated. You'd have to go into the CSS files within the template and find out where which specific line was and fiddle around and change and test. Now it's way simpler and so I want to just do this tutorial to show him and you how easy it is to change templates when using RocketTheme templates.
Here we are at the Basic Joomla site. This is the default template that comes with Joomla. So, I'm here in the back-end. I'm going to go to "Extensions" and "Template Manager" and I'm going to select the "Gantry Template" which I have installed. It's this default one, it's free and it comes with all the extensions that are needed to run Gantry. So, I'm just going to click here, make it the default, go back to the home page here and "Refresh" and we'll see that the template has changed. Now we're set to try to change this template up.
The client is wondering about how to change the "Heading 2" CSS value at tag. To do that we're going to use a tool. I'm using Chrome right now. If I hit F12 it opens up these developer tools and if I click on this magnifying glass down here, I can then highlight different parts of the template and it will show me over here on the right-hand side which CSS is affecting what. So, I'm going to just select the “Welcome" header here and when I click that it changes and we see all of the rules in the cascade. So, we see right here for this “Welcome,” the last thing affecting it is this hover color which is black for link "a: hover." When I mouse over that it turns black. Before that the blue color that is assigned to the link, that is crossed out for the hover because something else has taken over in a different cascading style sheet. We can go further down, further down, and see all the different rules that are affecting it.
Now the question here is, how to change the size for this title? You'll see "title" is the tag and component-content h2, and here we see font size of 28, line-height 30, font-weight normal, letter spacing normal. So, to preview the change of the size of that font we could just click in here, and instead of 28 I'm going to get rid of that too, and make it 58, and right away we'll see the font changing size. Or we could go 108 and make it even bigger.
Now let's suppose that is the size you want your coding to appear on the title in template: title component-content-heading2. Well, then you can copy these changes and paste them in a custom CSS page.
So, let's just leave this for a second and we'll go and create that custom CSS page. It's super easy to do. So, we're back in the back-end of Joomla and I'm going to go to where this custom CSS file needs to be put, and to do that I'm going to use this component here called EXTplore. It's a file explorer for within your Joomla install, and here it shows the tree of your Joomla install. What you want to do is go to the CSS folder for the template that you are modifying. So, if I click on templates here we see in this basic install I've got Bees 3, Gantry (which is the one that I've installed from RocketTheme.com) Protostar which comes with Joomla, and System. We're modifying Gantry so we're going to Gantry, double-clicking there, going to go into the CSS folder and here there are some files, depending on which Rocket Theme folder that template you use there will be more files here, but we want to make a file in this folder. I'm going to click here, "new file directory," and am going to give it a name and the taxonomy for the name is the template name, then dash custom.css. So, this template is actually named Gantry and hyphen c-u-s-t-o-m and that is what we would want that file to be.
Now let's suppose that you have a template that's called Stratus - that's a Rocket Theme template that's out right now: "rt_Stratus" would be the name of this custom CSS file. Of course, this file would have to go in the template folder for RT Stratus. The name of the template here is Gantry so we'll create it here. We click create. And then next what we want to do is right-click, and we'll edit that. Now it's a blank file, of course. That's alright. We can head back to the home page where we have the CSS for this title font selected and I'm going to left-click and I'm just going to drag and select all of that. And now I'm going to go "control C" for copy - I guess you could right click and go copy as well.
Now let's go back to that custom file and we'll paste in the CSS. The only thing that we've really changed in all of this is the size. We could change other things. We could change the font weight, we can even add a line to change the color, but let's just keep it simple right now. So, we don't really need this line height change, your font weight, because that's already active, we don't want to change that, we just want to be changing the size. So now I'm going to save that file and we'll go back to the site here - I can even close this off for now - and I'm going to refresh the page and we'll see under refresh the letters in that heading remain the same.
So, if I hit F12 again, use a magnifying glass, we can select that. Now when we go over we see the CSS that is applied and when we go down we'll see that the size here is changed in this file, "gantry-custom .css." So basically, you find the CSS that is affecting this template, and how its displayed, find the code, copy it after you've made it look the way that you want it to, and then paste it in your custom CSS file.
There is also a tool for Firefox - let me just bring that over quickly. It's called Firebug. It's an extension that you would add on to Firefox, so search for that in extensions. You turn that on also with F12. It’s not a magnifying glass, it's a square - but then once again you could click and then down the right-hand side you can see the CSS that is affecting that. Now this window, it's small because I haven't refreshed it since the last changes, so I'll refresh it and now it's big and looks the same. So, let's drag that back over there.
So that is a really super way to customize the Rocket Theme templates and the CSS. It's much easier than trying to find out where the CSS was in everything else.
I'll end up just by pointing this out. That here, this title, even though it is titled and it's “.component-content-heading 2,” you see down here heading 2 itself for its font size has been taken over by this declaration farther up that that is heading 2. So, if you want to change heading 2 throughout the site, if you're using heading 2 on a page for instance just in your content, what you would want to do is find a page with simple heading 2 where you want to change it, and select it, or you could even just do this. Let's just collect this cancelled out part, we'll go over and now paste that in there and we can say heading 2 is anything we like. But anywhere else that heading 2 showed up, it would be whatever size we changed it to.
And that's just the basics for editing a template, changing the CSS on Rocket Theme templates and once you can change something like that you get into much more complicated options if you want and you can change all sorts of things in the menu, the font ... the possibilities really open up.
And thanks to the people at RocketTheme.com. By using the template name "-custom.css" file you can change a lot of things really easily and have your way with the template, which is the way that Joomla is supposed to work.
So, I hope that helps you and encourages you in customizing your RocketTheme.com templates.
If you have any questions, ask them on the page and if you're interested in having any work done on your site, I'm available for hire as well, and with my membership for RocketTheme I can use those templates on projects that I'm working on.
So, thanks for watching. God bless.