Rasa Documentation
Getting Started
Please ensure that you read the getting started articles in preparation for working with this template.
This template also uses the Zen Grid Framework which makes controlling widths, colours and sub themes for the Joomla template a breeze. Please make sure that you familiarise yourself with the documentation for working with the Zen Grid Framework before you get started.
Module Positions
Rasa is built on the Zen Grid Framework and has the same flexible and dynamic module position layout. The screenshot below highlights the module positions available in this joomla template.
More settings
The Zen Grid Framework allows for flexibility within individual templates while maintaining the same core codebase. The following are the specific variations to the Rasa template.
Layout Overrides: Rasa has a number of layout overrides to help fine tune the layout. You can find these files in the templates/Rasa/layout folder. In general you do not need to touch these files but if you need to make some changes to any of the following areas, then this is where you need to make them:
- bottom
- main
- nav
- panel - The Panel layout has been moved and the panel markup is actually found in the nav.php file.
- top
If you need to edit or change the layout across any of these areas of the template then you will need to edit the files in the layout/ folder.
As you can see Rasa does not override the footer file so members with a developer subscription or rebranding rights will need to create their own footer file from the templates?zengridframework/assets/layout folder. The unbranded footer file can be renamed to "footer.php", dropped into the layout folder and then enabled in the template parameters under layout > layout overrides.
Extensions featured on the demo
All of the extensions available from Joomlabamboo are compatible with this template. Not all are required for the running of the template and only some are featured as a part of the demo site.
The modules used on the demo site include:
Please see below in the frontpage setup for screenshots of the modules as they are setup on the demo site of this template.
Rasa front page setup
The screenshot below shows you the modules we have published on the front page of the demo site. Please see the descriptions below regarding the usage and any other relevant information of the modules.
Description
- The contact us menu is a core Joomla menu module published to top1.
- The logo is controlled in the template parameters also and has a width of 4 cols to match the width of the left column below it.
- The slogan at the top of the page is a custom html module published to the header4 module position and has a width of 8 cols set.
- The main menu is a core Joomla menu published the menu position. You can see a full run down of the settings required to recreate the layout and the superfish menu in the Zen Grid Framework documentation. The two line menu is achieved by using our JB Type plugin. For more information please check out the two line menu in Joomla over on our blog.
- The search module is positioned int he search position and is a core Joomla search position.
- The icons used int he left column in the Rasa demo site are sourced from Icons etc.
The screenshots below highlights the settings of the various modules included on the front page.
slideshow frontpage settings:
An example of the microblog modules published to grid4, grid6 or grid10.
Creating two line menu items
We use a simple technique that involves using our variation of the YBB BBCode syntax plugin with the core Joomla menu module. For more information you can read how to recreate a two line menu in Joomla on the Rasa demo site.
Recreating the home menu icon
You have probably noticed that the home menuitem on the Rasa demo uses an icon rather than the words home. There are a few ways to replicate this in Joomla but the way we chose to do it for the demo was to use the JB BB plugin which is based on the YV BB plugin - that can be used to render bbcode anywhere in Joomla.
The process to do this is very simple - involving two steps if you have already installed the bbcode plugin.
1. Upload the image you want to use for the home menu. (The one we used on the demo is available in the template's zip.)
2. Edit the home menu item and add the following code:
(Where home.png is the filename of the image you want to use for the menu item.). Also please note that there is an extra space int he code above to prevent the plugin from rendering the image here on this page.
You can see how we have done this in the screenshot below:
For ease of use you may like to make it an absolute link:
Please note that we have added a space after the img phrase to avoid it rendering on the page here.
Using an absolute url in the admin means that the home image will show up in the menu manager just like the screenshot below:
Module Classes
The Rasa template has a range of colourful variations of the base module classes that you see on the demo. There are essentially two types of module classes - a standard module title with a bevel edge underline and the smaller more discreet ribbon class.
Each theme in the Rasa template uses a different colour for the base -ribbon class suffix. You can see in the screenshot below how to recreate the smaller -ribbon class.
You can see the module classes in action on the demo site.
The first module in the left or right column
Since we use absolute positioning for the ribbon class and that when a module with the module class -ribbon is also the first module in either the left or right module position the heading floats beyond the start of the column, we recommend that you use the following syntax for the top module only:
[jb_code}-ribbon top{/jb_code}
Using this syntax for the module class for the first module in the left or right position will line the ribbon title up nicely with the top of the column.
Turning modules into sliders in the left and right position
Rasa has an inbuilt accordion for modules published to the left or right module position that can be enabled simply by adding the module class suffix -slide to any module published to the left. The accordion works in the same way as our panel menu and creates a cookie to store the open/closed state of the accordion from page to page.
To use the accordion simply apply the module class "-slide" as per the following:
-slide
This will make the module heading become the trigger to open and close the accordion.
If you would like to use the accordion effect with the other module options mentioned above please use the following syntax.
-slide green
-slide red
-slide brown etc
Here is a screenshot of an example of this syntax in action.
Configuring the K2 template
The Rasa Joomla template has K2 overrides built in and are activated simply by assigning the Rasa template in the K2 category or via the K2 menu item if you are displaying multiple categories form that menu item. As you can see from the screenshot below the Rasa K2 template takes all of the K2 meta information and outputs it into a slim right aligned column. If the meta info like date, comments, rating etc are not published then the item will just stretch to the full width of the content body.
To assign the Rasa template to your k2 categories and items you need to edit the category and apply the Rasa K2 template as per the screenshot below:
the use of css3
CSS3 effects for good browsersOne of the joys of web development is that browser technology is constantly changing and updating - new standards are being set all the time for how the web deals with specific layout and design challenges. Rasa incorporates some css3 techniques such as the text shadow on the headings and the slightly rounded corners in the menu and the panel.
Please note that these effects will not appear on browsers that do not support css3 and while they do enhance the page significantly, the advanced techniques degrade gracefully and do not disrupt the experience of the user who chooses to use the internet explorer family of internet browsers.
Starting with Rasa from a fresh installation of Joomla
Setting up the Rasa template in a fresh installation of Joomla is reasonably straight forward. This document assumes that you have already setup Joomla and you have also included the default Joomla sample data.
Elements to install.
- Essential elements Install the Zen Grid Framework
- Install the Rasa template and set it to default
- Install the JB LIbrary plugin and enable it in the extensions > plugin manager
Optional Elements
- Install JB Slideshow
- Install Microblog
- Install the JB BB Code plugin (For two line menus)
- Install K2
Elements to unpublish
- Unpublish all modules in the right column
- Unpublish all modules in the left module position except for the resources module
- Disable the module title in the breadcrumb module
- Disable main menu items except for home menu item
Elements to publish
Publish the search module to the search position and do not enable the search button. Also ensure the search module title is unpublished.
Change the position of some elements on the page
Move main menu to the menu position and make sure the module title is disabled. While you are there also set the number of columns to 1 for the main menu item.
While you are there if you intend to use the drop down menus ensure that you have set up the menu as per this knowledgebase item and also removed the module class _menu that the main menu ships with by default.
At this stage you should have a pretty simple and straight forward site to start creating your site from. For a detailed analysis of how to setup the slideshow and microblog modules on the demo site please refer to the main Joomlabamboo documentation for the Rasa template. The screenshot below shows you the default Joomla installation after following the points above.
Troubleshooting
Are you using the latest version of the Zen Grid Framework?
Rasa is only compatible with v1.0.5 + of the Zen Grid Framework
v1.0.5 of the Zen Grid Framework implements a lot of handy little features such as google font support, ability to hide the main content on the front page, supersubs javascript for the superfish menu, as well as fixes to the tagline and changes to the way that we implement the logo or site title.
The super fish menu does not fade or slide it just drops down
please make sure you have installed and published the JB library plug-in and that there is only one version of the jQuery library loading on your page.
My main content is not displaying
Version 1.05 of the Zen Grid Framework comes with the option of hiding the main content area on the front page e.g. the default menu item of your site. We've done this in order to help trim up any spacing or padding that is generated from the main content area that is not needed if you are not displaying any content on the front page. If you would prefer to display your content on the front page of your site, then please set the option to hide the main content area in the template parameters under layout > Gen. settings to show.
I get the following error after installing the Zen Grid Framework and a Zen Grid compatible template.
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/26/d171984212/htdocs/tradenet/templates/zengridframework/includes/yth.php on line 36
This error means that your server is using php v4 while the Zen Grid Framework needs php5 to function properly. Often changing to php5 is a matter of adding a rule to the htaccess file on your site but it's best to ask your host for help in determining the best way to use php on your server.
