You need to stylize something on your template but have no idea in the maze of CSS and LESS files what you should be changing.
NOTHING!
We never alter the original stylesheets.
This method of creating a Custom CSS file works with both Joomla 2.5.x and Joomla 3.x.
Unless your an experienced CSS user and need the advantages of LESS's more powerful syntax I would stick with using the CSS method. Usual tasks as colour changes, logo positioning and other basic styling customizations are well suited for the CSS method.
This guide is divided into FOUR parts:
- This first part deals with using a custom CSS file
- the second part deals with using a LESS file
Your first LESS custom file
.
- The third part is an addendum to show you a better way to look at the master.CSS file
Better debugging of the Master compiled CSS file
.
- the fourth part is a quick guide to mediaqueries
Using MediaQueries in your CSS custom file
.
Your first custom CSS file
So we will use a custom CSS file to do our styling. In your \templates\rt_templatename\css folder create a file called rt_templatename-custom.css and save your CSS code there.
Let's say your using our Vermilion template, then your custom CSS file should be called rt_vermilion-custom.css.
So to create our new file, we go to the ..\templates\rt_vermilion\css folder. The new custom CSS file is ALWAYS this format -> rt_templateName-custom.css
The "rt_templateName" comes from the name of the template folder your applying the file to. In our case the folder name is "rt_vermilion". We add the "-custom" part to denote to Gantry this a overriding CSS file. Finally the file extension is ".css".
So "rt_vermilion" + "-custom" + ".css" gives us "rt_vermilion-custom.css".
and you would create the file in the \templates\rt_vermilion\css folder using one of these three methods:
- on a local server just right click and create a the new file
- with your Cpanel right-click and from the dialogue window select "Create new file"
- with your FTP client right-click and from the dialogue window select "Create new file"
In the latest Joomla 2.5.xx and Joomla 3.x CMS's you can create the file and then edit it while in the Template Manager screen:
This image is hidden for guests.
Please log in or register to see it.
Just follow the steps 1-5.
Browser Specific custom CSS file
You can also create a "browser specific" custom CSS file. For example let's say we need a custom file to handle some of your IE9 oddities, we would create in the /css folder a file called rt_templatename-custom-ie9.css and save your CSS code there.
Here are some other browser examples:
Chrome - webkit
rt_templatename-custom-webkit.css
FireFox - gecko
rt_templatename-custom-gecko.css
Internet Explorer - ie
rt_templatename-custom-ie8-11*.css
Opera - opera
rt_templatename-custom-opera.css
Android - NOT using the built-in OS browser
rt_templateName-custom-android.css
Safari - safari
rt_templatename-custom-safari.css
rt_templatename-custom-safari6.css
Safari - ipad
rt_templateName-custom-ipad.css
The one advantage of this method in Joomla 2.5.x is that both of these files will be visible for direct editing in Admin -> Extend -> Template Manager -> style|TEMPLATES (choose this one) -> click on Rt_template_name Details and Files -> Template Manager: Customise Template -> Stylesheets
Joomla 3.x will also show you the LESS folder so you can edit both directly.
Both of these methods will guarantee that your custom coding will NEVER be overwritten by a template update.
So you've replcaed the template logo with yours and it doesn't fit right. Custom CSS to the rescue!
First for those of you who don't take advantage of the benefits of using FireBug for Firefox or Chrome Developer Tools, I will do this using the "Blind Faith" method.
In this example I'm using our Vermilion template. The original logo is 80px * 65px. The new logo will be 227px * 130px.
Typically we store the Logo in a container class that provides just enough room for the logo, typically defined as ".logo-type-vermilion #rt-logo".
Obviously if your logo is bigger than the defined container, parts of your logo will be cutoff due to the container boundaries.
This image is hidden for guests.
Please log in or register to see it.
We have to increase the container size (3).
The original container code looks like this:.logo-type-vermilion #rt-logo {
width: 80px !important;
height: 65px !important;
}
All we have to do is replace the width and height with our new values, 227 & 130. So the new code is:.logo-type-vermilion #rt-logo {
width: 227px !important;
height: 130px !important;
}
In your \templates\rt_templatename\css folder create a file called rt_templatename-custom.css and save your CSS code there.
You should check that you didn't have a typo by entering this URL in your browser ->
http://mysite.com/rt_templatename-custom.css
. If you can see the file then you can proceed.
Editing your rt_templatename-custom.css file
:
You can edit your file the traditional way via FTP but the better way is to simply edit in your Admin end.
Now that the file is created we'll enter the code via the Template Manager. Go to Admin -> Extend or Extensions -> Template Manager ->Click on the Templates TAB -> Click on your template (Vermilion)-> Template Manager: Customise Template -> Stylesheets -> Select the CSS file to edit (rt_vermilion-custom.css)
This image is hidden for guests.
Please log in or register to see it.
In the Template StyleSheets Editor, enter your new code:
This image is hidden for guests.
Please log in or register to see it.
Save and exit.
Now refresh your back and front end caches and inspect your logo and it should be properly visible.
This image is hidden for guests.
Please log in or register to see it.
The second method I call "See it for Yourself - don't trust others".
This image is hidden for guests.
Please log in or register to see it.
With (1) you can see the logo container (3) is too small to fit the bigger logo (2)
So we need to change that "width: 80px; height: 65px" (3) to "width: 227px; height: 130px".
This alone won't do what we want as there is still existing valid code, the "width: 80px; height: 65px" that the template will persist to use. So in our custom file we have to override that original code. We do this with the "!important" attribute.
So our code will be this "width: 227px !important; height: 130px !important;".
We'll create our new custom CSS file and enter the code we used above.
Refresh the back and front end caches:
This image is hidden for guests.
Please log in or register to see it.
Now you can see that container size (1) is larger to accomodate our logo. Also you can see the presence (2) of our custom code and that it has properly overridden the templates original code (3).
Congratulate yourself for a job well done
This image is hidden for guests.
Please log in or register to see it.