The preset2.css looks like this ...nicely formatted:

/**

• @package Helix Ultimate Framework
• @author JoomShaper https://www.joomshaper.com
• @copyright Copyright (c) 2010 - 2019 JoomShaper
• @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later */ body, .sp-preloader { background-color: #f4f4f4; color: #828282; } .sp-preloader > div { background: #131949; } .sp-preloader > div:after { background: #f4f4f4; }

  sp-top-bar {

  background: #131949; color: rgba(255, 255, 255, .5); }

  sp-top-bar a {

  color: rgba(255, 255, 255, .5); }

  sp-top-bar a:hover, #sp-top-bar a:focus {

  color: #fff; }

  sp-top-bar li.active > a {

  color: #fff; }

  sp-header {

  background: #fff; } a { color: #131949; } a:hover, a:focus, a:active { color: #131949; } .sp-reading-progress-bar { background-color: #131949; } .sp-megamenu-parent > li > a { color: #828282; } .sp-megamenu-parent > li:hover > a { color: #131949; } .sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a { color: #131949; } .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: #fff; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { color: #828282; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover { color: #131949; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: #131949; } .sp-megamenu-parent .sp-mega-group > li > a { color: #828282; }

  offcanvas-toggler > .fa {

  color: #828282; }

  offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fa:focus, #offcanvas-toggler > .fa:active {

  color: #131949; } .offcanvas-menu { color: #828282; } .offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span { color: #828282; } .offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus { color: #131949; } .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler { color: rgba(130, 130, 130, 0.5); } .offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a { color: rgba(130, 130, 130, 0.8); } .btn-primary, .sppb-btn-primary { border-color: #131949; background-color: #131949; } .btn-primary:hover, .sppb-btn-primary:hover { border-color: #131949; background-color: #131949; } ul.social-icons > li a:hover { color: #131949; } .layout-boxed .body-innerwrapper { background: #f4f4f4; } .sp-module ul > li > a { color: #828282; } .sp-module ul > li > a:hover { color: #131949; } .sp-module .latestnews > div > a { color: #828282; } .sp-module .latestnews > div > a:hover { color: #131949; } .sp-module .tagscloud .tag-name:hover { background: #131949; } .search .btn-toolbar button { background: #131949; }

  sp-footer, #sp-bottom {

  background: #fff; color: #828282; }

  sp-footer a, #sp-bottom a {

  color: #828282; }

  sp-footer a:hover, #sp-bottom a:hover, #sp-footer a:active, #sp-bottom a:active, #sp-footer a:focus, #sp-bottom a:focus {

  color: #131949; }

  sp-bottom .sp-module-content .latestnews > li > a > span {

  color: #828282; } .sp-comingsoon body { background-color: #131949; } .pagination > li > a, .pagination > li > span { color: #828282; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #828282; } .pagination > .active > a, .pagination > .active > span { border-color: #131949; background-color: #131949; } .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { border-color: #131949; background-color: #131949; } .error-code, .coming-soon-number { color: #131949; }

Oops - sorry...

Hello Jeff Honeyager

Sorry, we recommend not to edit the default CSS files. If you need to add any CSS, then add in Template Options -> Custom Code -> Custom CSS.

Best regards

Hello Jeff Honeyager,

It is best is you do not edit custom. css file. You can add your custom css code in the template options or if you want you can create custom.css file. Please, follow the documentation: https://www.joomshaper.com/documentation/helix-framework/helixultimate/custom-code

-Regards

Didn't answer the question.

I do not want to have a custom.css

I do not want to have a custom.css

Hi. This is at least strange that you do not want to have this file. After all, any changes in preset.css will be removed during SCSS recomposition or when updating the template. Custom.css file allows you not to lose your changes.

But nevertheless, if you need it, there are online services for the beautify code. Also, these features are in code editors, such as VS CODE. Copy the code, beautify in the editor or service and insert back to the file.

Dear Jeff Honeyager,

There is no other practical way to customize without the custom.css. If you want to understand preset.css or template.css, then you can format it in the way Pavel explained. You can format it online like this site or other.

Thank you.

You are welcome

I have a humble request. It would be very kind of you if you can manage some moment to give us feedback here:

1. JED
2. Trustpilot