Solved SP Page Builder

How To Change 'Primary' and 'Secondary' Colour Preset

Asked by Scott Fletcher 1 year ago Last activity 1 year ago

Hi,

I am developing a new site, which has been copied from a previous site I was using. I am using the UI callout element, which is currently blue and black (those must be the defined Primary and Secondary colours). I am looking to change the blue in this case to green, but cannot find anywhere that defines these 'Primary' and 'Secondary' colours.

I am thinking this is done in Helix Ultimate Framework but have been unable to find the exact location these colours are set. If needed I can show an example of the UI Callout that currently has the theme set to 'Primary', and how it is currently blue, instead of the green I want to have.

Thanks in advance,

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

1 year ago · edited

Hi Scott,

Those two preset colors you have to override using Custom CSS or using Presets.
In Bootstrap used in Helix works the same.

Scott Fletcher Asked this

1 year ago

Hi Paul,

Apologies for the late reply,

I cannot seem to find where I would change these colours. I understand I can override these colours using CSS but it would just be easier to change it from what I assume is the template side. These colours have definitely been set by us.

Thanks,

6 more replies

Paul Frankowski Senior Staff

1 year ago · edited

If we talk about Buttons only, for example, use those classes:

.btn-primary,  .sppb-btn-primary 
{ border-color: NEW; background-color: NEW;  }

.btn-primary:hover, .sppb-btn-primary:hover 
{border-color: NEW; background-color: NEW; }


.btn-secondary, .sppb-btn-secondary { border-color: NEW; background-color: NEW;  }
.btn-secondary:hover, .sppb-btn-secondary:hover  
{ border-color: NEW; background-color: NEW; }

Paul Frankowski Senior Staff

1 year ago · edited

but If we talk about colors in general: In Helix Template Options > Basic > Presets

(more info in Helix guide)

Paul Frankowski Senior Staff

1 year ago

In theory yes, but it's how it's now :/ it's only 3 min more of work.

In SPPB you can set your own color scheme, but it doesn't work for primary and secondary buttons.

Scott Fletcher Asked this

1 year ago · edited

Thats disappointing,

It seems like such a logical feature to have? So now for every UI component we are going to have to manually override the colours using CSS?

That does not seem optimal in my opinion, it will take ages to override all the components using the primary / secondary colours with CSS, as opposed to changing one setting which would have fixed the issue otherwise...

Is there absolutely no way I can just change the template options directly?

Thanks

Paul Frankowski Senior Staff

1 year ago · edited

from settings - not today, from Custom CSS in 90sec.

I also have to wait for new features and improvements, believe me.

Scott Fletcher Asked this

1 year ago · edited

Hi, I have sorted it using CSS,

I notice that you mention 'I also have to wait for new features and improvements, believe me' - but I am sure this was already a feature before though, so I am not quite sure what you mean by this. I just wanted to know where these colours are set so I can then change the hex codes to match our colour theme.

Is this potentially no longer a feature? I will continue to look into this as I want to change these, otherwise every element will need to be overridden with CSS, as opposed to just being able to set what these 'Primary' and 'Secondary' colours are, but it may be this is no longer possible.

Thanks

Paul Frankowski Senior Staff

1 year ago

As I know developers should consider changes in that area, but I am not in the same "room" with them to have strong voice.

Scott Fletcher Asked this

1 year ago

Hi Paul,

Yes that is fair enough, I have used CSS and sorted the new colour scheme through it like you said,

Thanks for your help,

In the docs