Joomla Templates Club 406,261 posts

[Hung Dinh Friend Hung DinhJoin date: September 2014Posts: 4408Downloads:11Uploads:189 Thanks: 309 Thanked: 3310 times in 3 posts]

#132166

JA Pluto & JA Pluto Extra – Userguide for Joomla! 1.0.x

JA Pluto – the April 06 template from JoomlArt.com Template Club seems to be the most ambitious template so far. With a gamer look, movie and media portals inspired style, JA Pluto will certaintly make your site “stand out” from other joomla! templates.

The best and interesting part should be the presentation of MooFX technique into Joomla site without any core changes to Joomla. Though JA Pluto looks like a graphic rich template, it is highly accessible, web-standard compliant, browsers friendly, XHTML 1.0and CSS validated template.

JA Pluto Extra – the bright color of JA Pluto template. This bright color Pluto version can be easily repurposed for a variety of different sites by simply changing the logo graphic and the layout of MooFX tabs

I. TEMPLATE

1.1 Template Installation

Download template package named: JA Pluto for joomla 1.0.x

Proceed installation of JA Pluto as other normal Joomla! templates. If you don’t know how to do installation or set a template as default, please check the How to install Joomla! template guide.

After installing and setting JA Pluto as default template, your site should look like this:

To see position located in site, in Navigation toolbar input string “?tp=1” at the end of site link

1.2 Template Configuration

To configure JA Pluto template, check How to configure Joomla! template guide!

You can change all JA Pluto parameters as you wish.

1. Template Width: type of template screen (Wide/Narrow screen)
2. Display template tool: tool will be displayed on frontpage, you can Display or No Dislay tools

JA Pluto module positions are available here. You just need to configure your modules to be loaded on those positions to match JA Pluto style.

If you don’t know how to create module position in Joomla!, please follow this guide

1.3. Other notices

• If you want to change or remove something in the footer, just open the “ja_pluto/footer.php” then modify it to suite your needs.
• The {mosimage} may show some extra padding and margin. To solve this problem, go to your Joomla! Administrator -> Mambots -> Site Mambots and change the margin and padding parameters of MOS Image mambot to 0.
• PSD/PNG files and fonts can be found in the template’s source package. Please download the file at our download page in case you need to modify something.

II. SETTING UP JA MOOFX ROLLER

JA Pluto uses the latest version of moofx library. It is the nice and cool animation you see when you play with the tab panel on top. We had made some extra stuff from the original moofx to make the panel looks smarter and easier to use. Now the extra moofx has these features:

• Tabs animation only run on first page load for the easy of pages content reading.
• Can remember the last tab you’ve clicked through the session.
• Can close and open tabs.
• Fairly easy to configure.

JA MooFX Roller is a new cool feature using moofx library developed by Valerio Proietti (http://moofx.mad4milk.net )

2.1 Configurations

The moofx animation we used here have two list of elements. One is the togglers, and one is the stretchers. When we click the toggler, animation will be played at the equivalent stretcher.

If you don’t want to make much changes, you may not want to edit them

Here’s a little configuration to help you play with the roller.

• Firstly, open the file “ja.moo.roller.config.js” located in the /ja_pluto/scripts folder.

• j_opacity: set to true if you want to use the fading animation. Note that it won’t work with Opera because this browser doesn’t support opacity.

• j_delay: the duration of the animation by miliseconds.

• j_transition: moofx basic types of transition. We have four options here, try and feel the differences if you want.

• j_stretcher: className and id’s prefix of the stretchers. In this case, the stretchers are <div> tags.

• j_display: className and id’s prefix of the togglers. It’s <li> tags now.
• j_displayhover: the suffix of the class of hover togglers.

2.2 Adding tab

The toogler and the equivalent stretcher should have the same format for its id. If the toggler’s id named “headtab-something“, its equivalent stretcher’s id should be “stretcher-something“.

So, if you want to add more tab, just do these steps:

• Add <li class=”headtab” id=”headtab-yourtabname”><a>Your tab name</a></li> into the <ul> (around the 90th to 107th line).

• Add <div class=”stretcher” id=”stretcher-yourtabname”>Your content</div> into the wrapper <div> (around the 111th to 135th line).

You can add as many tabs as you want, but you should name them by this rule to make it works.

Note: If some modules you used in some tabs doesn’t show in some pages, it’s because they weren’t published to this page.

III. FREQUENTLY ASKED QUESTION

Q: I want to add a template position in to my Joomla!
A: Go to your Administration Panel, Site -> Template Manager -> Module Positions. Add your template positions and hit the Save button.

Q: Where can I change my footer?
A: If you want to change or remove something in the footer, just open the “ja_justicia/footer.php” then modify it to suite your needs.

Q: My images take a lot of white space and do not look good?
A: The {mosimage} may show some extra padding and margin. To solve this problem, go to your Joomla! Administrator -> Mambots -> Site Mambots and change the margin and padding parameters of MOS Image mambot to 0.
Q: Images without caption are stuck with text?
A: It is because Joomla! generates the code different when {mosimage} has and doesn’t have its caption. So when you decide that the image will not having a caption, put it between the div tag like this <div class=”mosimage” style=”float: left;”>{mosimage}</div>

Q: What’s a module style? And module class suffix?
A: Almost modules offer you a parameter called Module Class Suffix. Set a value for this parameter and you will have your module’s appearance differs from the others. JA templates often provide you some module styles which can be found in Module Styles area of the guide.

[Author]

Posts