Userguide – JA Teline III for Joomla 2.5

Forums    Joomla Templates Club    JA Teline III    JA Teline III v2 - T3 Framework 2    Userguide - JA Teline III for Joomla 2.5
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • Hung Dinh Friend
    February 24, 2011 at 8:11 am #159844
    Userguide – JA Teline III for Joomla 2.5

    <strong>A. Get to Know Your Template</strong>

    Everyone should read the Template’s Overview Article! This is a quick and complete overview of the template, from the colours included, to all of the powerful Joomlart complimentary extensions that come with it. You’ll also find links to the LIVE Demo Site, the Download area, as well as the Forum to ask questions.

    Need Help Getting Around Joomlart.com? We’ve created a QUICK ACCESS GUIDE for help you become a Joomlart Power User. This is a wonderful reference full of tips on quickly finding template info, demo sites, module position guides and more. We don’t want you to miss a thing!

    <strong>B. Download Template and Extensions</strong>

    Check download folder for the Quickstart, Template zip and other complimentary extensions zip files.

    Plan your site Development.

    1. Making a New Site ? – If you are planning to make a new site, then use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package. .
    2. Installing on your live site ? – If you are planning to use this template on your already live site. Then you should follow How to make your site look like demo site guide first to know about the steps involved. Then you can follow up the userguide below.

    The user guide covers the following aspects :

    1. Installing Template on your Joomla
    2. Installing T3 Framework 2 Plugin
    3. Installing complimentary / included extensions.
    4. Custom HTML Modules.
    5. Menu configs

    Hung Dinh Friend
    February 25, 2011 at 2:49 am #378338

    1. Installing Template on your Joomla

    1. Browse and Download : Go To Download Folder of JA Teline III for J16 and download the Template zip file. Refer this screenshot for overview of download folder.

    2. Install the Template : Now install the Template to your Joomla 1.6 . Follow This Guide if you are new.

    Template Configuration :

    JA Teline III template will install with Settings used in the demo site. So you can delay the configuration until you complete the setup (installing the other modules / plugins used in the demo site).

    Once, you have completed the setup, you can come back to the template backend and check the various options for customizing your template. Refer this Universal T3 V2 Backend Config Guide for options to customize your installed template.

    Please Note : T3 V2 template configurations are same in Joomla 1.5 and Joomla 1.6 . So the above guide link is valid for both.

    Links to resources on T3 V2 Framework templates and advance configs :

    Error ? – I see “Missing T3” error on the frontend?
    T3 framework 2 based templates need the T3 Framework Plugin to be installed and enabled.

    2. Installing T3 Framework 2 Plugin (T3 system plugin)

    Download the T3 Framework 2 Plugin ( aka T3 System plugin), install and enable it.

    If you are new, then follow This Guide to learn to install plugins in Joomla.

    Hung Dinh Friend
    February 25, 2011 at 2:49 am #378339

    3. Installing complimentary / included extensions and Demo configurations :

    • Free Extensions : (aka complimentary / included extensions). We use many extensions in our demo site to provide greater flexibility and features. These are provided for free to our members.
    • Custom HTML Module : To match the design of the template, we also style (CSS) for Custom HTML modules using different div classes. You will need to check the HTML codes and make sure to use the recommended HTML markup to get correct display. We provide the HTML code in this userguide.

    Know your Module Positions :

    1. View Module Position Image (used positions only).
    2. Use Module Position Overlay in Template (used & empty module positions).


    TIP     : Read more about Checking and Finding Module Positions in T3 Templates.

    Installing and Configuring Included Extensions :

    List of modules / plugins used in JA Teline III Template Demo :

    1. JA Bulletin Module
    2. JA News Featured Module
    3. JA News Pro Module
    4. JA News Ticker Module
    5. JA Twitter Module
    6. JA Bookmark Plugin
    7. JA Thumbnail Plugin
    8. JA JA Disqus Debate Echo Plugin Plugin
    9. JA Tabs Plugin
    10. JA Popup Plugin

    IMPORTANT : We provide settings screenshot from the demo site. Make sure you configure your modules / plugins with the same configs to achieve demo site alike style / functions.

    3. Configurations for Modules / Plugins as used in Demo Site.

    3.1 JA Bulletin

    There are two JA Bulletin modules being used in JA Telile III named: Most Read and Latest News

    3.1.1 Most Read

    Module Position : ja-tabs
    Module Suffix : NOT USED

    3.1.2 Latest News

    Module Position : ja-tabs
    Module Suffix : NOT USED

    3.2 JA News Featured Module

    Module Position : content-top
    Module Suffix : NOT USED

    3.3 JA News Pro

    Module Position : content-bot
    Module Suffix : NOT USED

    3.4 JA News Ticker

    Module Position : headlines
    Module Suffix : NOT USED

    3.5 JA Twitter

    Module Position : mega-item
    Module Suffix : NOT USED

    3.6 JA Bookmark plugin

    3.6 JA Disqus Debate Echo plugin

    3.7 JA Thumbnail plugin

    Note: JA Thumbnail plugin plays importantt part in the image sizes seen on the frontpage, leading article. You can set the image size in article detail page and list page (leading items).

    We recommend to use it with default settings only.. as these would be the best possible settings for Teline III

    3.7 JA Tabs plugin

    To have outlook as our demo, you should follow the instruction.

    1. Install and configure the JA Tabs plugin

    2. Assign Modules to display in tabs

    2.1 Videos of the day

    Module Position : ja-tabs2
    Module Suffix : NOT USED

    <div class=”ja-video-thumb”>{japopup type=”youtube” content=”http://www.youtube.com/v/cdphzxz64BY?hl=en&fs=1″ width=”640″ height=”380″ title=”Political Roast : Obama Emanuel 2005″}<img src=”http://img.youtube.com/vi/cdphzxz64BY/2.jpg” border=”0″ alt=”Political Roast : Obama Emanuel 2005″ />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/i18_4jZbrQ4?hl=en&fs=1″ width=”640″ height=”380″ title=”Beardyman and Reggie Watts on Channel 4 Headspace”}<img src=”http://img.youtube.com/vi/i18_4jZbrQ4/2.jpg” border=”0″ alt=”Beardyman and Reggie Watts on Channel 4 Headspace” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/YgW7or1TuFk?hl=en&fs=1″ width=”640″ height=”380″ title=”A Closer Look At The iPhone”}<img src=”http://img.youtube.com/vi/YgW7or1TuFk/2.jpg” border=”0″ alt=”A Closer Look At The iPhone” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/DOvbv-LkK6w?hl=en&fs=1″ width=”640″ height=”380″ title=”Star Wars: The Old Republic E3 2009 Jedi vs. Sith Trailer ” }<img src=”http://img.youtube.com/vi/DOvbv-LkK6w/2.jpg” border=”0″ alt=”Star Wars: The Old Republic E3 2009 Jedi vs. Sith Trailer ” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/ezdfVbOqzRc?hl=en&fs=1″ width=”640″ height=”380″ title=”Bare-Knuckle Brawling : KICK ASS ! | 2009″}<img src=”http://img.youtube.com/vi/ezdfVbOqzRc/2.jpg” border=”0″ alt=”Bare-Knuckle Brawling : KICK ASS ! | 2009″ />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/XOZw7sBUI7s?hl=en&fs=1″ width=”640″ height=”380″ title=”Bernard the bear:The desert island”}<img src=”http://img.youtube.com/vi/XOZw7sBUI7s/2.jpg” border=”0″ alt=”Bernard the bear:The desert island” />{/japopup}</div>

    2.2 Photo gallery

    Module Position : ja-tabs2
    Module Suffix : NOT USED

    <div class=”ja-video-thumb”>{japopup type=”image” content=”images/stories/demo/gallery/gl-1.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-1.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-2.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-2.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-3.png” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-3.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-4.jpg” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-4.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-5.jpg” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-5.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-6.jpg” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-6.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup}</div>

    2.3 Bookmark pages

    Module Position : ja-tabs2
    Module Suffix : NOT USED

    <ul class=”bookmark-links”>
    <li>{japopup type=”iframe” content=”http://www.facebook.com” title=”www.facebook.com” width=”1024″ height=”600″} Facebook {/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.joomlart.com” width=”1024″ height=”600″}Joomla Templates Club – Professional – High quality Joomla template{/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.magentocommerce.com” width=”1024″ height=”600″}Magento – Home – eCommerce Software for Growth{/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.joomlancers.com” width=”1024″ height=”600″}JoomLancers – Freelance Marketplace for Opensource Development{/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.iconfinder.net/” width=”1024″ height=”600″}<strong>Icon Finder</strong><br />Tool icons | Free icons | Search through more than 100,000 icons{/japopup}</li>
    </ul>

    3. Create a Custom HTML module that loads modules displayed in tab to display in a position.

    Module Position : ja-tabs2
    Module Suffix : NOT USED

    <div>{jatabs type=”modules” animType=”animNone” style=”teline_iii” position=”top” widthTabs=”120″ heightTabs=”auto” width=”100%” height=”auto” mouseType=”click” duration=”1000″ colors=”10″ module=”ja-tabs2″ }{/jatabs}</div>

    3.7 JA Popup plugin

    To have outlook as our demo, you should follow the instruction.

    1. Install and configure the JA Pop-up plugin


    2. Create Custom HTML module that add items for pop-up.

    Module Position : ja-tabs2
    Module Suffix : NOT USED

    <div class=”ja-video-thumb”>{japopup type=”image” content=”images/stories/demo/gallery/gl-1.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-1.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-2.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-2.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-3.png” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-3.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-4.jpg” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-4.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-5.jpg” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-5.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-6.jpg” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-6.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup}</div>

    Hung Dinh Friend
    February 25, 2011 at 2:50 am #378340

    4. Custom HTML Modules

    We use total of 24 Custom HTML Modules in JA Teline III Template.

    If you are not sure how to use Custom HTML Modules or accessing HTML Editor view. Read this Guide.

    We will provide you with the HTML Code (markup) for reference below, you will need to replicate exactly and then change your content. Remember HTML code has special div classes, which are required for demo alike display.

    1. JA Tabs 2

    Module Position : col-mass1
    Module Suffix : _tabs

    {jatabs type=”modules” animType=”animNone” style=”teline_iii” position=”top” widthTabs=”120″ heightTabs=”auto” width=”100%” height=”auto” mouseType=”click” duration=”1000″ colors=”10″ module=”ja-tabs2″ }{/jatabs}

    Note: All the modules positioned in “ja-tabs2” position (Video of day, Photo gallery, Bookmark pages – Custom HTML module) will be displayed

    2. JA Tabs

    Module Position : col-mass1
    Module Suffix : _tabs

    {jatabs type=”modules” animType=”animNone” style=”teline_iii” position=”top” widthTabs=”auto” heightTabs=”auto” width=”auto” height=”auto” mouseType=”click” duration=”1000″ colors=”10″ module=”ja-tabs” }{/jatabs}

    Note: All the modules positioned in “ja-tabs” position (Most Read, Latest News – JA Bulletin module) will be displayed

    3. Banner 1

    Module Position : col-mass1
    Module Suffix : NOT USED

    <p><a href=”index.php/10-things-you-must-know-about-teline-iii” title=”What’s new in JA Teline iii?”><img src=”images/stories/demo/other/what-new.jpg” border=”0″ alt=”What’s new in teline iii” /></a></p>

    4. Book review

    Module Position : col-mass2
    Module Suffix : _hilite badge-top

    <div class=”clearfix”><img src=”images/stories/demo/other/book-review.jpg” border=”0″ alt=”The Battle for America 2008″ align=”left” style=”margin-right: 10px; padding: 5px; border: 5px solid #CCCCCC” />
    <h4>The Battle for America 2008: The Story of an Extraordinary Election</h4>
    <p>Fringilla justo vel pretium at Vestibulum dui tellus wisi congue auctor. Augue Nullam amet Phasellus Ut eu sociis libero id libero est. In interdum ac nibh habitasse malesuada nibh justo at orci Maecenas. Massa sociis quis et odio massa id id Pellentesque vestibulum interdum.</p>
    <a class=”comment” href=”#” title=”Comment”>Discuss: Do you think about this book?</a></div>

    5. Discussion

    Module Position : col-mass2
    Module Suffix : NOT USED

    <div class=”discussion-wrap clearfix”>
    <div class=”discussion-content”><img src=”images/stories/demo/other/discussion.jpg” border=”0″ alt=”alt” align=”left” />
    <h4><a href=”#” title=”Discussion”>Iran appoints new judiciary head</a></h4>
    Ac Nunc tempor a eget et morbi Vivamus vitae nunc metus. Morbi feugiat neque tellus justo commodo hac lacinia gravida Curabitur Curabitur. Risus ut Phasellus eget Vivamus dis justo cursus semper <a class=”comment” href=”#” title=”Comment”>Comment</a> <a class=”video” href=”#” title=”Video”>Video</a> <a class=”photo” href=”#” title=”Slideshow”>Slideshow</a></div>
    </div>
    <p><span class=”author”><strong>Author:</strong> Mr Truly</span></p>

    6. Adv

    Module Position : col-mass2
    Module Suffix : NOT USED

    <p><img src=”images/stories/demo/other/bmw-x5.jpg” border=”0″ alt=”BMW-X5″ /></p>

    7. Photo gallery

    Module Position : ja-tabs2
    Module Suffix : NOT USED

    <div class=”ja-video-thumb”>{japopup type=”image” content=”images/stories/demo/gallery/gl-1.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-1.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-2.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-2.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-3.png” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-3.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-4.jpg” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-4.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-5.jpg” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-5.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup} {japopup type=”image” content=”images/stories/demo/gallery/gl-6.jpg” width=”700″ height=”380″ title=”Sample image”}<img src=”images/stories/demo/gallery/gl-6.jpg” border=”0″ alt=”Sample image” width=”100″ />{/japopup}</div>

    8. Video of the day

    Module Position : ja-tab2
    Module Suffix : NOT USED

    <div class=”ja-video-thumb”>{japopup type=”youtube” content=”http://www.youtube.com/v/cdphzxz64BY?hl=en&fs=1″ width=”640″ height=”380″ title=”Political Roast : Obama Emanuel 2005″}<img src=”http://img.youtube.com/vi/cdphzxz64BY/2.jpg” border=”0″ alt=”Political Roast : Obama Emanuel 2005″ />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/i18_4jZbrQ4?hl=en&fs=1″ width=”640″ height=”380″ title=”Beardyman and Reggie Watts on Channel 4 Headspace”}<img src=”http://img.youtube.com/vi/i18_4jZbrQ4/2.jpg” border=”0″ alt=”Beardyman and Reggie Watts on Channel 4 Headspace” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/YgW7or1TuFk?hl=en&fs=1″ width=”640″ height=”380″ title=”A Closer Look At The iPhone”}<img src=”http://img.youtube.com/vi/YgW7or1TuFk/2.jpg” border=”0″ alt=”A Closer Look At The iPhone” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/DOvbv-LkK6w?hl=en&fs=1″ width=”640″ height=”380″ title=”Star Wars: The Old Republic E3 2009 Jedi vs. Sith Trailer ” }<img src=”http://img.youtube.com/vi/DOvbv-LkK6w/2.jpg” border=”0″ alt=”Star Wars: The Old Republic E3 2009 Jedi vs. Sith Trailer ” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/ezdfVbOqzRc?hl=en&fs=1″ width=”640″ height=”380″ title=”Bare-Knuckle Brawling : KICK ASS ! | 2009″}<img src=”http://img.youtube.com/vi/ezdfVbOqzRc/2.jpg” border=”0″ alt=”Bare-Knuckle Brawling : KICK ASS ! | 2009″ />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/XOZw7sBUI7s?hl=en&fs=1″ width=”640″ height=”380″ title=”Bernard the bear:The desert island”}<img src=”http://img.youtube.com/vi/XOZw7sBUI7s/2.jpg” border=”0″ alt=”Bernard the bear:The desert island” />{/japopup}</div>

    9. Bookmark pages

    Module Position : ja-tab2
    Module Suffix : NOT USED

    <ul class=”bookmark-links”>
    <li>{japopup type=”iframe” content=”http://www.facebook.com” title=”www.facebook.com” width=”1024″ height=”600″} Facebook {/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.joomlart.com” width=”1024″ height=”600″}Joomla Templates Club – Professional – High quality Joomla template{/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.magentocommerce.com” width=”1024″ height=”600″}Magento – Home – eCommerce Software for Growth{/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.joomlancers.com” width=”1024″ height=”600″}JoomLancers – Freelance Marketplace for Opensource Development{/japopup}</li>
    <li>{japopup type=”iframe” content=”http://www.iconfinder.net/” width=”1024″ height=”600″}<strong>Icon Finder</strong><br />Tool icons | Free icons | Search through more than 100,000 icons{/japopup}</li>
    </ul>

    10. MarketWatch

    Module Position : user6
    Module Suffix : NOT USED

    <ul>
    <li><a href=”#” target=”_blank”>Currencies: U.S. dollar, yen reverse gains in Asia</a></li>
    <li><a href=”#” target=”_blank”>Amcor buys most of Rio Tinto’s Alcan Packaging</a></li>
    <li><a href=”#” target=”_blank”>Mark Hulbert: Gold, stocks are more allies than enemies</a></li>
    <li><a href=”#” target=”_blank”>Stocks to Watch: Stocks in focus for Tuesday</a></li>
    <li><a href=”#” target=”_blank”>Steelmakers rise in volatile Shanghai market</a></li>
    </ul>

    11. Art and Design

    Module Position : user7
    Module Suffix : NOT USED

    <ul>
    <li><a href=”#” target=”_blank”>Praesent ac libero ornare venenatis</a></li>
    <li><a href=”#” target=”_blank”>Nunc auctor vel Aenean neque montes</a></li>
    <li><a href=”#” target=”_blank”>Et id tortor Cras id nunc montes lobortis lacus et fringilla</a></li>
    <li><a href=”#” target=”_blank”>Hendrerit semper eget convallis neque eleifend orci iaculis</a></li>
    <li><a href=”#” target=”_blank”>Tortor et laoreet quis Nullam augue justo</a></li>
    </ul>

    13. Fashion

    Module Position : user8
    Module Suffix : NOT USED

    <p><img src=”images/stories/demo/style/fashion-1.jpg” border=”0″ alt=”Fashion” /> Pellentesque porttitor Vestibulum Mauris</p>

    14. Sport

    Module Position : user9
    Module Suffix : NOT USED

    <p><img src=”images/stories/demo/sport/sport-1.jpg” border=”0″ alt=”Sport” /> Nulla tincidunt tincidunt <a href=”#” title=”Sport”>velit tristique leo.</a></p>

    15. Follow us

    Module Position : user10
    Module Suffix : NOT USED

    <p><img src=”images/stories/demo/other/follow.jpg” border=”0″ alt=”Follow us” /></p>

    16. Feature News

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>World</h4>
    <img src=”images/stories/demo/other/cat-1.jpg” border=”0″ alt=”Obama” /> Ut justo id nibh pulvinar mauris pede Phasellus metus. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Sport</h4>
    <img src=”images/stories/demo/other/cat-2.jpg” border=”0″ alt=”Obama” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Food and Drink</h4>
    <img src=”images/stories/demo/other/cat-3.jpg” border=”0″ alt=”Obama” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Art</h4>
    <img src=”images/stories/demo/other/cat-4.jpg” border=”0″ alt=”Obama” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Entertaiment</h4>
    <img src=”images/stories/demo/other/cat-5.jpg” border=”0″ alt=”Obama” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Technology</h4>
    <img src=”images/stories/demo/other/cat-6.jpg” border=”0″ alt=”Technology” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    17. World highlight

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Africa</h4>
    <img src=”images/stories/demo/other/wor-1.jpg” border=”0″ alt=”Africa” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Middle East</h4>
    <img src=”images/stories/demo/other/wor-2.jpg” border=”0″ alt=”Middle East” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>U.S Politics</h4>
    <img src=”images/stories/demo/other/wor-3.jpg” border=”0″ alt=”U.S Politics” /> Non ante gravida eros quis justo sed nonummy et Donec et.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Europe</h4>
    <img src=”images/stories/demo/other/wor-4.jpg” border=”0″ alt=”Europe” /> Dolor ut id enim dolor auctor a Aenean Vestibulum lorem egestas.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    18. Tech highlight

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Business Tech</h4>
    <img src=”images/stories/demo/other/tech-1.jpg” border=”0″ alt=”Business Tech” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Science</h4>
    <img src=”images/stories/demo/other/tech-2.jpg” border=”0″ alt=”Science” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Personal Tech</h4>
    <img src=”images/stories/demo/other/tech-3.jpg” border=”0″ alt=”Personal Tech” /> Non ante gravida eros quis justo sed nonummy et Donec et.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Space</h4>
    <img src=”images/stories/demo/other/tech-4.jpg” border=”0″ alt=”Space” /> Dolor ut id enim dolor auctor a Aenean Vestibulum lorem egestas.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Green Tech</h4>
    <img src=”images/stories/demo/other/tech-5.jpg” border=”0″ alt=”Green Tech” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    19. Entertainment highlight

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Television</h4>
    <img src=”images/stories/demo/other/enter-1.jpg” border=”0″ alt=”Television” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Movies</h4>
    <img src=”images/stories/demo/other/enter-2.jpg” border=”0″ alt=”Movies” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Books</h4>
    <img src=”images/stories/demo/other/enter-3.jpg” border=”0″ alt=”Books” /> Non ante gravida eros quis justo sed nonummy et Donec et.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Music</h4>
    <img src=”images/stories/demo/other/enter-4.jpg” border=”0″ alt=”Music” /> Dolor ut id enim dolor auctor a Aenean Vestibulum lorem egestas.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Games</h4>
    <img src=”images/stories/demo/other/enter-5.jpg” border=”0″ alt=”Movies” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Theatre</h4>
    <img src=”images/stories/demo/other/enter-6.jpg” border=”0″ alt=”Television” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    20. Health highlight

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>You & Your Family</h4>
    <img src=”images/stories/demo/other/hel-1.jpg” border=”0″ alt=”You & Your Family” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>What Ails You</h4>
    <img src=”images/stories/demo/other/hel-2.jpg” border=”0″ alt=”What Ails You” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Diet & Fitness</h4>
    <img src=”images/stories/demo/other/hel-3.jpg” border=”0″ alt=”Diet & Fitness” /> Non ante gravida eros quis justo sed nonummy et Donec et.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    21. Life and Style

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Fashion & Beauty</h4>
    <img src=”images/stories/demo/other/life-1.jpg” border=”0″ alt=”Fashion & Beauty” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Food & Drink</h4>
    <img src=”images/stories/demo/other/life-2.jpg” border=”0″ alt=”Food & Drink” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Wife & Husband</h4>
    <img src=”images/stories/demo/other/life-3.jpg” border=”0″ alt=”Wife & Husband” /> Non ante gravida eros quis justo sed nonummy et Donec et.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Shop</h4>
    <img src=”images/stories/demo/other/life-4.jpg” border=”0″ alt=”Shop” /> Dolor ut id enim dolor auctor a Aenean Vestibulum lorem egestas.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Mother & Children</h4>
    <img src=”images/stories/demo/other/life-5.jpg” border=”0″ alt=”Mother & Children” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Home & Gardens</h4>
    <img src=”images/stories/demo/other/life-6.jpg” border=”0″ alt=”Home & Gardens” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    22. Travel

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Getaway</h4>
    <img src=”images/stories/demo/other/travel-1.jpg” border=”0″ alt=”Getaway” /> Ut justo id nibh pulvinar mauris pede Phasellus metus Sed congue. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Travel Tips</h4>
    <img src=”images/stories/demo/other/travel-2.jpg” border=”0″ alt=”Travel Tips” /> Orci rutrum lacus feugiat egestas venenatis Sed dolor condimentum montes ornare.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Business Travel</h4>
    <img src=”images/stories/demo/other/travel-3.jpg” border=”0″ alt=”Business Travel” /> Non ante gravida eros quis justo sed nonummy et Donec et.<a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    23. Artist highlight

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Photography</h4>
    <img src=”images/stories/demo/other/artist-1.jpg” border=”0″ alt=”Photography” /> Ut justo id nibh pulvinar mauris pede Phasellus metus. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Design</h4>
    <img src=”images/stories/demo/other/artist-2.jpg” border=”0″ alt=”Design” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Architecture</h4>
    <img src=”images/stories/demo/other/artist-3.jpg” border=”0″ alt=”Architecture” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Art</h4>
    <img src=”images/stories/demo/other/artist-4.jpg” border=”0″ alt=”Art” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>3D Graphics</h4>
    <img src=”images/stories/demo/other/artist-5.jpg” border=”0″ alt=”3D Graphics” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Graphics</h4>
    <img src=”images/stories/demo/other/artist-6.jpg” border=”0″ alt=”Graphics” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    24. Sport highlight

    Module Position : left
    Module Suffix : NOT USED

    <div class=”ja-innerdiv”>
    <h4>Tennis</h4>
    <img src=”images/stories/demo/other/sport-1.jpg” border=”0″ alt=”Tennis” /> Ut justo id nibh pulvinar mauris pede Phasellus metus. <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Cricket</h4>
    <img src=”images/stories/demo/other/sport-2.jpg” border=”0″ alt=”Cricket” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Motosport</h4>
    <img src=”images/stories/demo/other/sport-3.jpg” border=”0″ alt=”Motosport” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Horse racing</h4>
    <img src=”images/stories/demo/other/sport-4.jpg” border=”0″ alt=”Horse racing” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Boxing</h4>
    <img src=”images/stories/demo/other/sport-5.jpg” border=”0″ alt=”Boxing” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>
    <div class=”ja-innerdiv”>
    <h4>Football</h4>
    <img src=”images/stories/demo/other/sport-6.jpg” border=”0″ alt=”Football” /> Ipsum vel Phasellus ligula dis convallis eu risus consequat justo justo <a class=”Read more…” href=”#” style=”font-size: 92%;”>More detail »</a></div>

    Hung Dinh Friend
    February 25, 2011 at 2:51 am #378341

    5. Menu configs

    5.1 Mega Menu Configuration

    JA Teline III Demo site uses Mega Menu >> Dropline. Follow the guide below to create the a column dropdown menu.

    Frontend Appearance

    Backend Settings

    1. Home Menu Backend Settings
    2. News Menu Backend Settings
    3. LatestMenu Backend Settings

    Note: This Teline III version does not use JA Zin plugin and you have to create the menu items manually and assign colors as per the image below:

    Assign menu color

    5.2 All Menus Configuration

    5.2.1 World Menu

    Frontend Appearance

    Backend Settings

    1. World Menu Backend Settings
    2. Europe Menu Backend Settings

    Note: Others sub-menu are configured similar to Europe menu.

    5.2.2 Technology Menu

    Frontend Appearance

    Backend Settings

    1. Technology Menu Backend Settings
    2. Personal Tech Menu Backend Settings

    Note: Others sub-menu are configured similar to Personal Tech menu.

    5.2.3 Entertainment Menu

    Frontend Appearance

    Backend Settings

    1. Entertainment Menu Backend Settings
    2. Movies Menu Backend Settings

    Note: Others sub-menu are configured similar to Movies menu.

    5.2.4 Health Menu

    Frontend Appearance

    Backend Settings

    1. Health Menu Backend Settings
    2. What Ails You Menu Backend Settings

    Note: Others sub-menu are configured similar to What Ails You menu.

    5.2.5 Life And Style Menu

    Frontend Appearance

    Backend Settings

    1. Fashion & Beauty Menu Backend Settings
    2. Life and StyleMenu Backend Settings

    Note: Others sub-menu are configured similar to ART menu.

    5.2.6 Travel Menu

    Frontend Appearance

    Backend Settings

    1. Artist Menu Backend Settings
    2. Art Menu Backend Settings

    Note: Others sub-menu are configured similar to ART menu.

    5.2.7 Artist Menu

    Frontend Appearance

    Backend Settings

    1. Artist Menu Backend Settings
    2. Art Menu Backend Settings

    Note: Others sub-menu are configured similar to ART menu.

    5.2.8 Sport Menu

    Frontend Appearance

    Backend Settings

    1. Sport Menu Backend Settings
    2. Football Menu Backend Settings

    Note: Others sub-menu are configured similar to Football menu.

    5.2.9 Explore Menu

    Frontend Appearance

    Backend Settings

    1. Explore Menu Backend Settings
    2. Menu Style Menu Backend Settings
    3. Dropline Menu Menu Backend Settings

    Note: Others sub-menu are configured similar to Football menu.

    5.2.10 Layout Menu

    Frontend Appearance

    Backend Settings

    1. Layout Menu Backend Settings
    2. Content + Right Menu Backend Settings

    Note: Others sub-menu are configured similar to Content + Right menu.

    Hung Dinh Friend
    February 25, 2011 at 7:53 am #378383

    The above userguide should help one in replicating the Demo site settings for the template and extension on their site.

    Recommended :

    If you are new or are confused. We recommend installing Quickstart on your localhost and use it as reference for configs. This is the best way to work with any template.
    Links to all the resources are provided above, you should carefully read them to take the maximum advantage of our products.

    Support :

    Please raise your support queries in the forum and make sure you follow the support guidelines. We spend more time in getting the information from user incase the support guidelines are not followed.

    If you have any questions regarding this userguide, please ask in the forum. This thread is locked.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

This topic contains 6 replies, has 1 voice, and was last updated by  Hung Dinh 13 years, 9 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories