Formatting For The Css - Question | JoomShaper

Formatting For The Css

JH

Jeff Honeyager

Template 2 months ago

Finatic.

How do I display the css file in a properly formatted way?

The Preset1.css file looks like this - I cannot edit this:

body,.sp-preloader{background-color:#f4f4f4;color:#828282}.sp-preloader>div{background:#4e7e5c}.sp-preloader>div:after{background:#f4f4f4}#sp-top-bar{background:#4e7e5c;color:rgba(255, 255, 255, 0.5)}#sp-top-bar a{color:rgba(255, 255, 255, 0.5)}#sp-top-bar a:hover,#sp-top-bar a:focus{color:#ffffff}#sp-top-bar li.active>a{color:#ffffff}#sp-header{background:#FFFFFF}a{color:#4e7e5c}a:hover,a:focus,a:active{color:#4e7e5c}.sp-reading-progress-bar{background-color:#4e7e5c}.sp-megamenu-parent>li>a{color:#828282}.sp-megamenu-parent>li:hover>a{color:#4e7e5c}.sp-megamenu-parent>li.active>a,.sp-megamenu-parent>li.active:hover>a{color:#4e7e5c}.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{background:#FFFFFF}.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a{color:#828282}.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover{color:#4e7e5c}.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a{color:#4e7e5c}.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:#4e7e5c}.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 a:focus,.offcanvas-menu .offcanvas-inner .sp-module ul>li span:hover,.offcanvas-menu .offcanvas-inner .sp-module ul>li span:focus{color:#4e7e5c}.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:#4e7e5c;background-color:#4e7e5c}.btn-primary:hover,.sppb-btn-primary:hover{border-color:#4e7e5c;background-color:#4e7e5c}ul.social-icons>li a:hover{color:#4e7e5c}.layout-boxed .body-innerwrapper{background:#f4f4f4}.sp-module ul>li>a{color:#828282}.sp-module ul>li>a:hover{color:#4e7e5c}.sp-module .latestnews>div>a{color:#828282}.sp-module .latestnews>div>a:hover{color:#4e7e5c}.sp-module .tagscloud .tag-name:hover{background:#4e7e5c}.search .btn-toolbar button{background:#4e7e5c}#sp-footer,#sp-bottom{background:#ffffff;color:#828282}#sp-footer a,#sp-bottom a{color:#828282}#sp-footer a:hover,#sp-footer a:active,#sp-footer a:focus,#sp-bottom a:hover,#sp-bottom a:active,#sp-bottom a:focus{color:#4e7e5c}#sp-bottom .sp-module-content .latestnews>li>a>span{color:#828282}.sp-comingsoon body{background-color:#4e7e5c}.pagination>li>a,.pagination>li>span{color:#828282}.pagination>li>a:hover,.pagination>li>a:focus,.pagination>li>span:hover,.pagination>li>span:focus{color:#828282}.pagination>.active>a,.pagination>.active>span{border-color:#4e7e5c;background-color:#4e7e5c}.pagination>.active>a:hover,.pagination>.active>a:focus,.pagination>.active>span:hover,.pagination>.active>span:focus{border-color:#4e7e5c;background-color:#4e7e5c}.error-code,.coming-soon-number{color:#4e7e5c}

0
10 Answers
JH
Jeff Honeyager
Accepted Answer
2 months ago

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; }

0
JH
Jeff Honeyager
Accepted Answer
2 months ago

Oops - sorry...

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago

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

0
Anne
Anne
Accepted Answer
Support Agent 2 months ago

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

0
JH
Jeff Honeyager
Accepted Answer
2 months ago

Didn't answer the question.

I do not want to have a custom.css

0
Pavel
Pavel
Accepted Answer
2 months ago

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago

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.

0
JH
Jeff Honeyager
Accepted Answer
2 months ago

Thank you.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago

You are welcome

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago

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
0