If you’re having trouble modifying your Joomla Template then read on as we show you a simple trick with the Web Developers Toolbar to help identify and fix layout and design issues.
So you’ve got your Joomla site all setup, you’ve downloaded and installed a template, or perhaps created one yourself, and now you’re finding that a few things don’ look quite right… Perhaps the menu is aligned to the opposite side from where you want it – or possibly the headings just look to big and are the wrong font.
It’s an experience that almost everyone setting up a Joomla site has at some point. And for those with no web design experience it can seem an impossible task to fix theses problems.
Luckily there is a very useful tool available called the Firefox Web Developer ToolBar. This toolbar, as the name implies, requires the Firefox web browser which you all should have anyway. If you don’t have it then grab it now.
Once you have installed it you’ll be asked to restart Firefox – don’t worry the latest version of Firefox is clever and will remember all pages you were viewing and reload them when it restarts – I accept no liability if this does not happen
Now you should see a row of tool bar icons in the top of your browser that look like the image below – I have broken the icons out onto two lines to fit into this blog post:
I won’t cover every feature of the Web Developers Tool Bar as most are self explanatory. There are many useful tools here such as shortcuts to validate your HTML and CSS, options to display all the images contained in any page, and many many more tools that you will come to rely on.
However there is one shortcut that is completely indispensable and will help you find what’s causing those annoying glitches on your site! The shortcut is to hold down three keys on your keyboard: CONTROL-SHIFT-Y, if you hold these three keys down for a moment (Using Firefox with the web devs. toolbar installed) you will then be able to move your mouse over any element within the current web page and highlight each element. When you click on a highlighted element an inset window will appear showing the CSS that is affecting this element.
Below is a screenshot showing our ever popular BlackBearPro template – In this live action shot you see the Web Dev’s Toolbar activated, the heading text has been moused over and the element has been highlighted – this element has then been clicked and you can see the inset showing the CSS that is governing this style including font, font size, color and very importantly the line number in the CSS (your Joomla template’s style sheet). I’m sure you can see how this makes it so easy to identify and tweak your Joomla template.
Click to see the full sized screenshot.