Friday, July 29, 2011

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 ul li{

.moduletablegallery ul li a{

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.

Joomla 1.5 - including menus and modules in articles

In this blog I am going to review the process I took while updating a joomla site recently, detailing:
-adding modules within your articles
-adding menus within your articles

Modules in Article!
This is a very handy and very easy thing to do, so I will make it quick.
All you need is your module installed and ready on your joomla backend.  Within your module be sure to take note of its 'position.'  In this case it should be unique like "user1."  Also be sure to select under menu assignment what pages this module will be appearing in.

Now go to your plugin manager and locate Content - load module which should be preloaded in there.  Here you only have to make sure that the plugin is enabled.

Now all you have to do is go to your article and paste in the following code
{loadposition user1} right into the text editor.
in this case user1 is the module position we specified earlier, but it can be whatever position you have assigned to that module.  (user2, left, moo).

Menus in an article!
This works almost exactly the same as adding a module to your article.  This is because when you make a menu joomla actually turns it into a module for you.
So all you have to do is make a new menu or find one that you already have.  Go to Module Manager and locate your module menu.
Just like with the previous example all you have to do is enable your module, select a unique position, select what pages it will appear on, and then use {loadposition } to place it in your article.

Pretty easy huh?

Next i'll clue you into styling your new menu

this article has two modules added with {load position} the unstyled
menu and the gallery.