Detailed Setup
This is a documented and more detailed explanation of how to setup Dark Rational on your Joomla site.
Step 1.) Installing the Template and setting the Template Configuration
- Now go to "Installers > Template Site"
- Browse for the template zip file in the Template folder.
- Click "Upload File and Install".
- Click "Continue..."
- In the Template Manager, select the new template's radio box and click on the "Default" button (top right).
The template will now be successfully installed. Now you can proceed to configuring it.
Most of the template options can be done via the backend of Joomla under the templates configuration section. Here is a screnshot of the various options you can adjust. For more detailed descriptions of what each things do, hover over the names on your Joomla install.
Step 2.) Setting the module options.
We have setup the entire template to pretty much work "out the box", so there isn't much you need to do but tweak it how you want it to look.
Menu Setup
The left, (or right depending upon how to configure your site) menu by default does not look styled.
In order to make your menu look like the menu on our demo please go into the modules configuration and change the menu style to "flat list". You can also leave it set to "Vertical" (which will also allow you have submenu items as in the demo), but keep in mind the vertical output is using tables, which is not good for SEO (with a menu)...
Now your site should look the same as our demo.
Intelli Modules
Intelli Modules from JoomlaJunkie will allow you to have infinitely more
module positions then what Joomala currently allows.
Simply publish 4 modules to the same position, and our Intelli Modules will
automatically space themselves out properly for you so there are no blank
spaces or empty spots.
Intelli Modules span to a maximum of three column 3 wide, then add a new row below that is full width or three wide depending upon how many modules you insert into the position.
The max you can have is a total of six, with three per row.
No other template company offers this much module flexibility
that is easy to use as well.
Configurable Sidebars
This allows you to change your sites layout, depending on the content that your users are viewing. "content" is the main content area and "sidebar" is the sidebar. If you set the configuration to "content-sidebar" then this will show the content on the left and sidebar on the right, where as "sidebar-content" shows sidebar and then content. If you nly set "content, then no sidebar wil show" This can be set on a per component basis, so you can have a configuration for Fireboard as shown above to use the full width and no sidebar.
This graphic shows the wide difference changing your default layout makes.
These screenshots demonstrate some of your options.
Editing your index.php to configure your sidebars
To edit and adjust the configurable sidebars you need to open up your head.php file in the templates folder. By default Joomla modules will function as normal . If you need to disable or rearrange all your sidebars by using this feature, you can edit it accordingly.
-
// Use the following option for quick off LEFT and RIGHT positions displaying.
//By default
'default'=>'left-content',
// specify extra options for different components
// if you do not write left or right - these positions wont be published
// left-right-content | right-left-content | content-right-left | content-left-right
// left-content-right | right-content-left
// right-content | content-left | left-content | content-right
'com_myblog'=> 'left-content',
'com_fireboard'=> 'content',
'com_content'=> 'content-right',
'com_frontpage' => 'left-content-right', <--(Joomla 1.0 only)
'com_weblinks' => 'left-content',
'com_contact' => 'left-content',
);
?>
Module Positions
Below are all the module positions available in Dark Rational.
Intelli Modules are highlighted in red.
Print this image out for a quick reference.
TIP: Setting up your menu's drop down (child) items.
The built in Suckerfish menu brings in the Joomla "Main Menu" by default. This can easily be changed to another menu by changing the configuration option in the templates index.php file (right at the top).
With our new SuperMenu you have 5 options to pick from, so one of them is bound to be a perfect fit for you.
In the Menu Manager, you will notice by default the "Main Menu" does not have any child items assign. All top level menu items will be displayed as the primary "tabs", then any child menu items will automatically be displayed as the drop down options when you hover over the top "tabs". To setup the child items for a particular tab do the following:
- In your Joomla Admin area, from the top menu, navigate to Menu > Main Menu (or which ever menu you chose to use in the previous step).
- The menu manager will list all the menu items that are set in any of the particular menus. All the top level menu items are displayed flush against the side in the list and all child menu items are indented from the parent menu item. This may sound overly complicated, but once you see the structure it will instantly make sense which menu items are parent menu items and which are the "children".
- To assign a child menu item, first create a new menu item as usual, then in the options for that menu item, select which of the existing menu items you would like to be the parent. Again you will notice in the menu's options, the existing menu items that you can choose from are also structured in a hierarchical way, so it will be easy to see which is the parent and which is the child.
3 - Working with the module suffixes & the new ModFX
Module effects are additional classes that can be added to modules to make content stand out or be styled in exciting ways. You might want to make the login module pop out, or accentuate the poll module, this is how you do that. You can check out the live site examples on this page of the demo.
Use the module suffix of "nopadding" to remove all styling from the module.
This is useful when you do not want any colors or headers for one module.
Here is a summary plus a few examples of the styles
Header Color Styles-(User h3style-01-->h3style-8)
Can be used in module postions left, right, user1 & 2, advert1 & 2 & 3 and bottom)
Here are a few examples of the visual style options with this setting
Header Background Styles-(User h3style-09-->h3style-17)
Can be used in module postions left, right, user1 & 2, advert1 & 2 & 3 and bottom)
Here are a few examples of the visual style options with this setting
Icon Styles-(iconstyle-01 --> iconstyle-16)
Can be used in module postions sidebar, inset(s) and top
Here are a few examples of the visual style options with this setting
Background Styles-(User bgstyle-01-->bgstyle-10)
Can be used in sidebar only
Here are a few examples of the visual style options with this setting
Background Styles-(bgstyle-11-->bgstyle-13)
Can be used in module postions Inset and Top)
Here are a few examples of the visual style options with this setting
So how do you use them? Well lets say you want a module that stands out from the rest, you would set the module class suffix field to h3style-13 bgstyle-04.
This adds a grey shiney background to the module header that matches the theme and a purple background to the module box. Mix and match the suffixes to achieve exactly the look and feel you want.
It is also important to note that if you are using our SuperSlider module you must add "blackbg" to the pageclass suffix in the menu parameters for the page it is loading on. (i.e. home)
TIP: Setting the "Blog" View Contents to display as 1 column not 2.
By default, when linking to category or section of content items, Joomla sets the "blog view" to display in 2 columns. If you would like to change this so that they display one underneath the other, simply open up the menu link for that category/section and from the right hand side "parameters" options, set the options as follows:
- Leading: 1
- Intro: 0
- Columns: 1 (this is the important part)
TIP: Getting TinyMCE Editor to display properly.
One of the most frequent questions we get asked is how to get the default Joomla editor to display properly when editing content. The problem that occurs with the way the editor works. By default, it will automatically pull the styling from the published template, which means if there is a background color or graphic set on the templates frontend, this will be used as the editors background. This makes editing content really difficult. To get this to display a normal white background all you need to do is login to your Joomla! admin, go to the Mambots Manager, click on the "TinyMCE WYSIWYG Editor" to edit its properties. From the modules parameters on the right, make sure that "Template CSS classes" is set to No. This will then revert the editor to use its own default styling, giving you a nice white background to edit your content in.
TIP: Site Footer Menu.
We are using the "Other Menu" module to act as the footer, as there isn't a footer menu by default in Joomla!. All you need for this to work properly, is open the "Other Menu" module, set a module and menu suffix
of "-footer", choose Menu Type: "Flat List" and assign it to the "Footer" module positon.
Setting up the fancy accordian menu
You will notice a new addition to the Dark Rational 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.
All you have to do to get it working is:
- Make sure your menu module parameters option "Always show sub-menu Items" is set to yes, and also set to flat list.
- Go into the menu manager.
- Choose to edit the menu you are going to use as accordion.
- Change your top menu item for the accordion part in that menu to be a Separator (same place as where you normally choose Article view, Blog view etc). The separator will act as the anchor for the sub links (only 1 level).
- Now all you have to do is add your menu items as sub items to the Separator.
It is also possible to change this so it works on hover, simply by changing the setting in the templates config. 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.
