Trex

Responsive Magento theme Trex is a professional makeover for any eCommerce Magento sites for sport, games and entertainment. Trex features up to 3 complementary Magento extensions including Mega Menu, Product, Slideshow Also this Mangento theme is fully responsive and supports Off-canvas navigation.

This documentation is to guide you about how to install and configure the responsive Magento theme Trex to your own website.

Once downloaded Trex, you will get a zipped file including the following folders:

  • mage_ext: contains all built-in extensions of the theme.
  • mage_tpl: contains the theme files only.
  • quickstart: a full Magento CMS version with our theme already integrated to match the demo.
  • source: contains all source files of the theme.

Unzip the file. Please be noted that there are two ways to install a UberTheme Magento theme:

  • General Installation: Applicable when you have installed a Magento base on your server before.
  • Quickstart Installation: Applicable for JoomlArt Magento users. With Quickstart, you will get a site just as the same as our Demo site.

We are going through each way of installation in advance of more further configurations.

In case you have installed the Magento base already, this way of installation will help you to adapt the theme and extensions of Trex to fit your current site. Let’s see how to install the theme and its extensions respectively.

1. Theme Installation

Please make sure your Magento store is ready before you integrate Trex. If your site has not been available yet, get it done quickly by following the Magento Installation Guide.

The installation of Trex is quite simple with several following steps:

1. Upload the folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}.

2. Unzip “Trex” package. Next, copy the two folders skin and app to the root of your Magento site folder on the server. Accordingly, the folders will be overwritten and you should see a directory layout like this:
{docroot} /magento/app/
index.php
js/
lib/
LICENSE.txt
media/
pear/
skin/
var/.

3. Open the Admin Panel of your site, and access Magento Admin area on a stage localhost: //localhost/magento/index.php/admin/, then log in your Magento Admin area.

4. Navigate to System >> Configuration >> Design. Simply replace the original name e.g. jm_purity with jm_Trex.

5. Fill “jm_Trex” into the Themes folder.

6. You can also change the settings for Trex Header.

7. Click the button “Save Config” to save your configuration.

You are done! Trex is now ready to go!

2. Extension Installation

To install the built-in extensions of Trex, please follow steps as below.

  • Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}). These files will overwrite default folders skin and app in your Magento folder. Thus, you should see a directory layout like this: {docroot} /magento/app/
    index.php
    js/
    lib/
    LICENSE.txt
    media/
    pear/
    skin/
    var/.
  • Log into your Magento Admin area (i.e. access Magento Admin area on localhost: //localhost/magento/index.php/admin/).
  • Navigate to System >> Configuration.
  • The installed extensions will show off. To enter the extension configuration page, click the extension’s name tab.

3. Create Static Blocks

  • Go to Magento Admin Panel >> CMS >> Static Blocks.
  • Click “Add new Block” button.
  • Fill in all fields as below then click “Save Block” button:
    • Title: Right module
    • Identifier: right_block
    • Store View: All Store Views
    • Status: Enable
    • Content: fill in all syntax quoted as you would like.
  • To edit the existing static blocks, go to CMS >> Pages and then select the page in which blocks you want to edit.

  • In General Information tab, fill in the Content field with syntax quoted.
  • To display a new static block, copy and paste the following code in the “Layout Update XML” field in “Design” tab.
    <html>
    <reference name="right"> 
    <block type="cms/block" name="jmtabs" before="-">
    <action method="staticblock">
    <title><strong><COLOR=Red>New block</COLOR></strong></title>
    <identifier><strong><COLOR=Red>new_block</COLOR></strong></identifier>
    </action>
    </block>
    </reference>
    </html>
    

Clear cache if needed (in System >> Cache Management >> Save cache settings). Refresh your Homepage to see the change applied.

Quickstart package is to minimize time and effort in installing your eCommercial sites with the contents just like the Demo sites. Please be kindly noted that, with Quickstart, all your existing data will be overwritten. Thus, we recommend using Quickstart for your first installation with our Magento theme or just in case you want to refresh your own site to the very beginning.

Please follow steps as below.

  • Download the Quickstart package from
    download section.
  • Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that includes all sample data.
  • Create a database for your Magento store (using phpMyAdmin).

  • Start the installation process by opening a browser and navigate to your URL (where the Quickstart package uploaded) to load the default Magento installer.

  • Kindly follow each step of the Installer so that the installation process can be set.

Note:

  • Do not use “localhost” in URL, otherwise you could not log into your Admin area (you should use your local IP in case of installing on your computer).
  • Leave “Tables prefix” field blank.


The layout of Trex Homepage can be illustrated as below.

In the front-page, Trex has these following static blocks.

position-1 | position-2 | position-3 | position-4 | position-5 | News & Events | Location |Why choose us | Navigate | Lemmon Slider|Useful Links|Social|Monthly Newsletter|Footer Links

To create a new block, refer to the above guide for details.

This section will guide you to configure your pages just as the Demo site of Trex.

Homepage

To configure this page, in the Magento Admin Panel, please navigate to CMS >> Pages. Firstly, create a new page named {Homepage} in “Page Management” section.

  • Page Information Tab: click to see the Back-end Settings.
  • Content Tab: click to see the Back-end Settings.
  • Copy and paste the following code into the “Content” field.

    {{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/list.phtml" }}
    
  • Design Tab
  • On Page Layout section, set Layout = 1

    On Layout Update XML update the following code

          <reference name="mass-top">     
                <block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" />
                         </reference>
                      <reference name="content-mass-bottom">      
                        <block type="cms/block" name="lemmon-slider">
                       <action method="setBlockId"><block_id>lemmon-slider</block_id></action>
                      </block>
                      </reference>
                                    <!-- Bottom Spotlight - topsl -->
                    <reference name="topsl">
                        <block type="cms/block" name="position-1">
                            <action method="setBlockId"><block_id>position-1</block_id></action>
                        </block>
                        <block type="cms/block" name="position-2">
                            <action method="setBlockId"><block_id>position-2</block_id></action>
                        </block>
                    </reference>
                    <!-- Bottom Spotlight - topsl -->
    
                                   <!-- Bottom Spotlight - topsl 1-->
                    <reference name="topsl1">
                        <block type="cms/block" name="position-3">
                            <action method="setBlockId"><block_id>position-3</block_id></action>
                        </block>
                        <block type="cms/block" name="position-4">
                            <action method="setBlockId"><block_id>position-4</block_id></action>
                        </block>
                                            <block type="cms/block" name="position-5">
                            <action method="setBlockId"><block_id>position-5</block_id></action>
                        </block>
                    </reference>
                    <!-- Bottom Spotlight - topsl 1 -->
            
                    <!-- Bottom Spotlight - botsl -->
                    <reference name="botsl">
                        <block type="cms/block" name="position-6">
                            <action method="setBlockId"><block_id>position-6</block_id></action>
                        </block>
                        <block type="cms/block" name="position-7">
                            <action method="setBlockId"><block_id>position-7</block_id></action>
                        </block>
                        <block type="cms/block" name="position-8">
                            <action method="setBlockId"><block_id>position-8</block_id></action>
                        </block>
                    </reference>
                    <!-- Bottom Spotlight - botsl -->
    
    

Paste the code below on Content field:

<div id="jm-error">
<div class="page-head-alt">
<h3>Whoops...</h3>
</div>
<dl><dt>The page you requested was not found, and we have a fine guess why.</dt><dd>
<ul class="disc">
<li>If you typed the URL directly, please make sure the spelling is correct.</li>
<li>If you clicked on a link to get here, the link is outdated.</li>
</ul>
</dd></dl><dl><dt>What can you do?</dt><dd>Have no fear, help is near! There are many ways you can get back on track with Magento Demo Store.</dd><dd>
<ul class="disc">
<li><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</li>
<li>Use the search bar at the top of the page to search for your products.</li>
<li>Follow these links to get you back on track!<a href="{{store url=""}}">Store Home</a><a href="{{store url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl></div>

Position-1:

<div class=" col-1 col-wide">
<div class="block">{{block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" }}</div>
</div>

Position-2:

<div class=" col-2 col-narrow">
<div class="block">
<div class="block-content"><img src="{{media url="wysiwyg/demo-6.jpg"}}" alt="" /></div>
</div>
</div>
Note:
To push Position-1: Slideshow Extension and Position-2 go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below :
<!-- Bottom Spotlight - topsl -->
<reference name="topsl">
<block type="cms/block" name="position-1">
<action method="setBlockId"><block_id>position-1</block_id></action>
</block>
<block type="cms/block" name="position-2">
<action method="setBlockId"><block_id>position-2</block_id></action>
</block>
</reference>
<!-- Bottom Spotlight - topsl -->  

Position-3:

<div class=" col-1">
<div class="block">
<div class="block-content">
<div class="category-desc"><img src="{{media url="wysiwyg/demo-3.jpg"}}" alt="" /><a class="category-title" href="bikes.html">Bikes</a></div>
</div>
</div>
</div>

Position-4:

<div class=" col-2">
<div class="block">
<div class="block-content">
<div class="category-desc"><img src="{{media url="wysiwyg/demo-4.jpg"}}" alt="" /><a class="category-title" href="gears.html">Gears</a></div>
</div>
</div>
</div>

Position-5:

<div class=" col-3">
<div class="block">
<div class="block-content">
<div class="category-desc"><img src="{{media url="wysiwyg/demo-5.jpg"}}" alt="" /><a class="category-title" href="retailers.html">Retailers</a></div>
</div>
</div>
</div>
Note:
To push Position-3, Position-4 and Position-5 onto the front-end, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below:
<!-- Bottom Spotlight - topsl 1-->
<reference name="topsl1">
<block type="cms/block" name="position-3">
<action method="setBlockId"><block_id>position-3</block_id></action>
</block>
<block type="cms/block" name="position-4">
<action method="setBlockId"><block_id>position-4</block_id></action>
</block>
<block type="cms/block" name="position-5">
<action method="setBlockId"><block_id>position-5</block_id></action>
</block>
</reference>
<!-- Bottom Spotlight - topsl 1 -->

News & Events:

<div class=" col-1">
<div class="block block-list">
<div class="block-title"><strong> <span>News & Events</span> </strong></div>
<div class="block-content"><img src="{{media url="wysiwyg/demo-1.jpg"}}" alt="" />
<div class="meta">30.07.2012</div>
<div class="content-title"><a href="#">Rob Zombie's Rock Advice: Lose the Tude, Trust Thyself</a></div>
<p>Phasellus pretium laoreet est, interdum bibendum leo auctor ut. Sudisse ac diam felis, et facilisis diam. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>

Location:

<div class=" col-2">
<div class="block block-list">
<div class="block-title"><strong> <span>Location</span> </strong></div>
<div class="block-content"><img src="{{media url="wysiwyg/demo-2.jpg"}}" alt="" />
<div class="label">Mail Us</div>
<a href="#">contact@bike.com</a>
<div class="label">Call</div>
+123 456 7890
<div class="label">Location</div>
2411 Any Street. Any Town. United Kingdom.</div>
</div>
</div>

Why choose us:

<div class=" col-3">
<div class="block block-list">
<div class="block-title"><strong> <span>Why choose us</span> </strong></div>
<div class="block-content">
<div class="content-inner">
<h2>Free Shipping</h2>
<p>On Orders over 1000$</p>
</div>
<div class="content-inner">
<h2>123 456 7890</h2>
<p>Online Support 24/7</p>
</div>
<div class="content-inner last">
<h2>Money Back Guarantee</h2>
<p>7 Days no questions asked</p>
</div>
</div>
</div>
</div>
Note:
To push Position-6, Position-7 and Position-8 onto the front-end, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below :
<!-- Bottom Spotlight - botsl -->
<reference name="botsl">
<block type="cms/block" name="position-6">
<action method="setBlockId"><block_id>position-6</block_id></action>
</block>
<block type="cms/block" name="position-7">
<action method="setBlockId"><block_id>position-7</block_id></action>
</block>
<block type="cms/block" name="position-8">
<action method="setBlockId"><block_id>position-8</block_id></action>
</block>
</reference>
<!-- Bottom Spotlight - botsl -->  
//static.joomlart.com/images/userguide/jm_templates/jm_trex/position6_7_8.png

Lemmon Slider:

<!-- Necessary HTML -->
<div class="jm-slider">
<div id="jm-slider-main" class="slider">
<ul>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo1.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo2.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo3.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo4.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo5.jpg"}}" alt="" /></a></li>
</ul>
</div>
<div class="controls"><a class="prev-slide" href="#">Prev Slide</a> <a class="next-slide" href="#">Next Slide</a></div>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(window).load(function(){
jQuery( '#jm-slider-main' ).lemmonSlider({'infinite' : true});
});
// ]]></script>
Note:
To push Lemmon Slider Extension onto the front-end, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below :
<reference name="content-mass-bottom">        
<block type="cms/block" name="lemmon-slider">
<action method="setBlockId"><block_id>lemmon-slider</block_id></action>
</block>
</reference>  

Useful Links:

<div class=" col-2 col-narrow">
<div class="block block-list">
<div class="block-title"><strong> <span>Userful Links</span> </strong></div>
<div class="block-content">
<ul>
<li class="first"><a href="#">Pricing Policy </a></li>
<li><a href="#">Shipping Policy </a></li>
<li><a href="#">Payment Methods </a></li>
<li><a href="#">Site Information </a></li>
<li class="last"><a href="#">Your Satisfaction</a></li>
</ul>
</div>
</div>
</div>

Navigate:

<div class=" col-1 col-narrow">
<div class="block block-list">
<div class="block-title"><strong> <span>Navigate</span> </strong></div>
<div class="block-content">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Bikes</a></li>
<li><a href="#">Gears</a></li>
<li><a href="#">Retailers</a></li>
<li class="last"><a href="#">Company</a></li>
</ul>
</div>
</div>
</div>

Social:

<div class=" col-4 col-narrow">
<div class="block block-list social-list">
<div class="block-title"><strong> <span>Social</span> </strong></div>
<div class="block-content">
<ul>
<li class="first icon_twitter"><a href="//twitter.com/joomlart">Twitter</a></li>
<li class="icon_facebook"><a href="https://www.facebook.com/joomlart">Facebook</a></li>
<li class="icon_flickr"><a href="//www.flickr.com/photos/joomlart">Flickr</a></li>
<li class="icon_feed"><a href="//feeds.feedburner.com/joomlart/blog">Blog Feed</a></li>
<li class="last icon_feed"><a href="//www.joomlart.com/magento-themes/showcase">Portfolio Feed</a></li>
</ul>
</div>
</div>
</div>

Monthly Newsletter:

<div class=" col-5 col-wide">{{block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml"}}</div>

Footer Links:

<ul>
<li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li>
<li class="last privacy"><a href="{{store direct_url="privacy-policy-cookie-restriction-mode"}}">Privacy Policy</a></li>
</ul>

Product Module

Trex used Products extension, named: New products.

To push this extension into front-page like our demo site, go to CMS > Pages:

Then click on Homepage >> Content tab

Please fill in Content parameter with syntax below:

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/list.phtml" }}</div>

Navigate to System >> Configuration >> Products and configure default criteria as per screenshot below for Product extension:

Tip:
To be able to use Product attribute of Type of product display , you need to create a new attribute. Please see How to use Product Slider

Slideshow Module

Navigate to System > Configuration > Slideshow and configure default criteria as per screenshot below:

Update this code at Description value:

[desc img="sl-1.jpg" url="#"]
<h3>Enis</h3>
[/desc]
[desc img="sl-2.jpg" url="#"]
<h3>Garis</h3>
[/desc]
[desc img="sl-3.jpg" url="#"]
<h3>Bistro</h3>
[/desc]

To push this extension onto front-page on top, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below :

<reference name="mass-top">        
<block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" />
</reference>  
Tip:
To be able to use Product attribute of Type of product display , you need to create a new attribute. Please see How to use Product Slider

Trex supports Magento extenstion Mega Menu. Follow the guide below to get it configured properly.

In the Magento Admin Panel, please navigate JoomlArt >> Mega Menu >> Manage Menu Groups. You need to create a Menu group first. For each store language view, you will need to create a different menu group. Once done, select the store language view that you want to create a menu and click “Add Menu Item” button to define the menu items. The default settings belong to English group. Other language groups have similar settings for menu items.

4.1 Home Menu

Back-end Settings

4.2 Bikes Menu

Back-end Settings

4.3 Gears Menu

Back-end Settings

4.4 Manage Page -- 404 Not Found page

To config this page, please navigate to CMS >> Pages, then select 404 Not Found 1 page to update the settings as below:

As a responsive Magento theme, Trex supports Off-Canvas menu for collapsed screens like mobiles and tablets.

Screenshot of Trex layout in various devices.

Screenshot of Off-Canvas layout for Trex.

All the style files are located in the folder: skin/frontend/default/jm_Trex/css.

In this particular theme, we support 3 styles: layout in desktop, tablet and mobile. Please be noted that, with the style files in hand, modification for the files need to be defined

in the page.xml file located in: app/design/frontend/default/jm_Trex/layout.

Note:

Please be kindly noted that, the default settings of responsive Magento theme Trex support any eCommercial site to work at its best performance. Any modification may not be supported by us.