How To Change 'Primary' And 'Secondary' Colour Preset
Scott Fletcher
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,
Paul Frankowski
Accepted AnswerHi 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
Accepted AnswerHi 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,
Paul Frankowski
Accepted AnswerIf 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
Accepted Answerbut If we talk about colors in general: In Helix Template Options > Basic > Presets
(more info in Helix guide)
Paul Frankowski
Accepted AnswerIn 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
Accepted AnswerThats 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
Accepted Answerfrom settings - not today, from Custom CSS in 90sec.
I also have to wait for new features and improvements, believe me.
Scott Fletcher
Accepted AnswerHi, 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
Accepted AnswerAs I know developers should consider changes in that area, but I am not in the same "room" with them to have strong voice.