MT Dend userguide

02 09 2012 0
Magen Theme

I. Quickstart Installation

  • Step 1: Create new database and import sample database ( mt_dend.sql or mt_dend.sql.gz) in database folder.
  • Step 2: Extract and Upload the whole Quickstart package to your server
  • Step 3: Open browser and navigate to your site (where the quickstart uploaded) to load default Magento installer with the database you just created and import sample database.
  • Step 4: Step by step to follow the instructions
  • Step 5: Finish installer

magento themes position

II. Theme Installation

  1. First, unzip theme package ZIP-file and then copy the whole "app and skin"- folders on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
  2. A message may popup and warn you that there are similar files already on your server. You will need to select overwrite to overwrite the same files. If not, don't worry, it will still work.
  3. Log in to your backend of your Magento Administration and go to "System"→ "Configuration" then select "Desgin" Tab under GENERAL. Open the "Themes" section, then enter "mt_dend" for "Default" field , and then click "Save Config" button.
  4. Disable the Cache in System → Cache Management. Select all options. Then either refresh or disable your cache. Refresh means it will refresh your cache, Disable will disable your cache. We recommend disabling your cache when installing your theme and re- enabling it after you are done installing.

Magento Themes install

III. Setting up the static block

Footer Static

MT Dend footer static block

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

  • Block Title: Footer Static
  • Identifier: footer_static
  • Status: Enabled
  • Content:
<div class="about-us span3">
<div class="footer-static-title">
<h2>About Us</h2>
</div>
<div class="footer-static-content">
<p>Lorem Ipsum is simply dummy text of the printing and typeset is ting industr. Lorem Ipsum has been i the industry's standard are dummy text ever since a the 1500s, when an unknown printer 1 took a galley of type and scrambled.</p>
</div>
</div>
<div class="Featured span3">
<div class="footer-static-title">
<h2>FEATURED</h2>
</div>
<div class="footer-static-content">
<ul>
<li>Lorem Ipsum Lorem Ipsum</li>
<li>Weblinks Host Weblinks Host</li>
<li>Donec sed odio dui</li>
<li>Klingston 00-000 Klingston</li>
</ul>
</div>
</div>
<div class="we-do-accept span3">
<div class="footer-static-title">
<h2>WE DO ACCEPT</h2>
</div>
<div class="footer-static-content">
<p>Contrary to popular belief, Lorem abc befo Ipsum is not simply random 100 text. It has roots in a piece of classi cal Latin literature from a 45 BC, ief making it over 2000 years old.</p>
<ul>
<li><a href="#"><img src="{{media url="wysiwyg/accept-1.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/accept-2.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/accept-3.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/accept.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/accept-5.png"}}" alt="" /></a></li>
</ul>
</div>
</div>
<div class="contact-us span3">
<div class="footer-static-title">
<h2>CONTACT US</h2>
</div>
<div class="footer-static-content">
<ul>
<li>Add: 304 17t3 Trung Hoa - Nhan Chinh</li>
<li>Email: support@9magentothemes.com</li>
<li>Tel: 04-61234567</li>
<li>Hotline: 0912345678</li>
</ul>
</div>
</div>

footer static block configuration

Social Static

social static block

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

  • Block Title: Social Static
  • Identifier: social
  • Status: Enabled
  • Content:
<div class="mt-social span6">
<div class="mt-social-inner">
<h3>Follow Us</h3>
<ul>
<li><a href="#"><img src="{{media url="wysiwyg/follow-1.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/follow-2.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/follow-3.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/follow-4.png"}}" alt="" /></a></li>
<li class="last"><a href="#"><img src="{{media url="wysiwyg/follow-5.png"}}" alt="" /></a></li>
</ul>
</div>
</div>

social static block configuration

 

IV. Setting up the Home Page

To setup your homepage, you will need to go to (CMS → Manage Pages):

Select "Home Page", with the identifier as "home".

Design: 1 columns

Scroll down and look for "Content", inside that you will have to input your homepage code, inserting the following code:

Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

Leave it blank. Don't put anything

home cms configuration

V. Setting up MT Slideshow Module

magento slideshow extension

  1. Unzip and copy the whole "app, js, skin and media"- folders on the main root of your local magento server (you will need to merge these files).
  2. Log in to your backend of your Magento Administration and go to "System"→ "Configuration "→"MT SlideShow". Open the "MAGENTHEMES" tab, then setup config like image below, and then click "Save Config".
  3. Go to "MagenThemes"→ "MTSlideshow "→"Manage Slideshow", then fill parameter like image below.

Site Information:

  • Identifier *: mt-slide-show
  • Position *: Top Content
  • Style: MT OsSlide
  • Width*: 637
  • Height*: 420
  • Status: Enable

magento slideshow configuration

Images:

  • browse to your images and upload them. After that fill the detail for each image like the following format:
  • Title: the title of your image, ex:  Birthday Flowers & Gifts
  • Link: the link which you want image link to, ex: maya-yellow.html
  • Demo Link: inputing the link for the SHOW NOW button, ex: maya-yellow.html
  • Description: inputing the description for each image

magento slideshow extension

Display on CMS Page: Home Page

magento slideshow display configuration

VII. Setting up MT Product Thumbnail Scroller, MT Smart Menus & MT Mega Menus

MT Products List

magento products list extension

MT Products Thumbnail Scroller

magento products thumbnail scroller extension

MT Smart Menus

magento smart menus extension

MT Mega Menus

magento mega menus extension

MT Cloud Zoom

magento cloud zoom extension

  • Log in to your backend of your Magento Administration and go to "System"→ "Configuration "→"MT Dend Admin"→"Configuration".
  • Please see the following screenshot for getting the configuration values

magento theme Gero configuration

Adding custom menus to Mega menus

Go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

  • Block Title: Custom Menus
  • Identifier: custom_menu
  • Status: Enabled
  • Content:
<div class="news custom-menu">
<h4>MT News</h4>
<ul>
<li><a href="#">Elien Bravo </a></li>
<li><a href="#">Just Motion </a></li>
<li><a href="#">Lorem Ipsum! </a></li>
<li><a href="#">Integer Sit </a></li>
<li><a href="#">Nam Lacuss Massa </a></li>
<li><a href="#"> Dollar Motion </a></li>
<li><a href="#">Free Shipping </a></li>
<li><a href="#"> Dollar Motion </a></li>
<li><a href="#">Free Shipping </a></li>
</ul>
</div>
<div class="hot custom-menu">
<h4>MT Birthday</h4>
<ul>
<li><a href="#">Sunflowers </a></li>
<li><a href="#">Lily Flower </a></li>
<li><a href="#">Pinky Flowers </a></li>
<li><a href="#">Sunflowers </a></li>
<li><a href="#">Rose Plants </a></li>
<li><a href="#">Green Plants </a></li>
<li><a href="#">Potted Garden Plants </a></li>
<li><a href="#">Bonsai & Tropical Plants</a></li>
</ul>
</div>
<div class="languages custom-menu">
<h4>MT Languages</h4>
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Vietnamese</a></li>
<li><a href="#">Hongkong </a></li>
<li><a href="#">France </a></li>
<li><a href="#">German </a></li>
<li><a href="#">Italia </a></li>
<li><a href="#">USA</a></li>
</ul>
</div>
<div class="tip custom-menu">
<h4>MT Tip &Tricks</h4>
<ul>
<li><a href="#">How to Flower Arranging ? </a></li>
</ul>
<div style="margin: 25px 0 0;"><iframe src="http://www.youtube.com/embed/rv6oWhG76pQ" frameborder="0" width="240" height="170"></iframe></div>
</div>

Adding a static block to Mega menu item

Example: you want to add a static block to the "WOMEN" mega menu item:

Step 1: Getting URL KEY of the Mega Menu item, see the following image:

get url key

Step 2: Creating static block: Go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

  • Block Title: Women
  • Identifier: women (note: this is URL KEY which you get from step 1)
  • Status: Enabled
  • Content:
<div class="menu-custom-item">
<h4>Leopard Dress</h4>
<img src="{{media url="wysiwyg/menu-women.png"}}" alt="" />
<p>Is a popular product in early 2012.<br />Will be available in summer.</p>
</div>

Showing 0 comment(s)

  • Add New Comment
  • Enclose code snippets within the appropriate tags:
    [php][/php] [js][/js] [xml][/xml] [css][/css] [html][/html]
    E.g: [php]echo "hello world";[/php]