Using Firefox web developer add-on to style Joomla

Here is a very handy tool for the Joomla designer.

First you will need to download and install the Firefox Web Developer add-on
of course you will need to already have the Firefox browser installed on your computer.

Once you have downloaded and installed the add-on, take some time to see its various features.  In our case most helpful will be the edit CSS tool.  This tool allows you to view and make changes to the CSS of most web pages.  Of course these changes only effect what you see on your browser at the moment, but it is great way to play around with the look of your site without actually changing anything permanently.
*Note that you do not have to use this method for editing your Joomla CSS, but it just makes things a bit easier.

The next step involves changing the CSS of your chosen template.
Go into your template manager and locate the template you are using for your Joomla page.  Click in there and choose edit CSS.  There may be several CSS files to chose from depending on your template.  This is where the Firefox add-on comes in handy.  It may take some time for you to identify which CSS page you need to edit.  Many joomla templates out there include very busy CSS and it takes some searching to find all of the right pieces.

Once you work out how to manipulate your template though, it is just like styling any other web page.


In my example I have added a Menu to my article.  I am happy with it, but I want it to look a bit nicer.

There are ways to make this easier on yourself.
If you are editing a module, locate it in the module manager and under advanced parameters give your module a unique module class suffix.  This way you can directly refer to it in your CSS.
Open your page in firefox and use the web developer add-on to open Edit CSS and enter in your new custom CSS.  Here is mine in which i gave the module class suffix the name of "gallery" so now i refer to it as .moduletablegallery in the CSS.


.moduletablegallery{
margin-bottom:50px;

}

.moduletablegallery ul li{
float:left;
margin-right:50px;
height:30px;
font-size:1.1em;
list-style-type:bullet;
list-style-image:url('http://www.snoweventdesign.com/images/bullet.gif');
}

.moduletablegallery ul li a{
color:#40474C;
}


Copy the entire page of CSS code from the window and go to your Joomla backend.  Once again locate your template, find the correct CSS page, and paste your new code to replace the old code, then save.
*** very important.  Be sure you paste the complete and correct code into the correct CSS page.  If you make a mistake it can mean completely losing a page of CSS.  I have done it before and it is not fun.

Now that you have saved, your webpage should be updated with the new styling.  Mine now looks like this:

So in review
Firefox Web Developer add-on:  helps you see changes you can make to your CSS
Go to your joomla template and edit CSS to make changes to the style of your page.