Argento User Manual

This documentation is no longer updated. Please check recent release of our Argento manual at our new Magento extensions and templates documentation project or check our Knowledge Base.

CONTENTS

Customization

Using the backend configurator

Basic customization is available with Magento backend configuration since version 1.3.0 (See the System > Configuration > Templates Master).

Available configurable styles

  • Background
    • Body
    • Header
    • Footer
    • Content
  • Top navigation for desktop and mobile devices
    • Top level styles
    • Rest of the levels
  • Sidebar blocks font and background
  • Tabs on the homepage and product page
  • Fonts
    • Page title
    • Block title
    • Product name link in listing
    • Product page collateral titles
  • Ability to set the custom css styles
  • Ability to include additional head links

Each theme has different elements to customize

Using the custom.css file

  1. Create custom.css file inside active argento theme skin folder.

    For example:

    skin/frontend/argento/argento/css/custom.css 
    skin/frontend/argento/mall/css/custom.css
    skin/frontend/argento/mall_custom/css/custom.css
    
  2. Add css code to the new file and save it

  3. Flush Magento cache

Using the Argento theme override feature

This feature is available since Argento 1.5.0.

The most flexible method. Only this method could be used to override not just css styles but template and layout files. You can even create the custom.css file inside custom theme folder and it will be included too.

  1. Create new theme folder inside Argento package. The name of this folder should include the current active argento theme with _custom suffix. For example:

    app/design/frontend/argento/argento_custom
    app/design/frontend/argento/mall_custom
    skin/frontend/argento/pure_custom
    
  2. Copy the file you would like to change to this folder.

    For example:

    app/design/frontend/argento/mall_custom/template/catalog/product/list.phtml
    app/design/frontend/argento/mall_custom/layout/local.xml
    skin/frontend/argento/mall_custom/css/custom.css
    skin/frontend/argento/pure_custom/js/slider.js
    
  3. Make the changes and save the file

  4. Flush Magento cache

Customizing the button styles

You can use Ultimate CSS Gradient Generator to generate css code for button you like. Copy the code output and save it to the System > Configuration > Templates Master > [Your Theme] > Addional css > Css styles field.

Do not forget to wrap the code into button.button span {} wrapper.

Example:

button.button span {
    border-radius: 6px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 1px 2px 2px -1px rgba(0, 0, 0, 0.3);
    background: #f3920b;
    background: -moz-linear-gradient(top, #FFAF12 0%, #ED8108 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFAF12), color-stop(100%,#ED8108));
    background: -webkit-linear-gradient(top, #FFAF12 0%,#ED8108 100%);
    background: -o-linear-gradient(top, #FFAF12 0%,#ED8108 100%);
    background: -ms-linear-gradient(top, #FFAF12 0%,#ED8108 100%);
    background: linear-gradient(to bottom, #FFAF12 0%,#ED8108 100%);
}

Modifying home page

Custom header links block

Custom header links block is set as cms static block. It can be edited at Admin > CMS > Static blocks > header_links. Default blocks code is

<ul class="links header-links">
<li class="first"><a href="{{store url=""}}">support</a></li>
<li><a href="{{store url=""}}">faq</a></li>
<li class="last"><a href="{{store url=""}}">knowledge base</a></li>
</ul>

Language Switcher Block

The call of this block is located in app/design/frontend/argento/default/template/page/html/header.phtml

Line 33 : <?php echo $this->getChildHtml('store_language') ?>

Customer welcome message

If you wish to edit Magento default welcome message string, you can do it at System > Configuration > Design > Header page, change the Welcome Text option and click on Save button:

Default top links block

 

This block is based on container created in page.xml file

<block type="page/html_header" name="header" as="header">
 <block type="page/template_links" name="top.links" as="topLinks"/>
Each link is created at corresponding module xml file. For example For example My account links is created in customer.xml file with following code:
<action method="addLink" translate="label title" module="customer">
<label>My Account</label>
<url helper="customer/getAccountUrl"/>
<title>My Account</title>
<prepare/>
<urlParams/>
<position>10</position>
<liParams/>
<aParams>rel="nofollow"</aParams>
</action>

Store Logo

Logo image in Magento can be changed at System > Configuration > Design page

in Header > Logo Image Src option.

Instead of overwritting default logo file shipped with the theme it is recommended to upload a new file, (mylogo.gif or mylogo.jpg for example) into corresponding skin/frontend/argento/argento/images/ directory and change the Logo Image Src  option accordingly .

Header Callout Block

Custom header_callout block is set as cms static block. It can be edited at Admin > CMS > Static blocks > header_callout .

Default blocks code is:

<img class="header-callout hidden-phone hidden-tablet" style="margin: 5px 0 0 50px;" src="{{skin url="{{skin url="images/media/callout_customer_support.gif"}}" alt="Toll-Free Customer Support 24/7" />

You can change banner image at :

skin/frontend/argento/default/{{media url='/cmsmanual/homepage/media/callout_customer_support.gif

Top Search Block (TM Ajax Search)

This block uses Templates Master AjaxSearch extention. You can configure it at Magento Admin > System > Configuration > Templates Master > Ajax Search

Block code is listed in

app/design/frontend/argento/default/template/ajaxsearch/topsearch.phtml

Top Cart Block (TM AjaxPro)

This block uses ™ AjaxPro extention and its code is listed in:

app/design/frontend/argento/default/template/ajaxpro/top/headerCart.phtml

Top Menu Block (TM Navigation Pro)

This block uses Templates Master Navigation Pro extention. You can configure it at Magento Admin > System > Configuration > Templates Master > Navigation Pro

To add such menu go to Magento Admin > Templates Master > Navigation Pro

Choose your “menu type”  item in left tree-view menu and add needed widget in “Dropdown columns” tab

{{widget type="highlight/product_random" title="New Products" products_count="3" column_count="3" template="highlight/product/grid-short.phtml" class_name="highlight-random-navpro-music" category_filter="39"}}

or add such widget

{{widget type="highlight/product_featured" title="Featured Product" products_count="1" column_count="1" template="highlight/product/list.phtml" class_name="highlight-featured" category_filter="35"}}

for this view:

or add

{{widget type="highlight/product_special" title="Special Products" products_count="3" column_count="3" template="highlight/product/grid-short.phtml" class_name="highlight-special-navpro" category_filter="42"}}

for this view:

Homepage slider (TM Easy Slider)

Uses Templates Master EasySlide extention. You can read more about it on our site: http://templates-master.com/magento-extensions/magento-easy-slider.html  

Homepage Banners (TM Easy Banners)

Banners created with Templates Master Easy Banners extention. You can create/configure banners at Magento Admin > Templates Master > Easy Banners.

Read more about Easy Banners here:   http://templates-master.com/magento-extensions/magento-easy-banners.html  


Homepage Categories Listing (TM Easy Catalog Images)

This block created with Templates Master Easy Catalog Images ( http://templates-master.com/magento-extensions/magento-easy-catalog-images.html  ) extention. Configure it at Magento Admin > System > Configuration > Templates Master > Easy Catalog Images.


Tabs with products (TM Highlight)

Created with our Highlight extention. You can read more about it on our site:

http://templates-master.com/magento-extensions/magento-products-highlight.html

Added to homepage  with the code in  Admin -> CMS -> Manage Pages -> Homepage -> Content :

<div class="tab-container">
{{widget type="highlight/product_new" title="New arrivals" products_count="6" column_count="3" template="highlight/product/grid-link.phtml" class_name="highlight-new" all_link="highlight?type=new" all_title="See all new products"}} 
{{widget type="highlight/product_special" title="Sale" products_count="6" column_count="3" template="highlight/product/grid-link.phtml" class_name="highlight-special" all_link="highlight?type=onsale" all_title="See all on sale products"}} 
{{widget type="highlight/product_attribute_yesno" attribute_code="coming_soon" title="Coming soon" products_count="6" column_count="3" template="highlight/product/grid.phtml" class_name="highlight-attrbiute-coming_soon"}}
</div>
<script type="text/javascript">// <![CDATA[
new TabBuilder();
// ]]></script>

Product Labels (TM Pro Labels)

Product labels are created with Templates Master ProLabels extention. You can configure it at Admin > Templates Master > ProLabels > System/Manual labels

Or read about this extention here http://templates-master.com/magento-extensions/magento-prolabels-on-sale-tags.html  

Bestsellers & Popular (TM Highlight)

Blocks added to homepage in widgets at Admin -> CMS -> Manage Pages -> Homepage -> Content :

{{widget type="highlight/product_bestseller" title="Bestsellers" products_count="3" column_count="3" template="highlight/product/sidebar/list-link.phtml" class_name="highlight-bestsellers" all_link="highlight?type=bestsellers" all_title="See all bestsellers"}}
 {{widget type="highlight/product_popular" title="Popular Products" products_count="3" column_count="3" template="highlight/product/sidebar/list-link.phtml" class_name="highlight-popular" all_link="highlight?type=popular" all_title="See all popular products"}}

Featured Brands Block

This block is added in Admin -> CMS -> Manage Pages -> Homepage -> Content :

in block <div class="block brands-home hidden-phone"></div>

You can add/change brands in this tags:

<li><a href="#"><img src="{{skin url="images/catalog/brands/sony.jpg"}}" alt="" /></a></li>

All images for thios slider are stored in skin/frontend/argento/default/images/ folder.

Newsletter Block

Code of this block is listed at app/design/frontend/argento/default/template/newsletter/subscribe.phtml file.

Social Links Block

Custom ‘ footer_social ’ block is set as cms static block in  Admin > CMS > Static Blocks > footer_social

Block code is:

<div class="footer-social"><span class="label">Join our community</span>
<ul class="icons">
<li class="facebook"><a href="facebook.com">Facebook</a></li>
<li class="twitter"><a href="twitter.com">Twitter</a></li>
<li class="youtube"><a href="youtube.com">YouTube</a></li>
<li class="rss"><a href="rss.com">Rss</a></li>
</ul>
</div>

Footer Links Block

Custom ‘ footer_links ’ block is set as cms static block. It can be edited at Admin > CMS > Static blocks > footer_links .

Block code is:

<ul class="footer-links">
<li>
<div class="h6">About us</div>
<ul>
<li><a href="{{store direct_url="about"}}">About Us</a></li>
<li><a href="{{store direct_url="our-company"}}">Our company</a></li>
<li><a href="{{store direct_url="press"}}">Carriers</a></li>
<li><a href="{{store direct_url="press"}}">Shipping</a></li>
</ul>
</li>
<li>
<div class="h6">Customer center</div>
<ul>
<li><a href="{{store direct_url="about"}}">My Account</a></li>
<li><a href="{{store direct_url="our-company"}}">Oredr Status</a></li>
<li><a href="{{store direct_url="press"}}">Wishlist</a></li>
<li><a href="{{store direct_url="press"}}">Returns and Exchanges</a></li>
</ul>
</li>
<li>
<div class="h6">Info</div>
<ul>
<li><a href="{{store direct_url="privacy"}}">Privacy policy</a></li>
<li><a href="{{store direct_url="delivery"}}">Delivery information</a></li>
<li><a href="{{store direct_url="returns"}}">Returns policy</a></li>
</ul>
</li>
<li class="last">
<div class="h6">Contacts</div>
<ul>
<li><a href="{{store direct_url="contacts"}}">Contact Us</a></li>
<li><a href="{{store direct_url="location"}}">Store location</a></li>
</ul>
</li>
</ul>

Footer Contacts Block

Custom ‘ footer_contacts ’ block is set as cms static block. It can be edited at Admin > CMS > Static blocks > footer_contacts .

Block code listing:

<div class="footer-contacts">
<div class="h6">Visit Argento Store</div>
<address>
221B Baker Street
<br /> 
West Windsor, NJ 08550
<br /> 
<strong>1.800.555.1903</strong>
</address>
<a href="{{store url="map"}}">get directions</a>
<br /> 
<img style="margin-top: 10px;" src="{{skin url="images/security_sign.gif"}}" alt="" />
</div>

Footer Copyright Block

To change this information go to System -> Configuration -> General -> Design

The copyright notice is in the footer  section.

Footer Additional Links Block

This block is based on container created in page.xml (app/design/frontend/base/default/layout/page.xml) file

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
<block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>

All links are collected from different xml files.

Example: to edit Advanced search link go to

app/design/frontend/base/default/layout/catalogsearch.xml

and edit following code:

<reference name="footer_links">
<action method="addLink" translate="label title" module="catalogsearch" ifconfig="catalog/seo/search_terms">
<label>Search Terms</label>
<url helper="catalogsearch/getSearchTermUrl" />
<title>Search Terms</title>
</action>
<action method="addLink" translate="label title" module="catalogsearch">
<label>Advanced Search</label>
<url helper="catalogsearch/getAdvancedSearchUrl" />
<title>Advanced Search</title>
</action>
</reference>