Category Archive: Joomla Tips

Dec 19

Joomla! Tip #1: Editing the LUSH Template

I installed a new Joomla Template that I purchased from JoomlaShack. It is a very slick template with a style and feature set that I wanted. Unfortunatly, the colors weren’t really what I wanted, so I decided to try to tweak the colors myself. It turned into a larger undertaking than I expected, but in the end, I learned how to use a new application, and I think the results were pretty good. Read on to see how to edit the JoomlaShack LUSH template….

I was able to change the colors on the LUSH template by following JoomlaShack’s (rather sparse) instructions. It took some time, and was tedious, but it really wasn’t that difficult (at least from my perspective.) There are a number of ways to change the images, but the recommended way by JoomlaShack is to use the "Macromedia Fireworks 8" application to edit the images. Unfortunately, Fireworks is not a cheap program (at about $200+ USD) but you can download a fully functional trial version from the Macromedia site for free. I’m actually considering investing in it because I now understand how to use it, but it is a lot of money.

The changes required two steps:

1. Modifying the graphics:
Using Fireworks, I opened the file "Fireworks_lush001.png" found in the "Graphic Source Files" folder of the LUSH template. This is where all the magic happens.

{mosimage}

The entire template image set is contained in this one .png file.

I next clicked the bottom-left icon under the "Web" section on the Fireworks toolbar to "Hide slices".

{mosimage}

Then I clicked on each graphic element that I wanted to change, clicked the color selector in the Properties pane, and adjusted the colors to my liking.

{mosimage}

I did this for all graphic elements I wanted to change.

Next, I clicked the bottom-right icon under the "Web" section on the Fireworks toolbar to "Show slices".

{mosimage}

Notice that this overlays "slice" outlines on the template. These slices define each graphic element, and were defined by JoomlaShack. Be sure to not change any of these slice definitions!

Finally, I exported all the images using "File > Export" from the menu. I then copied these new images to replace the originals in the template.

2. Tweaking the CSS code:
I then made some minor updates to the CSS file changing some of the color codes using a text editor. This really took a lot of trial and error because I’m not a CSS expert, and the template CSS, though documented, can be difficult to decipher. I still have some color tweaks left to do, but they should be minor.

Tip #1:
Be very sure to save a backup of ALL of your original template files before you make any changes! You never know when you may want the originals.

Tip #2:
Should you decide to attempt making changes, I suggest creating a new "mainmenu" item in Joomla that refers to any existing page. Call it something like "Test Page", or some such. Then assign the LUSH template to only that page. You can then tweak to your heart’s content without affecting the rest of your site.

Tip #2:
Joomla Template files are simply .ZIP files containing the required files. You should be able to easily replace CSS files and image files within the template file. You could install and uninstall and install to test changes, but there’s an easier way. I did all of my editing (graphics and CSS) offline . Instead of uninstalling and re-installing the template, I just manually uploaded (via FTP) any changed files directly to the template directory on my Web host. Once I got things to where I liked them, I then downloaded the whole template directory as a backup.

The process is certainly not for the faint of heart, but it is certainly customizable, and the results can look pretty good.

Thanks to Andrew Smith of the UK for his interest in modifying the LUSH template. His inquiry was my inspiration for this tip!

Permanent link to this article: http://jimstips.com/joomla-tips/joomla-tip-1-editing-the-lush-template

May 05

Joomla! Review: Jom Comment

I was browsing the Joomla Extensions site , and stumbled upon a very cool Component / Plugin called "Jom Comment " that adds very nice article "commenting" capabilities to Joomla, giving your site visitors the ability to read and post comments about articles. Jom Comment leverages AJAX, presenting a clean, slick Web 2.0  style commenting system. It’s very complete, but its strength is in its simplicity.

{mosimage}

Read on for a quick review….

To preface this review, I have to say that I have never installed or tested any other commenting Components in Joomla. I have used them on countless other Joomla-based sites, but I never actually researched and tested them out for myself for use on my site. There are a number of other commenting choices out there, so by all means investigate them, but Jom Comments really caught my eye, and it delivers.

Jom Comment is found at http://www.azrul.com/ , and adds very simple, yet elegant Web 2.0 style commenting capabilities to Joomla. While reading an article, a site visitor can read any existing article comments as well as write comments of his own. And because it uses AJAX, it all happens right within the page without requiring full page reloads between actions. This saves bandwidth for both the site and the user, and it makes the user experience much cleaner. In fact, Jom Comment can even be configured to "auto update" so that you can see new comments as they are posted! Very cool! It also includes an RSS feature letting your site visitors link to article comments through any RSS reader!

Jom Comment is a commercial addon, but don’t let that scare you off. The Standard verison only costs $8.50(US) and it is really worth every penny. The author jokes about the low price on his site, but the fact is that because it is so low in cost, even if it doesn’t work out for you, you aren’t out that much at all. A limited trial version is available, and there is a "Professional" version in the works, but the Standard version seems to have just what I wanted in a commenting addon.

What it looks like

When you are viewing an article, you see a new "Add Comments (n)" link below the article:

{mosimage}

When you open the article by either clicking the article link or the Add comments link, you see the article normally, but now, at the bottom is a comment section:

{mosimage}

 When you submit the comment, it immediately appears below the article vor you to view:

{mosimage}

So from the site visitor’s perspective, that’s about it. It’s clean, simple to use, and nicely implemented.

But what about the back-end? What kind of control does the site administrator have? Here is a look at the Settings….

The Settings

Jom Comment is very configurable letting you tailor many functions to your needs. For example, you can determine if guests can post comments or not, you can determine on which sections comments will be displayed, you can determine if the comments will be moderated or automatically posted, and a host of other goodies.

You can even configure Jom Comment to email you whenever a new comment is posted. This can be nice to help keep an eye on comments and to help to prevent abuse without requiring moderation. And here’s a tip: Use a "plus" email address as your notification address. For example, enter "some.user+comment@gmail.com". If you have a Gmail account (or any email provider that supports "plus" addressing), set up a Filter in Gmail to automatically label these emails. This makes managing frequent comment notifications a snap!

Here is a screenshot of the main Settings screen showing the main settings:

{mosimage}

Security

Unfortunatly, there are unscrupulous people who abuse open systems, so security must be addressed. Jom Comment provides several levels of security to help prevent or reduce comment abuse. Here is the "Spam" settings screen:

{mosimage}

Layout

Youcan also tailor the layout to your needs.  Jom Comment is template-based, so presumably, you could create some very interesting and flexible layouts for your commenting. Here is the Layout screen:

{mosimage} 

Captcha

You can also leverage Captcha http://en.wikipedia.org/wiki/Captcha authentication to help reduce automated comment spam. Captcha presents a graphic image containing a string of random characters. The user must correctly enter the characters to successfully submit the comment. One thing I like about this implementation is that the characters aren’t so distorted that they are too difficult to read–a problem with many Captcha implementations.

{mosimage}

Support

OK, so my initial install had some glitches. I installed the Component, and then said to myself, "Now what?" Unfortunatly, the .ZIP file did not contain any documentation, and seemed to be missing some pieces. So, I emailed Azrul, and literally within minutes, he replied with an appology and a fixed file. Apparantly, he was in the middle of updating some things, and a bad version of the distribution slipped in. Anyway, I uninstalled and re-installed the new version, and it has been smooth sailing since! Thanks to Azrul for your swift and effective support!

Bottom Line

Overall, I think Jom Comment’s strength is in its simplicity. It seems to embrace the "UNIX way of thinking": Build a solid, simple program that solidly and simply does what it’s meant to do. It was easy to install, easy to use, and best of all, it’s unintrusiveness fits very well into my site!

So check out Jom Comment and see if it is something that would enhance your site to provide your visitors a better experience!

Permanent link to this article: http://jimstips.com/joomla-tips/joomla-review-jom-comment