6. Theme features and elements
6.5 CMS components
6.5.3. B Predefined icons
With the following code you can display predefined icons. You can use the code in any place of your store:
<span class="icon i-telephone"></span>
<span class="icon i-mobile"></span>
<span class="icon i-letter"></span>
<span class="icon i-skype"></span>
By default icons are black. To display white icons, add -w at the end of the unique class, for example: i-telephone-w:
<span class="icon i-telephone-w"></span>
You can also add class icon-hover to the icon in order to add color change on mouse hover over the icon:
<span class="icon icon-hover i-telephone-w"></span>
6.5.3.C Letters, numbers and characters as icons
By adding class i-char to the icon, you can display any characters (such as letters, numbers etc.) as icons. The code is almost the same as for icon with custom image but the image was replaced by a single character. Below you can see examples:
You are reading: CMS components
With the following code you can display predefined icons as links to social services. You can use the code in any place of your store:
<div class="social-links icon-wrapper-square">
You are reading: CMS components
By default icons are black. To display white icons, add -w at the end of the unique class, for example: i-twitter-w:
<span class="icon icon-hover i-twitter-w"></span>
You are reading: CMS components
6.5.4 Text with icon
With the following code you can display text (paragraphs, links, headings etc.) with an additional icon (icons are described in 6.5.3 Icons):
<div class="feature indent">
If you want to use large icon, you need to add class large to the main element and to the icon:
To add icon background color change on mouse hover over the entire element, add class feature-icon-hover to the main element:
<div class="feature indent feature-icon-hover">
<span class="icon">
<img src="{{media url='wysiwyg/infortis/fortis/icons/star.png'}}"
alt="My description" />
</span>
You are reading: CMS components
You can also use any custom image instead of an icon. To do this, add class icon directly to the image, do not wrap it in <span>:
<div class="feature indent feature-icon-hover">
<img class="icon " src="{{media url='wysiwyg/infortis/fortis/icons/my_image.png'}}"
alt="My description" />
<p>This is sample text</p>
</div>
Size of the image should be the same as described in 6.5.3 Icons. If you prefer to display the icon without size limitations, add class auto-size to the <img> tag:
<div class="feature centered">
<img class="icon auto-size" src="{{media url='wysiwyg/infortis/fortis/icons/my_image .png'}}" />
<p>This is sample text</p>
</div>
Centered
To align elements to the center, use the following class: centered. Like this:
<div class="feature centered">
You are reading: CMS components
6.5.5 Captions for Slideshow
This chapter describes how to create captions inside the homepage Slideshow. Presented code can be used inside the main slides and inside small banners at the side of the
Slideshow.
To set background color, use one of the following classes: light1, light2, light3, dark1, dark2, dark3.
For example:
<div class="caption light1">
<p>Lorem ipsum dolor sit amet</p>
</div>
To position caption, use the following classes (by default captions is positioned in the bottom left corner): top, top-right, bottom-right.
For example:
<div class="caption light1 top-right">
<h2 class="heading">Big Heading</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
Additionally, the paragraph of text inside the caption can be aligned right with class:
right, or centered with class: centered.
For example:
<div class="caption dark1 centered">
<h2 class="heading">Big Heading</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
You are reading: CMS components
For example:
<div class="caption dark3 full-width">
<p>Lorem ipsum dolor sit amet dictum sit altum.</p>
</div>
On narrow screens elements of the caption will be hidden. To keep selected elements visible, use class: permanent.
For example:
<div class="caption light1">
<h2 class="heading permanent">Heading always visible</h2>
<p>This paragraph will be hidden on mobile</p>
</div>
You are reading: Theme customization
6.6 Theme customization
This chapter was moved to: 5. Customization
Admin panel: System > Configuration > Fortis > Theme Settings
7. Theme settings
This chapter refers to the following section of the theme admin panel:
System > Configuration > Fortis > Theme Settings
Important:
beginning from this chapter, each chapter refers to a specific sections of theme admin panel. Path of the admin panel section is visible at the top of each page.
Admin panel: System > Configuration > Fortis > Theme Settings
7.1 Header
In this tab, you can configure the options related to the header section.
Elements of the User Menu
•
Block "Compare" in the Header
– enable/disable "Compare" drop-down block in the header. If it's disabled, the block will be displayed on its default position in Magento: left sidebar.•
Hide Empty Cart on Mobile Devices
– empty cart can be hidden on mobile devices (if browser viewport is narrower than 480 pixels).Top Links
•
Top Links With Icons
– if enabled, icons can be displayed in Top Links (set of links: Account, Wishlist, Log In). Add custom links to Top Links, use static block block_header_top_links. Sample static blocks with sample content can be imported, refer to 6.2 Built-in CMS blocks for more details.•
Link Style (Above 640 px)
– style of links if browser viewport width is above 640 px.•
Link Style (Below 640 px)
– style of links if browser viewport width is below 640 px.Admin panel: System > Configuration > Fortis > Theme Settings