• 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 Teline
JA Teline
(12 votes)
Written by MiCCAS   
1. Menu Types Configuration

JA Teline 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 below

* 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: Bar-liked submenu will appear when the parent menu is hovered.


To choose your menu type, go to the 32nd line in the "ja_teline/ 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.


2. Screen Resolution Configuration

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

To choose which screen's width you want to use, go to the 24th line of the "ja_teline/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 configurate the font resizer function. Go to "ja_teline/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.




4. Color Configuration

JA Teline comes with three colors, the default blueish and the alternate red and green colors. To change default template color, go to "ja_teline/index.php" and change $ja_color_default to the color you want ('default', 'red' or 'green')




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 Teline 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>
*
* The Hilight Blockquote. Use <div class="quote-hilite"><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>
* Newspaper note. Use <p class="newspaper"> Your newspaper note goes here! </p>
* Video link. Use <span class="video"><a href="video_link" title="video_title">Your video text</a></span> to form a video link.
* Grey paragraph. Use <p class="box-grey">Your paragraph text</p> to form a grey paragraph.
* Hilight paragraph. Use <p class="box-hilite">Your paragraph text</p> to form a grey paragraph.
* Box with normal caption. Use <div class="caption"><h3>Your caption</h3>Your content goes here</div>
* Box with capped caption. Use <div class="captionBox"><h3>Your caption</h3>Your content goes here</div>
* Box with hilighted, capped caption. Use <div class="captionBox-hilite"><h3>Your caption</h3>Your content goes here</div>
* Box with story mode caption. Use <div class="story-hilite"><h3>Your caption</h3>Your content goes here</div>
* Image with spaced border. Put class="border" inside your <img> tags.

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 Hidden Panel (Member Area)

The hidden panel on top of the template will be shown when you click to Member Area text beside the search form. It will contain modules which is put in ja-hpanel position. To add a Joomla! position, please take a look here



You can't put the original Joomla! Login module in this position because its HTML markup can not be styled this way. Use JA Alternate Login Module instead. You can find this module under JA Teline download area. Download mod_ja_login.zip, install and publish it to ja-hpanel position.


8. JA Tabs



JA Teline supports multi tabs information presentation. Create the position ja-tab1 and ja-tab2 and put your modules in these positions. Modules put in ja-tab1 will be in the top and ja-tab2 is in the bottom of the panel.


9. JA News

JA Teline is integrated with JA News module. Create ja-news position, go to JA Teline download section, download mod_ja_news_for_teline.zip and then install and publish the module to this position.



JA News configuration

* Disable Joomla! original frontpage Go to Menu -> mainmenu to open main menu settings:



Select Home menu item:



Set the value of Leading and Intro to zero (0):



* Basic config:



* Detail config:



* Config description:
JA News module consists two part as you see in the Demo. The first part of the module is JA Ajax Headline, which shows the latest frontpage news items in a rollover box. The second part is the other news classified by your categories. Here's the full description.

Headline part:
Show Headline: Determine whether the headline was showed.
Headline text: Title of the headline if showed.
Number of headline news: Number of items in the rollover box. These items is your latest frontpage items.
Headline fixed height: Fixed height of JA News Headline. Use it if your news intro have noticeable height to prevent flicks in your site.
Auto Roll: Set the rolling state for first time user.
Rolling delay time: Delay time of the roll between two items in rollover box (in seconds).

Other news part:
Category ID: Categories that your news items will be selected from, separated by commas. Leave it blank means all categories will be selected.
Link Items: Number of other items listed in each category.
Max Chars: Limit the number of characters in the showing item of each category.
Image Width: Fixed width of the image of news item.
Image Height: Fixed height of the image of news item.
Columns: Number of columns division.
Show Intro: Determine whether the intro text was showed.
Show Image: Determine whether the image was showed.
Hint: To know what id is your category, go to Content -> Category Manager and look at the Category ID column.
Make your news intro have the same length of text, it will make your module looks smoother.


10. Frequently Asked Questions

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

 
< Prev   Next >