• Narrow screen resolution
  • Wide screen resolution
  • Auto width resolution
  • Increase font size
  • Decrease font size
  • Default font size
Site Controls

JoomlArt Tutorials

Saturday
Sep 06th
Home arrow ReadMe arrow JA Utahia I & II
JA Utahia I & II
(0 votes)
Written by MiCCAS   
1. Menu Types Configuration

JA Utahia offers you 3 types of our traditional menu. The menus applied are JA Split Menu, JA CSS Menu and JA Transmenu

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


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



2. Screen Resolution Configuration

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



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

3. Font Resizer Configuration

You can also configure the font resizer function. Go to "ja_utahia/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 up to 6.



4. Color Configuration

JA Utahia comes with three colors, the default blueish with Web 2.0 color alongside with the red hot and natural green colors. To change default template color, go to "ja_utahia/index.php" and change $ja_color_default to the color you want ('default', 'hot' or 'natural')



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

6. Typography

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

* The New Blockquote (with open and close quote). Use <div class="blockquote"><blockquote>Your quote goes here!</blockquote></div>
* Rounded Speech Bubble. Use <div class="bubble1"> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div>Bubble </div>
* Square Speech Bubble. Use <div class="bubble2"> <div> Your Bubble goes here! </div>Bubble </div>
* Rounded Thinking Bubble. Use <div class="bubble3"> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div>Bubble </div>
* Square Thinking Bubble. Use <div class="bubble4"> <div> Your Bubble goes here! </div>Bubble </div>
* Download Button. Use
Code:
<a href="yourlink" class="but-download" title="Your title">
<span class="download">
<strong>
Your title
</strong>
<span>
Your description
</span>
</span>
</a>
* Signup Button. Use
Code:
<a href="yourlink" class="but-signup" title="Your title">
<span class="signup">
<strong>
Your title
</strong>
<span>
Your description
</span>
</span>
</a>
The traditional ones are:

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

7. JA IconMenu
JA Utahia introduces the new and impressive fish-eye style menu called JA IconMenu. Here's the step to configure this menu.

* The default menu for this menu is topmenu. If you want to change it, go to ja_iconmenu.php and change the value in line 9th to the name of the menu needed to be changed.



* To add icons to menu items, make two images sized 32x32 and 64x64 for each item, named it itemname.png and itemname-big.png. The icon should be 24bit PNG transparent format. Upload these files to images/stories folder of your Joomla!.
* Then, go to your Administration Panel, Menu -> yourmenu.



Choose each menu item



and assign the itemname.png as its Menu Image.



* If you don't want to use JA IconMenu, just set the value of $ja_iconmenu in line 34th of the index.php to 0.

8. Reflection Logo
Follow the following step by step to design a relection logo for your site.

1. Open a new document in photoshop. Set the width/height to 400px/200px to have nice canvas area to work with your text.



2. Select Type tools and choose a fonts, type out some words.



3. Goto layer, duplicate layer. Accept default and click OK.

4. Use the move tool, and move your layer copied Type layer down just below the previous layer.



5. Goto Edit > Transform > Flip vertical.



6. Click the "Add layer mask" button from the layer panel, A small white box should appear in the copied layer, Make sure to click this box so that it is highlighted and active.



7. Select the Gradient tool. Accept the default Black to White gradient.



8. Click at the bottom of the text and drag upward, the let go. This will cause the copied text to have the appearance of a reflection.



9. This same technique can be use on color text, images, or any other ojects.

Note: You can also download a Plain text reflection guide for further reference.

9. 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_utahia/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.

A: I changed my default color/font/resolution but when I refresh the page, it didn't change?
Q: 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/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.

Please report bugs of Utahia in this thread. Thank you for your reading.

Module Styles

JA Utahia II offers you many styles of module suffix to help you to get impressions from your module blocks, especially for the right position modules. Add the module suffix '-fresh', '-hot', '-natural' and '-hilite' to highlight modules with your color theme.

http://www.joomlart.com/forums/attac...2&d=1175588859
 
< Prev   Next >