Awaiting an answer Templates

changing css in custom.cc

Asked by Martin Seidl 3 years ago Last activity 3 years ago

Hi Team,
I use shaper salon/helix ultimate template.

  1. I created custom.css but this alone does not work, I needed to embed code inside template options > custom.css (which is not good if u have lots of code)
  2. I want to change all the addon title into another font family style. I disabeled google fonts via USA Server and installed all fonts localy. It seems to work and I wrote into custom style thing like

body, p, h1,h2,h3,h4 {font-family: 'Raleway';}

but they dont work with such addon titles...I dont want to create code for each title especially but want to do it in custom.css
see http://j4.foto-wrba.de/kontakt.html
whats going wrong?

4 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
3 years ago

Hi,

Thanks for contacting us. It seems getting priority from addon settings.

However, you may try this with important:

.sppb-addon-title{
    font-family: "Raleway" !important;
}

Best Regards

Martin Seidl Asked this
3 years ago

thnx Rashida, worked!
but what to do if I want to use custom.css in template code instead template options? Just creating custom.css in the css folder does not work!

Pavel
3 years ago · edited

Hi Martin. If you allow...

I don't think that the use of this code is advisable.

.sppb-addon-title{
    font-family: "Raleway" !important;
}

Each unnecessary code is garbage which worsens performance.

As Rashida noted correctly - it getting priority from addon settings. But instead of using additional code, you just need to delete font-family setting in the addon. (Tip - never use font-family settings in addons, this connects an additional font to your site, which is bad for performance)

If you want to connect the same font to all elements on the site, this record works, but it does not make sense

body, p, h1,h2,h3,h4 {font-family: 'Raleway';}

Better use such a record that is quite enough.

body  {font-family: 'Raleway', sans-serif;}

Always add sans-serif or serif . This uploads a font without serif or with serif from the user system if for some reason the font of the site does not load. This will make your site looking normally in an emergency with a font.

And yes, if you will use custom.css file it should works. If it does not work, then the reason is in the code that you use. The browser code inspector will always help find the reason

Pavel
3 years ago · edited

Also, the reason that the code does not work in custom.css can be in "priority".

List of code priority in importance

  1. Helix Custom Css field and tipography settings
  2. SPPB addon settings
  3. Third-party modules
  4. custom.css
  5. all other css files

If you are sure of the correctness of the code that you added to custom.css file, use !important after property value or delete the settings of 1; 2; 3;

And don't forget about cache cleaning after adding code to custom.css (CTRL + F5 or deeper in browser settings)

Log in to reply.