JoomlArt Tutorials - JA Villadi

Home

JA Villadi

(2 votes)

Written by MiCCAS

JoomlArt: JA Villadi - User's Guide

Menu Types Configuration

JA Villadi offers you 4 types of our traditional menu. The menus applied are JA Split Menu, JA CSS Menu, JA Transmenu and JA Script Dropline Menu

* JA Split Menu: A horizontal menu with sub menu items of current menu display as a module in left position.
* JA CSS Menu: Flat and fast drop down menu using CSS based markup.
* JA Transmenu Menu: Famous animated, transparent JavaScript drop down menu.
* JA Script Dropline Menu: Evolved from JA Split Menu, having the sub items appear and disappear instantly with JavaScript.

To choose your menu type, go to the 32nd line in the "ja_villadi/ index.php" and change $ja_menutype to what you need.
1 is Split Menu, 2 is CSS Menu, 3 is Transmenu and 4 is Script Dropline Menu

Screen Resolution Configuration

JA Villadi allow you to set 2 types of screen resolution. You can easily config JA Villadi template's width by modifying the Template Configurations part in the "ja_villadi/index.php".

To choose which screen's width you want to use, go to the 24th line of the "ja_villadi/index.php" file and change the value of $ja_width_default to 'wide' (1024x768), 'narrow' (800x600)

Font Resizer Configuration

You can also configurate the font resizer function. Go to "ja_villadi/index.php" and replace the value of $ja_font_size_default to the size you want. You can choose the font size ranged from 1 upto 6.

Tools Configuration

To enable/disable the font and resolution resizer, you can use the variable $ja_tool in the 30th line

Set to 0 to disable all, 1 to enable resolution, 2 to enable font tool and 3 to enable both resolution and font, 4 to enable only color, 5 is to enable color and resolution, 6 is to enable color and font and 7 is enable all.

Typography

Beside the traditional typography since JA Pollux, JA Villadi has been multiplied with 4 more typography styles:

* The Sticky Note. Use <p class="stickynote">Your note</p> to form a sticky note
* The Pin Note. Use <p class="pinnote">Your note</p> to form a pin note
* The Clip Note. Use <p class="clipnote">Your note</p> to form a clip note
* The Block Number. Use <p class="blocknumber"><span class="bignumber">Number</span>Your content</p> to form a block with big number.

The traditional ones are:

* Highlight text. Use <span class="highlight">Your text</span>
* Tips. Use <p class="tips">Your tip</p>
* Source code. Use <div class="tips">Your code</div>. You can also use the <pre> tag instead.
* Blockquote. Use <blockquote>Your quote</blockquote>. Note: for simple and semantic markup, the blockquote is designed with only the open sign.
* Error message. Use <p class="error">Your error message</p>
* Info message. Use <p class="message">Your info</p>
* Drop cap style. Use <p>< span class="dropcap">D</span>rop cap</p>

Template Effects

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

* Reflex Image
To have a reflex image on your content, put the inside the <div> tag like this

Code:

<div class="reflect"></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

Code:

<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 don't know how to change this, read the FAQs below.
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

Code:

 <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

Code:

<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.

JA Header Module

With JA Header Module, you can choose between Fade Javascript style, or Flash Object style to display your cool images. All are XHTML validated and have flexible parameters for you to configure. To download JA Header Module, please go to JA Antares download area as it first release was since JA Antares

* Go to your Administration Panel, and choose the Modules in Install Menu.

Then, choose the mod_ja_header.zip (you can download the file in JA Antares Club Download Folder). And then, press the Upload & Install button.
* After successfully installed, the modules will be placed at menu Modules -> Site Modules

Navigate through the list and select JA Header Module.

* In Module Detail Settings, please set up the module attributes look exactly like this image.

* In Module Parameter Settings, please set up the module parameters to suit your needs

For more information, these settings mean:

Header type: Type of the header: JavaScript or Adobe Flash.

Image type: Supported image types. Use "|" as a separator.

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.

Width: Width of the header, you can use per cent or pixel as unit.

Height: Height of the header, use pixel as unit.
For JA Villadi, use 200px as the height of the module.

Timer: Time for the next image will be appeared. Use second as unit.

Order: Determine how image will appear: sequential or random.

Fadetime: Speed of the transition. Use 1 as slowest speed.

Looping: Repeat option in sequential mode.

xpos and ypos: The offset of the image in its container. Use 0 as default.

Frequently Asked Questions

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 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 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;"></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.

Q: I changed my default color/font/resolution but when I refresh the page, it didn't change?
A: JA template use client's cookie to save your preferences. If you made change to default value, please close the browser, open a blank new window and then clear the browser's cookie. You'll see the new preferences applied.

Q: Some of my menu looks horrible. Why?
A: Menus in JA templates are designed with the most semantic mark up are used over the net, it's the list style. If you made change to the menu type, go to you menu module and change the menu type parameter to Flat List. It will solve the problem.

Q: I want to change some graphic contents
A: PSD 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.

< Prev		Next >