Sorry, but nothing matched your search terms. Please try again with some different keywords.
Customization Tips
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:
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, value is set to 0.
How to change the color of Offcanvas (=) Menu icon usead in header
It's quite easy, please use custom CSS:
.burger-icon > span {background-color: white !important;}
You can use any color you need (red, blue, yellow), 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 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.
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
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:
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 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):
To change submenu itemsthe 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 custom.css file.
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:
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:
$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 (J3 / J4) or FTP tool. Remember to keep exactly this same filename "HelixUltimate.php" (!)
UPDATE! Since Helix Ultimate 2.0.6 update , it means in 2.0.9+ you can override the above phrase using Languages: Overrides, like in the below example.
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 to all installed languages.
How to change the position of the menu?
By default, in most cases, the menu is algin 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 menu you have to use custom CSS with new justify-content property value:
#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: end !important;}
How to change the order of elements in 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
There are many ways to add this nice looking feature to Helix based template, you can:
Install an extra Smooth Scrolling type plugin from JED.
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 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.