How to use the new "X" Twitter icon

The social media network formerly known as Twitter will be rebranded simply to X (since July 2023), a change that has already been reflected, where the spot once reserved for the blue and white bird logo has been replaced with a gray-scale letter X. Because this is new, it wasn't included in FontAwesome 5.x that you may have inside Helix Ultimate and Helix3 based templates. It was added only inside the new Helix Ultimate update (Nov 2023) and FontAwesome 6.4.2+. But there is a smart way to use that "X" icon in all Helix based templates:

1. Start by visiting: https://fontawesome.com/icons/x-twitter?f=brands&s=solid
2. Choose the primary color (by default is dark navy). You can choose any color you need from a color palette, for example, light color - then click OK.
3. Click the "Download SVG file" button, and save the file (x-twitter.svg) on your local drive.
4. If you want to have a different color - open icon file with HTML editor, add fill attribute with the HEX color you need, and save the changes. It's needed to check at least, because in some cases FA generator may not add that color value.
5. Using the FTP tool, File Manager (cPanel), or any other working method to upload it on your server to /images folder.
6. Inside Template Options > Custom Code > Custom CSS  paste the below CSS code:

.fa-twitter::before { content: url("/images/x-twitter.svg"); width: 14px;
  display: inline-block; height: 14px; vertical-align: -0.125em;}

It will replace all Twitter icons with a new design (X). If you want to use it inside the custom.css file - it's better to add an absolute URL path to the .svg file. Remember to use matching color for all previously used icons, try to use the most universal one.

Extra tip! In Joomla 4+ by default, you cannot upload .svg files, it requests changing settings in Joomla Media > Options. But you can also install & use the Phoca Commander component, to upload a zipped (.svg) file and then unzip using the toolbar.

If you want to have a different color for the hover effect remember that .svg is not a font, and color cannot be changed using color style. You can get it only by using a second image with a different color code inside (x-twitter.svg) file. It means that you have to edit the file, then add/change fill the attribute with the HEX color that you need - then save a file with a different name, and use the extra CSS line. Here is an example CSS code:

.fa-twitter:hover::before { content: url("/images/x-twitter-hover.svg"); width: 14px;
  display: inline-block; height: 14px; vertical-align: -0.125em;}

How to hide Icon from Breadcrumbs

If you're using Helix Ultimate 2.0.x you may notice that in the first position of breadcrumb there is an icon (map marker). Yes, it can be hidden by using custom CSS:

.breadcrumb .divider.fas.fa-map-marker-alt {display: none;}

How to reduce space between Header and Article(s) area

If the space (padding) between the header and article and blog view is too big for you (by default is 100px), you can reduce it.

It's pretty easy, but request using custom CSS code:

.com-content #sp-main-body { padding: 10px 0; }

Of course, you can use a different value, a custom one for the top and bottom padding. It depends on your design goals.

If you want to reduce only for the top padding and keep the default bottom padding (100px) use the below custom CSS code instead of the code mentioned above:

.com-content #sp-main-body {padding-top: 0px; }

If you want to reduce to 0px paddings only in a single (detailed) article view - please use the below line:

.view-article #sp-main-body {padding: 0px; }

Notice! By default in SP Page Builder view from Page, the top and bottom padding doesn't exist at all, the value is set to 0.

How to reduce space between Header and Component area

If you want to reduce top space (padding) between the header and the main body please use the following Custom CSS:

#sp-main-body {padding-top: 0px; }

Notice! The default value from template styles was set at 100px. You can use any value you want, but it will be used for all components (articles, sp page builder, sp simple portfolio etc.) and everywhere on all subpages.

How to show Offcanvas Menu sooner

You can hide MegaMenu and display Offcanvas Menu also of chosen by you resolution, but it request using extra Custom CSS. Here is example for 1024px, you can change to 1280px as well. First line force to show [=] icon, and second to hide mega menu.

@media screen and (max-width: 1024px) {
#sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega
{display: block !important;}
 .sp-megamenu-parent.d-none.d-lg-block 
 { display: none !important; }
}

OR

@media screen and (max-width: 1280px) {
    .sp-megamenu-parent {display: none !important;}
    #offcanvas-toggler {display: flex !important;}
}

How to change the color of Offcanvas (=) Menu icon usead in header

It's very easy, since Helix Ultimate 2.0.12 update you can change colors using Template Options > Presets > Edit > Off-canvas Menu settings

Notice! Remember to disable SCSS > CSS in the Advanced tab first, also during that change, also CSS Compression must be Off. Later after changes, you can turn it On and then save the changes.

For templates that do not have that feature yet, you can also do that using a custom CSS method:

.burger-icon > span {background-color: white !important;}

You can use any color you need (red, blue, yellow, green), in the above example I used white (#fff) color. It's useful when your header has a dark background color.

To see changes remember to disable CSS compression, and clear the Joomla cache, especially if you use JCH Optimize or a similar CSS compressor tool after using the above code. You may need to refresh/clear the browser cache as well.

How to increase the size of Offcanvas (=) Menu

It's also easy, please use below custom CSS:

.burger-icon { width: 35px; } 

 .burger-icon > span {height: 4px; }

The final effect after using the above CSS code should be similar to that:

Notice! The default value for [=] width is 25px, and height is 2px.

Offcanvas Menu: How to change the color of closing (x)

It's also easy, to change the color of (x) icon from black to red please use below custom CSS:

.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span 
{ background-color: red;}

Before and after the change. In the below example we used red color for "X" icon, but you can change different colors (yellow, green, pink, blue).

Offcanvas Menu: How to display all submenu items (expand all)

If you want to display all submenu items from the mobile menu that users don't have to click (+) to see them all. It's possible, but requests using custom CSS code:

.menu-parent .menu-child{
    display: block !important;
}
.menu-parent .menu-toggler{
    display: none !important;
}

In some cases, to be able to scroll down thru the mobile menu you have to add/use also this CSS line:

.offcanvas-menu {overflow: scroll;}

The above code should be used inside Template Options -> Custom Code -> Custom CSS OR inside custom.css file.

Offcanvas Menu: How to change ">" open icon and submenu item's color

In the off-canvas menu, submenu items can be opened using a ">" icon, by default it has a black color. To change its color it requests using custom CSS code. Below is an example using a WhiteSmoke color (you can use classic white, green, or yellow instead, as you wish):

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,  
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
  color: whitesmoke;
}

To change submenu items the in off-canvas (mobile) menu you have to use custom CSS as well. Here is an example with yellow color, but you can use white or another color.

.offcanvas-menu .offcanvas-inner ul.menu > li li a {
  color: yellow;
}

The above code should be used inside Template Options -> Custom Code -> Custom CSS or inside the custom.css file.

How to Customize Offcanvas Menu

As the first step check the settings in Presets, where in the "Custom Style" tab you should be able to find the Offcanvas Menu section. From it, you can change basic colors.

About Font-Family and Font-Size go to Template Options > Typography > Custom > Custom Selectors  - paste:

.offcanvas-menu .offcanvas-inner ul.menu > li a, 
.offcanvas-menu .offcanvas-inner ul.menu > li span

Then set font settings > Save settings.

Anytime you can use Custom CSS to change the design of displayed menu items in the Mobile Menu, here are the class names used there:

.offcanvas-menu .offcanvas-inner ul.menu > li a  { ... }

.offcanvas-menu .offcanvas-inner ul.menu li.active a  { ... } 

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover  { ... }

.offcanvas-menu .offcanvas-inner ul.menu > li li a { ... }

Basic knowledge of CSS is required.

How to make the bottom menu vertical instead of horizontal

If we talk about the Menu module, you have to use use Bootstrap 5 class in that module in the Advanced (tab) > Menu Class (field): navbar

If that module was published in the bottom module position please add also that in the Custom CSS area to make all positions equal:

#sp-bottom .sp-module ul > li:last-child {margin-bottom: 15px;}

How to change 'Sign In' Link Color

It's pretty easy, but request using custom CSS code. Below is an example using a white color:

a.sp-sign-in { color: white; }

To add hover color effect (yellow) add and use also this line:

a.sp-sign-in:hover, a.sp-sign-in:focus { color: yellow; }

How to Translate the Sign-in link

It's a template language phrase. Please go to System -> Language Overrides, choose your language (Site), and create a new override for this language string:

HELIX_ULTIMATE_SIGN_IN_MENU

How to Translate Profile and Logout links

It's a template language phrase. Please go to System -> Language Overrides, choose your language (Site), and create a new override for those language strings:

HELIX_ULTIMATE_USER_PROFILE
HELIX_ULTIMATE_USER_LOGOUT

General tip: All phrases used by the Helix template (in front and admin area) are inside that file: languages/en-GB/en-GB.tpl_shaper_helixultimate.ini

How to add custom menu inside Profile menu

To get extra menu items inside Profile menu visible after user login - You have to publish a menu module in module position "logged-in-usermenu". This is a new module position added in Helix Ultimate 2.0.15 template update.

How to rename Meta generator with Helix Ultimate name

Since Helix Ultimate 2.0.9 update in Joomla! administrator, you can override the below generator phrase using: Languages: Overrides.

<meta name="generator" content="Helix Ultimate - The Most Popular Joomla! ...."> 

 In the field: Language Constant use: HELIX_ULTIMATE_GENERATOR_TEXT

In the text field: put your custom name, it can be "CMS" or your company name, as you wish. Remember to use this language override for all installed languages (ES, DE, FR, etc.).

If you have an older Helix-based template version (2.0.6 and older), you can still hide it by using small code customization - edit that file: plugins\system\helixultimate\src\Core\HelixUltimate.php - where you have to edit line 312:

$this->doc->setGenerator('Helix Ultimate - The Most Popular Joomla! Template Framework.');

Then replace the default text with a custom one, you can use any word, for example, "CMS" or your company business name. To edit php files you can use File Manager from cPanel or Phoca Commander component or FTP tool.

How to reduce space between menu items

If you have several menu items and they do not all fit in one row - reduce the default space between menu items. See the example below:

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 10px;}

By default, there is 15px of left and right padding between menu items. The value of 10px seems to be reasonable. Use that CSS code inside Helix Ultimate > Template Options > Custom Code > Custom CSS section or the custom.css file.

Of course, you can reduce this value only for smaller selected screen sizes (laptops, tablets) using the @media query. Perhaps the most common media queries in the world are those that target particular viewport ranges. Example CSS syntax:

 @media screen and (max-width: 1199px)  { .sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 10px;}
}

There are lots of other things we can target besides viewport width. That might be screen resolution or device orientation, such as tall (portrait) or wide (landscape) based on how the device is rotated. More on that topic you can read in CSS guides, and books.

In some cases to fit all menu items you should not only reduce space between MegaMenu menu items but also reduce font size a little bit. In most cases, even 1 pixel less can make a big difference. For example, for smaller screens, you can reduce the font-size value from 17px to 16px to keep (fit) all menu items in one row.

How to change the color of submenu items?

You should be able to do that from Template Options > Preset > Customization. But if somehow it doesn't work in MegaMenu please use below Custom CSS:

.sp-megamenu-parent .sp-mega-group > li > a {color: black; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, 
.sp-megamenu-parent .sp-mega-group > li > a:hover {color: red;}

How to change the position of the menu?

By default, in most cases, the menu is aligned to the left side, close to the logo picture. In the old Helix-based template, you could have a menu aligned to the right side or most to the center. To center the menu, you have to use custom CSS with a new justify-content property value (center, flex-end or flex-start):

#sp-menu > .sp-column, 
 #sp-menu  .sp-megamenu-wrapper { justify-content: center !important;}

To move the menu to the right side use below custom CSS code:

#sp-menu > .sp-column, 
 #sp-menu .sp-megamenu-wrapper { justify-content: flex-end !important;}

To move the menu to the left side use flex-start value in a similar way (Custom CSS) as it was presented above, then Menu Items will positioned at the beginning of the container:

#sp-menu > .sp-column, 
 #sp-menu .sp-megamenu-wrapper { justify-content: flex-start !important;}

How to hide the 3rd level of a menu in MegaMenu

From Navigation and MegaMenu settings it's not possible, but by using custom CSS you can hide from viewers' 3rd submenu. It's mostly for Desktop and Laptop users:

@media (min-width: 840px) {
.sp-megamenu-parent .sp-dropdown.sp-dropdown-sub .sp-dropdown-inner,
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after 
{display: none; visibility: hidden;}
}

How to remove background for active lang flag

By default under the active language flag, there is a grey background, you can remove it by using Custom CSS:

div.mod-languages ul li.lang-active {
  background-color: transparent;}

How to change background of body area in Boxed-Layout

By default is has solid white background color (#fff)  but by using Custom CSS you can:

• add color transparency,
• set different background color or even gradients,
• or remove current color completely.

For that task you have to use Custom CSS to modify background color. Here is example CSS code that will add 50% of transparency for white color:

.layout-boxed .body-innerwrapper {
  background: rgba(255,255,255,0.5);
}

RGBA - contain color value (Red,Green,Blue) and transparency (alpha) value. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

To set the 100% transparent background color, you can also use:

.layout-boxed .body-innerwrapper {
background: transparent; }

How to change the order of elements in the Article view

If your projects request changing the position (order) of Article Title and Image you have two options to do this.

• By template article view customization: plugins\system\helixultimate\overrides\com_content\article\default.php
• Or by custom CSS code

/* for single article */
.view-article .article-details {
    display: flex;
    flex-direction: column;
}
.view-article .article-header {
    order: -1;
    margin-bottom: 20px;
}

If you want to change it for the Article list in Blog view as well then use below Custom CSS:

/* for articles list */
.article-list .articleBody, .article-list .article-body {
    display: contents;
}
.article-list .article {
    display: flex;
    flex-direction: column;
}
.article-list .article-header {
    order: -1;
    margin-bottom: 20px;
}

How to add Smooth Scrolling

There are many ways to add this nice-looking feature to Helix based template, you can:

1. Install an extra Smooth Scrolling type plugin from JED.
2. Download and use smooth-scrolling javascript code inside the custom.js file.

But by default, Helix Ultimate 2.0 template use Bootstrap 5.x where scroll-behavior: smooth property is already used. It specifies whether to smoothly animate the scroll position, instead of a straight jump for the whole page. The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time.  Note: it is also possible to add it to a specific element/scroll container.
Browser support: Chrome, Edge (new), Firefox, Safari, Opera. For browsers that do not support the scroll-behavior property or you want a more advanced (configurable) solution, you should use JavaScript / jQuery or ready plugin.

How to disable the link for the Logo

First, you have to know that since Helix Ultimate 2.0.12 update in the raw template you can put your own custom URL for the logo link, it can be with a domain or just a subpage alias as well as just #. But if somehow you don't link at all, you have to use a custom CSS method:

#sp-header .logo a, .logo a, #sp-header .logo a {
cursor: default !important;
pointer-events: none; text-decoration: none; color: currentColor; 
user-select: none; -webkit-touch-callout: none;}

The above disabling a link CSS method should work for all Helix-based templates, based on Helix Ultimate and Helix3 even with a custom header name.

How to add .webp image type support

By default, Joomla 3.10 or Joomla 4 may not use this image extension format, so you have to add it manually. In Joomla Admin go to Media - click "Options" then please add mentioned phrases. Screenshot from Joomla 3.10 with correct settings. In Joomla 4 it's very similar.

How to use a custom font(s)

In this guide, you will learn the basics of how to use self-hosted fonts in the Helix Ultimate template. Useful for custom fonts (that are not part of the Google font family) for text elements.

According to browsers support stats, the WOFF (.woff) is supported in 98% and the WOFF 2.0 format in 96% (info from Sep 2022). Only IE8 and older android mobile browsers don’t support it. FontSquirrel  still create SVG, however, browsers do not need that anymore. Every browser (including IE!) is able to use woff, ttf and otf fonts (there is one catch for IE, though: It needs an ‘installable’ flag). In most cases, all you need is using max two font formats per font.

In the following example, I used the font AMATIC , designed by: Vernon Adams. To generate web font formats and CSS code - I used the online WebFonts Generator from fontsquirrel.com. Alternative max lite solution: http://webfonts.gidix.net/.  Or you can download Web Fonts from MyFonts.com.
Follow the steps:

1. Disable selected fonts in the Typography section (Template Options) 
2. Copy all fonts files here: templates\shaper_helixultimate\fonts
3. Create a new file custom.css where you should put generated CSS code.
4. Then change paths for font files adding "../fonts/" at the beginning.
5. Also in the custom.css file for example define for what HTML tags (H1...h6, p, li) or classes your custom font should be used.

VIDEO guide: https://www.youtube.com/watch?v=MfAIT8cMuv4