This purpose of this tutorial is to show you how to find and fix problems with your Joomla templates. We're going to focus on CSS (or Cascading Style Sheets) because they control very common issues such as fonts, colors and padding.
Download and Install Firefox
No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from https://www.mozilla.com/firefox and install.
Install the Web Developer Plugin
Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".
Visit Your Joomla Site
We're going to use the default Joomla for this tutorial.
Diagonse Your Problem
In this example, our welcome message is too small. We'd like to have "Welcome to the Frontpage" in larger text.
Start the Webdeveloper toolbar
Click "CSS" in the toolbar and then click "View Style Information"
Click the item you want to edit
Hover your mouse over any part of the page and a red box will appear around it. Click on that area.
See the CSS Code at the bottom of the page
At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 1.5em. We'll need to increase that number.
Login to Your Joomla Site
Go to Extensions >> Template Manager inside your site
Click on Your Template Name
Click "Edit CSS"
Open Your Template' CSS File
Browse down to find the template you saw in the previous step called "Find the CSS code at the bottom of the page". Click "Edit" in the top-right corner.
Copy Your Test into an Editor
I'm using Notepad in this example, but any text editor will do. If you have a code editor with line numbers, even better!
Backup, backup, backup, backup, backup, backup!!!
If you're doing this for the first time, you will make mistakes. Backup your file so that you can roll back those mistakes when they happen.
Find Your Code to Change
Search for the code that you find earlier in the tutorial.
Change the Code
Especially when you're getting started, this may involve some trial and error. In this example, I'm going to increase the font-size from 1.5 to 1.7.
Paste Back into Your Joomla Site
Paste the code back into your Template Manager and click "Apply".
Check the Change
Great - in this case the change worked and text is larger. If you the change isn't just what you want, you'll need to go back a few steps to "Change the Code" and try again.
Some Notes
1) This is a process of trial-and-error. Don't expect to get it right first time, ever time.
2) Make one change then check. Make one change then check. If you do that, it's easy to spot a mistake. However, if you make wholesale changes before checking, it will be very difficult to find where you went wrong.
3) If you want to move faster, get an FTP Editor that will allow you to edit this files more quickly and accurately. That however, is for another tutorial :)