Document for Fabini Moda Theme

Getting Started

Welcome to Fabini Theme!

First of all, we would like to thank you for purchasing Fabini Theme. We are very pleased you have chosen Fabini Theme (or interested in :)) for your website, you will be never disappointed! Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Fabini Theme. Fabini Theme can only be used with Magento and we assume that you already have Magento installed and ready to go.

Compatible with Magento:

Fabini Theme is fully compatible with Magento Community Edition 1.7.0.0, 1.7.0.1, 1.7.0.2, 1.8.0.0, 1.8.1.0, 1.9.0.0, 1.9.0.1, 1.9.1.0, 1.9.1.1, 1.9.2.0, 1.9.2.1, 1.9.2.2, 1.9.2.3, 1.9.2.4

Magento Information

To install this theme you must have a working version of Magento already installed. If you need help installing Magento, follow below sites and tutorials from Magento Developer Documentation, hope everything that you need are there.

Theme Installation

Prepare Installation

  • We recommend you to duplicate your live store on a development store and try installation on it in advance.
  • Backup magento files and the store database.

     Important

    It's very important to backup all of themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not omit this step.

  • Enable all caches in your magento.

     Important

    It's very important to enable the caches, Because, sometimes, some of the extensions of the theme were installed incorrectly. So you should enable the caches during upload the theme files, then you should disable or clear the caches, when complete to upload the theme files.

  • Upload the theme files.(refer Next Part Theme Files Upload)
  • Disable compilation mode in System > Tools > Compilation.
  • Disable all cache related section that you have in your magento.

     Important

    To apply the your changes working, you should disable or clear all of cache related sections, such as magento default cache, magento cache extension or CDN etc. The best choice is to disable all of them and enable it after you finish your work.

Prepare Installation

Upload via FTP

  • Log into your hosting space via a FTP software. ie, FileZilla
  • Unzip Fabini Theme.zip and upload all directories(There are 5 directories - app, js, lib, media and skin) to magento root directory.

Upload via CPanel

  • Log into your CPanel(Control Panel) by your hosting account or cpanel user information.
  • Upload Fabini Theme.zip to your magento root directory and unzip its content.

Add block permissions for magento 1.9.2.4

You should add block types for block permissions in System > Permissions > Blocks on magento 1.9.2.4

  • core/template
  • catalog/product_new
  • newsletter/subscribe
  • cms/block
  • catalog/product_list
  • slider/home
  • filterproducts/featured_home_list

Demo Installation

Fabini Theme provides extremely easy - one click demo installation. In order to do demo installation, you should import static Blocks and CMS pages in Theme Settings > Theme Installation.

 Important

You may experience 404 Error when you try to open Theme Settings Panel. In this case, please log out and log in again to make the page working.

  • Click Import Static Blocks and Import CMS Pages buttons to prepare demo installation.
  • Click Import Fabini Demo button to install demo version.
Congrats! You finished demo installation, now you can go forward!

Theme Customization

Make the Child Theme and Customize the Theme

  • We recommend you to create the child theme, if you need to customize the theme.
  • Make the child theme in the same directory with moda
  •  Example

    /app/design/frontend/fabini/moda_child
    /skin/frontend/fabini/moda_child

  • Input "moda_child" into System > Configuration > General > Design > Themes > Templates, Skin(Images/CSS), Layout
  • Add the only changed files, not all files into the child theme's directories.

     Example

    Create custom.css file into /skin/frontend/fabini/moda_child/css/ directory, then add custom css styles into that file.

Theme Version Update

Prepare Update

  • We recommend you to duplicate your live store on a development store and try update Fabini version on it in advance.
  • Backup magento files and the store database.

     Important!

    Its very important to backup all of themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not omit this step.

  • Enable all caches in your magento.

     Important!

    It's very important to backup all of themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not omit this step.

  • Upload the theme files.(refer Next Part Theme Files Upload)
  • Disable compilation mode in System > Tools > Compilation.
  • Disable all cache related section that you have in your magento.

     Important!

    To apply the your changes working, you should disable or clear all of cache related sections, such as magento default cache, magento cache extension or CDN etc. The best choice is to disable all of them and enable it after you finish your work.

  • Log out from magento admin panel and log in again. Its essential to Logout/Login again to refresh your control panel.

Theme Configuration

Menu Configuration

For general menu settings, please go to THEME EXTENTSIONS > Megamenu and follow instructions there. It describes how to:

  • set default menu type for all menu items
  • show "home" link
  • show category labels such as "New", "Hot" as our demo site
  • show custom links into menu, for example, "Features" menu that you can see from our demo

How to add a menu item that has fixed-width mega menu?

  • Add new cateogry and necessary subcategories for dropdown content.

  • Set "Menu Type" field as "Static Width".

  • Set "Static Width" for the fixed mega menu as your needs. For example, 600px.

  • Set "Sub Category Menu Columns" for the your menu popup level. For example, 2.

  • Set Block Width that you prefer to add image or custom block as right image. For example, set 5 - (it means it will take 5 columns area from 12 columns) for "Block Right Width(%)", right block will be 250px in this case.

  • Add custom block to show in the mega menu. For example, please add follow codes.

    <img src='{{media url="wysiwyg/fabini/banners/fashion-assist-banner.jpg"}}' />

How to add a menu item that has full-width mega menu?

  • Add new cateogry and necessary subcategories for dropdown content.

  • Set "Menu Type" field as "Full Width".

  • Set "Sub Category Menu Columns" for the your menu popup level. For example, 3.

  • Fill "Block Top" field to show custom content in the top area as the right sample screenshot. For example,

    <div style="margin: 0 20px;padding: 10px 0 15px;border-bottom: 1px solid #eee;width: 63%;color: #000;">
    <b style="margin-right: 15px;">SUGGESTIONS:</b>
    <a href="#" style="margin-right: 15px;color:#000">SALE</a>
    <a href="#" style="margin-right: 15px;color:#000">PROMOTION</a>
    <a href="#" style="margin-right: 15px;color:#000">SUMMER</a>
    <a href="#" style="color:#000">NEW ARRIVALS</a>
    </div>
  • Set Block Width that you prefer to add image or custom block as right image.
    For example, set 5 - (it means it will take 5 columns area from 12 columns) for "Block Right Width(%)", right block will be 250px in this case.

  • Add custom block to show in the mega menu. For example, please add follow codes.

    <div class="menu-right-block" style="position: relative;text-align:center;">
    <img src="{{media url="wysiwyg/fabini/banners/shoes.jpg"}}" alt="" style="margin-top:20px"/> 
    <div style="position: absolute;top: 6px;left: -30px;text-align: left;"
    <a class="btn btn-default" style="padding: 5px 7px 5px 15px;color: #fff; border: 0;font-size:13px;" href="http://fabini-themes.com/moda/cool-shoes.html/">VIEW NOW <em class="icon-right-dir"></em></a>
    </div>
    <div style="position: absolute;bottom: 8px;width: 60%;text-align: center;left: 50px;line-height: 14px;font-size: 13px;color: #fff;">This is a custom block. You can add any images or links here.</div>
    </div>
    

How to add a menu item that has classic dropdown menu?

  • Add new cateogry and necessary subcategories for dropdown content.

  • Select the menu item that you just created, and go to "Menu" tab.

  • Choose "Menu Type" field as "Classic".

How to Add or Remove a custom link in the menu?

After you finish theme installation, you can find a custom menu "Features" in your store. If you want to add/edit or remove this custom menu, please go to CMS > Static Blocks > fabini_custom_menu, fabini_custom_menu_mobile and edit html codes in static block.

Category Page Configuration

Category Page Banner Configuration

Fabini Theme provides several types of category banner mode, static image, slider, full width, boxed width etc. You can choose one as your choice.

  • Go to the Manage Categories page to follow Catalog > Manage Categories.

  • Select Default Category in the treeview area at the left side.

  • Click Add Subcategory button, then input Category name, Description, etc. Notes: set the options Is Active to "Yes", Include in Navigation Menu to "Yes" in General Information tab.

  • If you want to display banner image, please set image in General Information tab.

  • In order to display banner with static block, please set CMS Block in Display Settings tab.

  • In order to display full width banner, please input html codes for the full width banner in General Information tab. Please don't forget, the configuration Show Category Description below the Header should be "Yes" in System > Configuration > Theme Settings > Category View.

    <div class="full-width-image-banner" style="background: url({{media url="wysiwyg/fabini/category/banner/clothing-category-banner.jpg"}}) 50% 50% no-repeat;background-size:cover;height:250px;">
    	<div class="content" style="position:absolute;z-index:1;top:50%;width:100%;text-align:center;">
    		<h2 style="color: #fff;font-weight: 600;">CATEGORY <b style="font-weight: 800;">BANNER</b></h2>
    		<p style="color: #fff;font-weight: 300;">Set banners and description for any category of your website.</p>
    	</div>
    </div>

  • Click Save Category button, to update your changes.