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]

#131856

JA Villadi – Userguide for Joomla! 1.0.x

• For users who start your Joomla! site at the beginning, I recommend you using QuickStart package of JA Villadi, named as ja_villadi_quickstart_v…_j1.0.x.zip. For instruction how to use JoomlArt quickstart package, please check the QuickStart guide

• For users who new to Joomla!, there are many useful documents available at http://joomla.org about Joomla! and how to use, please spend some time to check them out.

Here is some other guides that may useful for you:

• How to install JoomlArt QuickStart package?

• How to create a new module position in Joomla!

• How to install JoomlArt template?

• For users that already have a site with contents and other extensions installed, please follow my instruction below to understand how JA Villadi works:

I. TEMPLATE

1.1 Template Installation

After downloading JA Villadi package and extract it, you will find template package named: ja_villadi_template_v…_j1.0.x.zip

Proceed installation of JA Villadi 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 Villadi 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 Villadi template, check How to configure Joomla! template guide!

You can change all JA Villadi parameters as you wish.

1. Font size : Increase/Decrease font size (from 1 to 6).
2. Template Width: type of template screen (Wide/Narrow screen)
3. Menu Module: include Split/Css/Trans/Script Dropline menu
4. Color Variation: 3 color themes (Default, Orange, Green)
5. Menu Type: type of menu displayed in site (Mainmenu/Topmenu…..)
6. Display template tool: include No display/Screen type/Font size//Screen type and Font size/ Font size and Color css/All tools

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

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

1.3 Template Effects

These are some steps to make your JA Villadi have some glossy and lovely effects like what was seen on the demo.

Reflex Image:

• To have a reflex image on your content, edit HTML source of your article by putting {mosimage} within <div> tag as follows:

<div class="reflect">{mosimage}</div>
<p>Lorem ipsum dolor sit amet consectetuer est aliquet Sed lorem elit. Ridiculus leo quam Vestibulum et Al...

• Or if you are using a plain image, just put the class=”reflect” into your img tag, like this

<img src="..." ... class="reflect" />
Module Styles:

• JA Villadi offers you many styles of module suffix to help you to get impressions from your blocks. Add the module suffix -orange, -green, -blue to fit the highlight module with your color theme.
• If you’d like to set a module to be another colour, you only need to follow the instructions I’ve set out for you below:

• Go to the Site Modules area and open the module you wish to change colours for
• Look for “Module Class Suffix”
• Save the module

Note: If you want to use a module without a title in right position, please add module suffix -notitle to your module.

Spotlight Modules:

• To set up 3 eye-catching modules with transparent images compatible with all browsers (including IE6 – The PNG Destroyer) in spotlight area, you have to put this into your modules’ content.

<script type="text/javascript">
od_displayImage('your-image-ID', 'full-path-to-your-image-(without-the-dot-png-extension)', width, height, '', '');
</script>

• While your-image-ID is your image’s ID, width and height is your image’s width and height in pixel.

Here’s an example

<script type="text/javascript">
od_displayImage('plain_right', 'http://www.joomlart.com/template/ja_villadi/images/stories/demo/plain_right', 200, 114, '', '');
</script>

• Then place the modules into top, user1 and user2. You’ll have three modules on the spotlight, using PNG 24bit transparent image and it will blend well with the black and glossy background.

II. EXTENSION INSTALLATION

When extracting JA Villadi package, you will see the folder named Extension with all extensions built in the JA Villadi, including JA Header module. That means when you install via template installer, you need to install JA Header modules separately, then configure their positions as instructed in Template configuration section.

You check How to install Joomla! module guidefor installation.

Extensions built in JA Villadi comprise:
Note: [xx] stands for module position

• [header] JA Header module

JA Header module(mod_jaheader.zip)
[position: header]

On demo, it looks like:

In Admin panel, go to Modules>Site Modules and click on module name ( JA Header Module )to go to configuration page.

Here are the setting of JA Header on demo:

Parameters explanations:

1. Header type: Type of the header: JavaScript or Adobe Flash.
2. Image type: Supported image types. Use “|” as a separator.
3. Image folder: The folder that module will look for images. The default folder is templates/ja_antares/images/header. Change it to templates/ja_villadi/images/header to get JA Villadi’s images. Note: Use forward slashes instead of backward slashes.
4. Width: Width of the header, you can use percent or pixel as unit.
5. Height: Height of the header, use pixel as unit.

For JA Villadi, use 200px as the height of the module.



6. Timer: Time for the next image that will be appeared. Use second as unit.
7. Order: Determine how image will be appeared: sequential or random.
8. Fadetime: Speed of the transition. Use 1 as slowest speed.
9. Looping: Repeat option in sequential mode.
10. xpos and ypos: The offset of the image in its container. Use 0 as default.

III. TYPOGRAPHY

JA Villadi came with a rich typography to give users more ability to customize content look and feel. Please check all JA Villadi typography here at JA Villadi Typography

IV. 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_villadi/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