How to edit a Joomla template with Firefox

Important Notice: This blog is now going to be updated more often on www.conticreative.com. Come and visit my site at ContiCreative.com for blogs, software, books and utilities reviews, tips and tricks and more.
I am looking forward to your visits there – Conticreative

When I first discovered Joomla! when it was still Mambo, my first question was: “How the heck am I going to edit the template?”

I think this is pretty much the first question any traditional web designer has when they first try to work with a CMS. It’s natural. We are used to a Top down style of designing the page and then inserting the content, Joomla is the opposite. The content is there, but the design, even the excellently designed Ruck Solarflare, is the first thing we must change if we want to make an original website.

I came up with two distinctive systems for dealing with Joomla templates, one uses the excellent Firefox Web Developer plug in and the other is a more traditional approach using Macromedia Dreamweaver as a css editor. Both assume that the web designer reading this article is interested in having some sort of visual feedback when editing CSS files.

This article is about using Firefox and how it can be edit many aspects of a Joomla template. Using the Firefox Web Developer extension is, to me, a bit more laborious and confusing than using Dreamweaver, but it is more immediate and less convoluted at times. Let’s get going.

First you’ll need to install Firefox if you don’t have it. At the time of this writing version 2 has just been released. There is a “Developer Version” of Firefox available here. Next, if your Firefox version doesn’t come with the developer plug-in you should download it ;here.

A Joomla template is usually made up, at the very least, of a Folder containing an index.php file, a css file inside the css folder called template_css.css, a XML file and an images folder. If the template has any js files or any additional css file they will be respectively in the script and the css folders.

As much as possible, Joomla templates try to separate the content from the presentation and use DIVs and CSS files. Since Joomla pages are created dynamically and they don’t “exist” as separate HTML pages using css for style is a necessity, not a choice. Nevertheless, many Joomla templates use a fair amount of tables in the layout and Joomla itself uses quite a bit in the generation of the page elements.

Most of the changes in a Joomla template can be done using the css file. Because of the way that Joomla works, the index.php file, in its raw format before is processed by Joomla may look quite messy and often template designers use a fair amount of conditional PHP code to allow Joomla to place page elements in a certain position. This is not a difficult proposition as the following example illustrates.

<?php if ( mosCountModules (‘banner’) ) { ?> <div class=”classname”> Content or PHP module call</div> <?php } ?> <div class=”classname2″> Content2 </div> What this says in essence is: IF (the module is present in this position) THEN (display this here) ELSE (Display this content)

A good Joomla template, such as the ones offered by Joomlart.com, will have many conditional statements as well as several Javascript elements to facilitate the use of CSS menus and other features. They will also use CSS to style most of the containing <div> and other XHTML elements making the developer’s plug in in Firefox an ideal tool for CSS styling.
Once the plug in is active, load the home page of your site (or any other page you want to work on and got to Tools > Web Developer > CSS > Edit CSS (Ctrl-Shift-E) and the CSS file(s) for the web page will display in the left column.A Joomla template can have multiple CSS files attached to it, but the main file is template_css.css. In the edit CSS column of display div orderFirefox each CSS file has it’s own tab allowing you to edit any file you wish.Any changes to the CSS file are immediately reflected in the actual window, making the process very fluid and natural. An intimate knowledge of CSS syntax is necessary, since there aren’t yet any advanced tools such as the ones offered by Macromedia Dreamweaver or other CSS editing tools
displayblocksize. Every change has to be made by hand, including Hex color values. One other drawback, one that hopefully will change in the future, is the lack of any color coding of the syntax.Any change made in the CSS file is limited to the local copy of the page, and until the CSS file is saved, going to a new page in the site may clear any change made so far. It is easy to click on a link by mistake and lose an entire session. The CSS file should be saved often as a precaution.While this is a very nice way to edit the CSS file of your Joomla site, it has its drawbacks: It is hard to find the tag both on the page and in the CSS file. For this, the developer plug-in can come to the rescue once again. There are several tools that help greatly in identifying the various HTML elements in the page. Under the Information menu (Tools > Web Developer > Information) there are a number of useful tools such as: displayblocksize

  • Display Block Size
  • Display Element Information
  • Display ID and Class details
  • and more.

These are invaluable in identifying the block elements. Finding them in the CSS file is another story and again this is the weaker point of this system.Ultimately, we will want to save these changes to our Joomla Website, we can do that easily by simply uploading the CSS file on the server. The changes should reflect nicely and the file can be edited again and again.inspect elementFirefox has a number of plug-ins, beside the Web Developer toolbar that are useful for working with Joomla. There is a competent FTP plug-in, a DOM Inspector, a variety of CSS editors and other plug-ins that perform similar functions to the Web Developer Plug-in but with subtle differences that in same cases may be useful. One Plug-in I find very useful in conjunction with the WDT is Firebug. It is 2.0 compliant and it shows a hierarchical view of the page structure with collapsible elements in a pane below the main window.I hope you found this article useful and that you’ll let me know how I can improve it.Happy coding.The conticreative blog is also available at conticreative.com. Conticreative is a Web Agency specializing in Joomla, Zen Cart and OScommerce integration. We also provide professional product photography, SEO services,Managed hosting and training. This article available here

Advertisements

29 responses to “How to edit a Joomla template with Firefox

  1. Help me please…
    I just installed Firefox 2.0, and all of a sudden, my username/password isn't being inserted in the signon window (it always was before). I tried the usual suspects–I did not mistakenly tell FF not to remember the password for this site; and I also tried the remember password bookmarklet, but all to no avail–FF will not ask me to remember this password. What do I need to do to get around this?

  2. Please add firefox cookies/bad web sites immunization in next version!
    Firefox 2 cannot reject third party cookies!!!!!!!!

  3. We have some excellent Joomla Training Videos available from our site at such a low price they are virtually a steal!

    Take a look as I am giving away 100+ Bonus Joomla Templates aswell. Just click my name.

  4. I am glad the article has been well received. I am in the process of redesigning my website and fold the blog into it. Since I wrote this article I expanded the system to include the wonderful Firebug extension and I expanded the Web developer extension workflow as I got more familiar with it.
    As it stands, an enterprising web developer could get away with using firefox and notepad++ exclusively to work on Joomla templates or, for that matter, any other similar dynamic script.

    While I am still using Dreamweaver heavily I am tasking Firefox with more and more procedures I used to use DW for.

    Look for an upcoming fresh article on how to use Firefox, firebug, the Web developer Toolbar and FireFTP to work with dynamic scripts.

  5. Hello

    I started to develop a website in Joomla v1, then lost it when my computer crashed. I have rebuilt my system and am working to re-create the site. My question is – I recall being able to see the position of the various elements/menus/etc outlined and labelled on a page using Firefox, but I cannot now work out how to do that. Any suggestions ?

    Thanks

    Peter Anderson

  6. let me know easily mathod.

  7. Great tutorial for novices.
    Thanks for the nice article bro.

  8. Great information
    Thanks

  9. Pingback: backs2business.com » Blog Archive » First Steps in designing your website

  10. So nice you wrote! You work just like i do!
    I love to work in FiFox. all tabs and all.
    this browser is a revolution to us madmen on the run out here.
    I run a Portable v.2. on a usb and have tons of ext. I’m like home anywhere on the fly. It’s chocking cool. And everything for FREE!! Thanks all you whom have been sitting coding this ones to us! We love you!
    But i have to tell you about a program that is fairly new and does the style “only”. okej.. be warned and skip,, I’m in polyamoric love now. This app is named stylizer and it like DW has its own ftp engine. It is just to push a button ->”Save” so saves it all the style sheets to the server. Bang!
    Just like dreamweawer.
    It has a very clean stylish dark blue Ui and is so stable.

    It has a kind of structured right pane for the rules and property’s so one can’t make wrong. down under it presents all the options a property has and it knows css!

    On the top it has a button for temporary disable of an property so you easy can try ty and see instantly. And of course one for !important, -copy -paste and comment. More over it has color picker, eyedropper and a neat little automatic color library. so no hexing around here.

    It is not as good thou as WDT or Firebug whit the doom but it has a button you visually can select one element. you just push and then select and all relevant rules is filtered out fore you. wow i love that. BUT it is a pain that “firebug” and “WebDevToolbar” don’t have one save button integration with fireftp because it would be so easy to not have to leave FF. If fireftp had an simple editor it could do. Copy and paste.
    In Stylizr you have a new css file button but can’t edit the file freely or even the code outside the grid. you are locked in. But ther is unlimited undo in both directions and you can browse away without loosing the style thou. And you can mark and copy rules and propertys to any app.

    And even if it seems strange.. it’s cind of resting that one cant change the UI a bit. one can switch between dark and light mood for saving ones eyes.

    But no option buttons what so ever.
    ohh, yes i almost forgot.. it even has a switch tho change between the 2 in built FF and IE rendering engines, but its not a options button just a switch. whit this you could throw your old stinky worm hole cheese away.

    well now i have started to sound like an commercial so i better stop. It saves me time to be in Analog mood..

    Could WDT just do some small changes inspired by this app one could throw that one also. Whit use of “Cache cleaner button” or “joomla tool bar” (it also has a cache cleaner) or “JhonnyCache ext.” ( in witch you can disable caching by domain or string if you want). and colorzilla and “edit source” extensions and bla bla bla.. we would not have to even have to leave the FF when we sleep. i would love that. I loveFF. spicy Foxy Freedom to people.

    I liked your article and got inspired of it be course I’ve thought so much about it would need such tutorial. So i want to ask if i can goggle translate your article to Swedish and change it a little from DW to stylizer etc and hang up to my site mamamaa.org as an tutorial. We are an just a small but wild NGO fighting for our right to live and keep our culture in the wild deep woods in Finland and Sweden among other things. ?? It would be nice and i could link it back to you.

    Anyway think of it and for so long.. thanks and keep upp your good work.

  11. good day please could help i trying to edit the colour of a template I loaded I did exactly what you said and got the add on for firefox then I opened css file when I was in home page and started removing the colours i didnt want and adding the colour i wanted.I was trying to change
    black were the heading to blue I added the code and applyed but when I closed it side panel of css it site remained the same …please adive me as what I doing wrong

  12. Great
    That ‘s what I need.
    Thanks and keep up your good work

  13. good article, but we need MUCH more of that

  14. Tim Kelvin Clouds

    Nice article. But please is there no other means i.e Software that i can use to edit my joomla template off line. Apart from Deamweaver, Adobe CSS etc. I use web page maker to design and i want to convert them into a joomla template. Pls i need assistance. Pls mail me. I will be expecting your reply…….

  15. I suggest to use Codelobster PHP Edition with special Joomla Themplate Editor.

  16. Pingback: Tweets that mention How to edit a Joomla template with Firefox | conticreative -- Topsy.com

  17. There is a component for Joomla! to create and edit templates online. Download: http://www.dewem.com/en/joomla.phtml

  18. Any suggestion for http://www.wizbuds,com. It is for Soft Skills Training and IT Technical Skills Training.

  19. Any suggestion for http://www.wizbuds.com. It is for Soft Skills Training and IT Technical Skills Training

  20. Oh kittens yes. This is the perfect reason I was born.
    To find you, my long lost knowledge seeking soul-mate.

  21. There is one add-on in firefox itself named firebug lite which helps you to manage codes and even debug the website.

  22. Hmm it seems like your blog ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog blogger but I’m still new to everything. Do you have any recommendations for beginner blog writers? I’d certainly appreciate it.

  23. “How to edit a Joomla template with Firefox | conticreative” Sliding Panel Tracks was indeed
    a remarkable article. In case it possessed a lot more photographs it would
    be quite possibly even better. Regards -Victoria

  24. Spot on with this write-up, I honestly believe that this site needs
    far more attention. I’ll probably be returning to see more, thanks for the advice!

  25. Anyone else try Rockettheme? I like em, but I wonder if theres other options… This is a tad unrelated but its on my mind… Just got burned by Templatemonster so I was just gonna toss it out there and see if anyone had a recommendation… Personally I like the new look of html5 and the stuff wix is doin…

  26. Nowadays most carpet cleaning services give you an instant quote when you specify the area and nature of cleaning required.
    First, you will need to fully understand your cleaning choices so that you can choose
    a one that would suit your needs well, since there are a lot of them on the market to select from.

    Professionals with one or more certifications must keep their status
    current by obtaining a continuing education certification.

  27. May have behavioral effect after the disappearance of the basic medical condition, and the sufferer of Tinnitus,
    Vertigo, Dizziness and Meniere’s Disease should undergo Rehabilitation in addition to any other treatment. Kilgard employs wires affixed to the neck to activate the area. But, of course, I realize this is something that is so easy to say and sometimes is a little more difficult to implement.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s