This section contains answers from some popular "How to create/use/hide/override/translate ..." questions about the Helix3 framework. HowTos' are short, highly-targeted tips for accomplishing a specific task. They are intended to help you learn our framework so that you can get the best experience with your projects. If you have more questions or suggestions feel free to write on the support forum.

How to update Helix3

There are two methods to update the Helix3 framework:

Method #1

1. Extensions: Update > click "Clear cache" button (top left)
2. Click "Find updates" button
3. Mark all plugins with "helix3" name
4. Click "Update" to install new versions

Method #2
Download and install the Helix3 template, it will update the framework too. 

Google Font API insertion in Helix3 v2.5.6

The users of Helix3 v2.5.5 have been facing difficulties with Google Font API key insertion after updating to v2.5.6. Here's the solution on how to fix this issue. The following solution was shown using the HOPE template. Please be informed that the fix is exactly the same for all Helix3 based templates.

After updating Helix3 from v2.5.5 to Helix3 v2.5.6 (it is done usually by downloading the Helix3 template and installing), you need to do the followings.

Now before we begin, our Helix3 Typography section looks like this one:

Step 1: Replacing the font section of our template (in this case Hope)

First, we need to copy the font section of the Helix3 template i.e. the templateDetails.xml file found in root folder > templates > shaper_helix3 > templateDetails.xml 

Once you've opened up the file using a text editor you need to copy the font section. You can find it easily, the section starts from <!--Start Font Tab--> and ends at <!--End Font Tab-->. Now you need to copy the section. 

Or, you can just copy the following code snippet.  

<!--Start Font Tab-->
 <fieldset name="typography" addfieldpath="/plugins/system/helix3/fields">
 <field type="group" title="HELIX_GOOGLE_FONTS_LIST" subtitle="HELIX_GOOGLE_FONTS_LIST_DESC"/>
 <field name="gfont_api" type="text" class="parent" label="HELIX_GFONT_API" description="HELIX_GFONT_API_DESC" />
 <field name="update_fonts" type="button" url="#" text="HELIX_UPDATE_FONTS_CLICK" label="HELIX_UPDATE_FONTS_LIST" description="HELIX_UPDATE_FONTS_LIST_DESC" class="btn-primary btn-update-fonts-list" />
 
 <field type="group" title="HELIX_BODY_FONT" subtitle="HELIX_BODY_FONT_DESC" />
 <field name="enable_body_font" class="parent body_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="body_font" type="typography" class="child body_font body_font_1" default='{"fontFamily":"Open Sans","fontWeight":"300","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="HEADING1_FONT" subtitle="HEADING1_FONT_DESC" />
 <field name="enable_h1_font" class="parent h1_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="h1_font" type="typography" class="child h1_font h1_font_1" default='{"fontFamily":"Open Sans","fontWeight":"800","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="HEADING2_FONT" subtitle="HEADING2_FONT_DESC" />
 <field name="enable_h2_font" class="parent h2_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="h2_font" type="typography" class="child h2_font h2_font_1" default='{"fontFamily":"Open Sans","fontWeight":"600","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="HEADING3_FONT" subtitle="HEADING3_FONT_DESC" />
 <field name="enable_h3_font" class="parent h3_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="h3_font" type="typography" class="child h3_font h3_font_1" default='{"fontFamily":"Open Sans","fontWeight":"regular","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="HEADING4_FONT" subtitle="HEADING4_FONT_DESC" />
 <field name="enable_h4_font" class="parent h4_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="h4_font" type="typography" class="child h4_font h4_font_1" default='{"fontFamily":"Open Sans","fontWeight":"regular","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="HEADING5_FONT" subtitle="HEADING5_FONT_DESC" />
 <field name="enable_h5_font" class="parent h5_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="h5_font" type="typography" class="child h5_font h5_font_1" default='{"fontFamily":"Open Sans","fontWeight":"600","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="HEADING6_FONT" subtitle="HEADING6_FONT_DESC" />
 <field name="enable_h6_font" class="parent h6_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="h6_font" type="typography" class="child h6_font h6_font_1" default='{"fontFamily":"Open Sans","fontWeight":"600","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="NAVIGATION_FONT" subtitle="NAVIGATION_FONT_DESC" />
 <field name="enable_navigation_font" class="parent navigation_font" type="radio" default="0" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="navigation_font" type="typography" class="child navigation_font navigation_font_1" label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 <field type="group" title="CUSTOM_FONT" subtitle="CUSTOM_FONT_DESC" />
 <field name="enable_custom_font" class="parent custom_font" type="radio" default="0" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">
 <option value="1">HELIX_YES</option>
 <option value="0">HELIX_NO</option>
 </field>
 <field name="custom_font" type="typography" class="child custom_font custom_font_1" label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />
 <field name="custom_font_selectors" type="textarea" class="child custom_font custom_font_1" label="HELIX_FONT_CUSTOM_SELECTORS" description="HELIX_FONT_CUSTOM_SELECTORS_DESC" />

 </fieldset>
 <!--End Font Tab-->

Now you need to replace the font section of your template (Hope in this case) with the code you just copied. To do so, open the templateDetails.xml file, which is found in root folder > templates > shaper_hope (if you're using a different template it will be under the name of that template) > templateDetails.xml 

Select the code from <!--Start Font Tab--> to <!--End Font Tab--> and replace it with the code you just copied (the above code snippet) then save the file.

At this stage, our Helix3 Typography section looks like this one:

Step 2: Fixing the language file

To fix the language file, we need to copy the typography code section from the en-GB.tpl_shaper_helix3.ini file and replace it in the en-GB.tpl_shaper_hope.ini file (if you're using a different template it will be under the name of that template). The files are located in the root > language > en-GB folder. 

Once you've opened up the en-GB.tpl_shaper_helix3.ini file, copy the codes under #Typography#

Or, you can just copy the following code snippet.  

#Typography#
COM_TEMPLATES_TYPOGRAPHY_FIELDSET_LABEL="<i class='fa fa-font'></i>Typography"
HELIX_FONT_FAMILY="Font Family"
HELIX_FONT_WEIGHT_STYLE="Font Weight & Style"
HELIX_FONT_SUBSET="Font Subset"
HELIX_FONT_SIZE="Font Size"
HELIX_GFONT_API="Google Font API"
HELIX_GFONT_API_DESC="Get your API key from the link given above and click the <strong>Save</strong> button after inserting the API Key."
HELIX_GOOGLE_FONTS_LIST="Google Fonts List"
HELIX_GOOGLE_FONTS_LIST_DESC="You may require <strong>Google Fonts API Key</strong> to update the font list. Get your API Key from here: <a href='https://developers.google.com/fonts/docs/developer_api' target='_blank'>https://developers.google.com/fonts/docs/developer_api</a>"
HELIX_UPDATE_FONTS_LIST="Update Fonts List"
HELIX_UPDATE_FONTS_LIST_DESC="It allows you to refresh the list of available Google fonts. If there are any new ones, this button allows you to quickly update fonts with just one click, and they will be automatically added in to Helix 3 Framework."
HELIX_UPDATE_FONTS_CLICK="One Click update"
HELIX_BODY_FONT="Body Font"
HELIX_BODY_FONT_DESC="This google font will be applied on &lt;body&gt; tag."
HELIX_ENABLE_FONT="Enable"
HELIX_ENABLE_FONT_DESC="Enable google for this CSS Selector."
HELIX_SELECT_FONT="Select Font"
HELIX_SELECT_FONT_DESC="Set the default font."
HEADING1_FONT="Heading1 Font"
HEADING1_FONT_DESC="This google font will be applied on &lt;h1&gt; tag."
HEADING2_FONT="Heading2 Font"
HEADING2_FONT_DESC="This google font will be applied on &lt;h2&gt; tag."
HEADING3_FONT="Heading3 Font"
HEADING3_FONT_DESC="This google font will be applied on &lt;h3&gt; tag."
HEADING4_FONT="Heading4 Font"
HEADING4_FONT_DESC="This google font will be applied on &lt;h4&gt; tag."
HEADING5_FONT="Heading5 Font"
HEADING5_FONT_DESC="This google font will be applied on &lt;h5&gt; tag."
HEADING6_FONT="Heading6 Font"
HEADING6_FONT_DESC="This google font will be applied on &lt;h6&gt; tag."
NAVIGATION_FONT="Navigation Font"
NAVIGATION_FONT_DESC="This google font will be applied on main navigation."
CUSTOM_FONT="Custom Font"
CUSTOM_FONT_DESC="Apply this google font to any custom CSS selector."
HELIX_FONT_CUSTOM_SELECTORS="CSS Selectors"
HELIX_FONT_CUSTOM_SELECTORS_DESC="Add custom CSS selectors. Separated by comma."

Now, we need to replace the #Typography# code of en-GB.tpl_shaper_hope.ini file with the one we just copied (the above code snippet).

After doing so, we need to save and close the file. Now if we go to the Helix3 template styling > typography section, we'll see the following. 

The above screenshot confirms that we have successfully solved our issue. Now to get the Google Font working we need to insert the API key and click on "Save" button to make changes. 

Lastly, we'll click on "One Click Update" button to load Google Fonts. This completes the process. 

How to customize the Header

To reduce the height of a header from the Helix3 template you need to use custom CSS code. The default value is 90px, but you can always change the value. For example: 60px.

Customization by CSS code:

#sp-header, #sp-header .logo { height: 60px; }
.sp-megamenu-parent > li > a, #offcanvas-toggler { line-height: 60px; }

How to reduce the Header height on (or after) scrolling

If you want to reduce the header height only after scroll down, you can use the following custom CSS code:

header.menu-fixed, header.menu-fixed .logo { height: 60px !important }
header.menu-fixed .sp-megamenu-parent > li > a,
header.menu-fixed #offcanvas-toggler { line-height:60px; }

How to use a different font instead of Google Fonts

By default, in almost all of our JoomShaper (template) QuickStarts, we have used Google Fonts for template typography, but you do not need to stick with the fonts we have chosen. You can select different ones or just use the classic font sets. In the current version of Helix3, it requires only one line of custom CSS.

Basic CSS knowledge

The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The font-family property specifies a list of fonts, from highest priority to lowest. Traditionally only "websafe" fonts could be used on web pages.  These fonts are standard fonts installed in both Windows and Mac computers. You will find the full list here: http://www.cssfontstack.com

How to use Arial, Verdana, Sans-serif etc.

1. In template settings - in "Typography" Tab, please turn off Google fonts for body, probably all Headers and Menu as well.
2. In "Custom code" tab inside the Custom CSS field please add the following code or any other "websafe" font collection:

 body, p, h1, h2, h3, h4, h5, h6, a, li, span {font-family: Arial, Helvetica, sans-serif;}

Other examples:

body, p, h1, h2, h3, h4, h5, h6, a, li {font-family: Times, "Times New Roman", Georgia, serif; }

body, p, h1, h2, h3, h4, h5, h6, a, li {font-family: Verdana, Arial, Helvetica, sans-serif; }

body, p, h1, h2, h3, h4, h5, h6, a, li {font-family: "Lucida Console", Courier, monospace; } 

You are advised to use only those HTML tags that you need to change.

Note: Some popular fonts, for example, Tahoma belongs to the Microsoft Corporation, so they are installed by default only in Windows, not in Mac OS X, Linux or Ubuntu!

How to use custom CSS

Useful tip on how to use custom CSS in Helix3 bases templates can be found here: https://www.joomshaper.com/documentation/helix-framework/helix3#custom-css-header-code

How to add a new font to Helix3 Template

If you don't want to use Google Font in Typography section nor the default Helvetica Neue, Helvetica or Arial you can load your own font. For example, you can integrate a custom font from MyFonts.com, fontspring.com, transfonter.org or fontsquirrel.com or use WebFonts Generator from it (suggested method). Please ensure to download the @font-face Kit.

All you need to do is copy and paste the font files, and make some edits to your custom.css file. In this example, we will explain how you can add the custom free font AlexBrush to your JoomShaper template. This method can be used with any template based on Helix3 framework.

1. Please unzip all font files (.eot, .woff, .ttf, .svg) from template package to this same template folder where the template keeps other fonts, for example here: templates\shaper_helix3\fonts
   Use FTP tool for this purpose.
   
2. Now open stylesheet.css which should be in generated font package, in my PC it looks like this:

   @font-face {
       font-family: 'alex_brushregular';
       src: url('alexbrush-regular-webfont.woff2') format('woff2'),
            url('alexbrush-regular-webfont.woff') format('woff'),
            url('alexbrush-regular-webfont.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }

3. But we need to change the paths for the files, it's advised to use following change (../fonts/):

    @font-face {
       font-family: 'alex_brushregular';
       src: url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
            url('../fonts/alexbrush-regular-webfont.woff') format('woff'),
            url('../fonts/alexbrush-regular-webfont.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }

4. Now open or create a custom.css file inside /css folder (in JoomShaper template) and copy the updated code there.
5. Once you have added the font to your template's font directory, you can apply it to your site. Now you need to choose this new font for selected CSS selectors or HTML tags, also inside custom.css file, for example:

   h1, h2, h3 { font-family: 'alex_brushregular', Arial; }

   Here is the content from my example file
   
6. Remember to disable Google Fonts from Typography tab (helix3) for those chosen HTML tags where you want to use the custom font instead.
    
7. You can also replace the default font color and font size with your preferred font color and size, using the basic CSS rules.
8. If you want to use custom fonts for HTML tags or menu items etc. please turn off (disable) Google Fonts for them in the Typography tab.

Final result on front-end

How to change the direction to RTL

 tab-padding .custom > p { text-align: right; }
 ul.tabs_container li.tab { float: right !important; 

How to add custom module position above and below component area

    $output .= '<jdoc:include type="message" />';
    $output .= '<jdoc:include type="component" />';

    $output .= '<jdoc:include type="message" />';
    $output .= '<jdoc:include type="modules" name="above" />';
    $output .= '<jdoc:include type="component" />';
    $output .= '<jdoc:include type="modules" name="below" />';

     <position>above</position>
     <position>below</position>

        <position>above</position>
        <position>below</position>
        <position>footer1</position>
        <position>footer2</position>
        <position>comingsoon</position>
        <position>offcanvas</position>
        <position>pagebuilder</position>
        <position>404</position>
        <position>debug</position>
    </positions>

How to increase logo size

If in template based on Helix3 uploaded/chosen by you logo is displayed too small or too big, you have to make small changes, start with:

1. For desktop purposes, use logo image with finial height, for example 100px. Do not use HUGE images, it doesn't make sense.
   
   
2. In some templates to see bigger logo image (in normal size), you have to also:
   a) Increase Logo column in Template settings > Layout > Header. If  3,9  is too small, use 4,8 or custom layout.
   b) Override logo height limit
   #sp-header .logo h1 > img {max-height: none; height:100px;}
    

How to fix Cannot use object of type stdClass as array

If after Joomla update to 3.9+ you cannot edit menu any items you have to remove extra menu plugin.

1. Extensions > Manage > Plugins
2. Then disable and uninstall plugin "System - Extra Menu Params"

It's not compatible with Joomla 3.9+, it was developed by YouTech Company, not JoomShaper.

How to transfer template settings