New super logo configuration - add your own text and font in no time!

After a few requests about making it easy to change the logo on Snappa we have in this release included a great feature that allows you to easily change the standard Snappa logo. You can actually replace the logo with any text of your choice as well as any font of your choice and of course in whatever colour you choose.

Your site name will, by default, be automatically pulled in from the Joomla configuration, but with Snappa you can set this to use any text you like in the templates configuration. As with all our templates, we try our best to keep things configurable for our users, which means less digging in the code for you.

Have a look at the image below to see a summary of the options for the logo:

Replace css based text with an image on the fly

To achieve the image replacement with the logo we are using a script called facelift by Cory Mawhorter. Facelift is a very clever little script that replaces the normal css based text with an image that is generated on the fly using a font of your choice.

Due to a licensing issue with fonts, we are not allowed to distribute any fonts with the template itself so you will need to add the fonts to the fonts directory yourself.

The easiest way to get started is to download the facelift files from their server. Upload (only) the fonts directory to the facelift directory in the Snappa template folder. This will work nicely as we have kept the configuration file in the same format as facelift default settings, so it will pick up all of the fonts from the Snappa facelift directory.

Grunge fonts resources

Now obviously best results will be achieved using a grunge font, so I have compiled a list of resources from where you can get some awesome grunge fonts that you can easily add to the template and use for your logo on Snappa. Just upload these to the Snappa facelift directory and then declare them in the config-flir.php file (you can find detailed information about doing this on the facelift website).

• Design Resources Pack #1: The Grunge Pack, Brushes, Fonts, Textures etc…
• Outlaw design blog: 30 New (Free) Grunge Fonts
• 1001 fonts: Grunge, Eroded Fonts
• Outlaw design blog: 63 Must have Grunge Fonts

You gotta love jQuery…

…and its ability to apply simple but useful effects on the fly!

You will notice a new addition to the Snappa demo: we have included a nifty accordion menu. This is not a module or a mambot and nothing needs to be installed. To implement it, we are using jQuery to apply the hooks we need and the effects to the standard Joomla menu. This is only available for Joomla 1.5 due to the improvements in the menu output in 1.5 which we are using as the base of this feature.

All you have to do to get it working is:

1. First set your menu module parameters to load sub items.
2. Make sure the menu is set to flat list.
3. Then add a separator in the relevant menu manager. The separator will act as the anchor for the sub links (only 1 level).

Now all you have to do is add the sub items within the separator item and stand back in awe as you see the nifty sub items slide down when the separator is clicked.

It is also possible to change this so it works on hover, simply by changing the following line of code in the index.php
jQuery("#jjSecondary ul.menu li span").click(function(){
to:
jQuery("#jjSecondary ul.menu li span").hover(function(){

Lastly, this is completely configurable. If you don’t want to use it, just turn it off in the template options and it will load as a normal menu. I hope you enjoy using it. :-)

Retro meets grunge in Snappa

During the last week of work on Snappa, I had an idea to make a very cool "retro meets grunge" header inspired by a great trendy geometric lines tutorial from Spoon Graphics. Now as much as I wanted to get this finished for the initial launch, I had to put it aside for a while and add as an update. I am pleased to say that I am finished and it can be seen in the header of the demo.

The full source files that I used to create the header are available in our template club for free download to all club members. If you are feeling a little creative then play a with the source files to modify my effect or make your own effect.

The actual lines were done in Illustrator and the grunge effect and refinements to give it some extra depth etc was completed in Photoshop. It is actually extremely easy in illustrator to change the colours and shapes of the lines, but most important is to keep the lines at 90 degree angles to each other to keep the geometric effect of the image.

Last but not least, I am using an image taken by a friend and more to the point, an absolutely fantastic photographer. Here is a link to the original image: "Marilyn Monroe in sepia". The image was perfect for what I wanted - to brings that fun and lively feeling to the header. I hope you enjoy using it.

I hope you like the updates. I would be interested to know if there are some other specific things you would like to see in Snappa. I am playing with the idea of creating a few different main body grunge backgrounds to choose from, so let me know if you have any ideas.