|
Nifty Theme is a template for Joomla based on Nifty Corners Cube by Allesandro Fulciniti.
This is a free template for Joomla! created by JoomlaBear and can be downloaded here.
Nifty Theme uses the very clever Nifty Corners Cube technique to round the corners of DIV elements with a combination of Cascading Style Sheets (CSS) and JavaScript (JS).
Gloating over efficiency
Because the corner effects are achieved with CSS and JS the template is very, very lightweight. Approx 14 KB for the required Nifty Corners files and we've added about another 4 KB of Joomla styleing CSS. There are a couple of 1 KB images used to achieve the gradient background effects and we have to confess the vertical navigation also uses a background image to achieve a slightly rounded effect on each menu item. We would have liked to use the nifty script here aswell but IE couldn't cope with it... All in all its around 20 KB of template excluding your logo file and other images on the site - all of this will be cached by the browser after the first page view and your Nifty Theme will load like a flash of lighting.
Instructions for use
To achieve the effect of having the left column modules diplayed in their own rounded corner box we have created a series of Joomla module positions that are floated left - In the template we have used the Joomla modules User 1 through to User 9. If you wish to use this template you will probably want to publish your desired modules in these positions. As you can see in this example with the modules to the left of this text - Menu, Search, etc.
For the top menu to function properly you will need to make sure you have a Menu Class Suffix of -nav for the Top Menu and it should be published Top.
Alternatively you may want to publish all your left modules into User 1 which will give the effect of having one long vertical column.
There is no right column option in this layout but we may make some additions to this template in the future - feel free to contact us at JoomlaBear with any suggestions.
Notes
We have included a PNG transparency fix right into the template - it's a couple of lines of javascript at the top of index.php - feel free to remove it if you don't need it. Just delete the below code from index.php
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<?php echo $GLOBALS[mosConfig_live_site];?>/templates/<?php echo $GLOBALS[cur_template];?>/pngfix.js"></script>
<![endif]-->
|