How to change a form button colour? (Elemental/Cloneamental)
Permalink
Hi, I'm working on a site based on Cloneamental but I've changed the all fonts and colours etc. so the overall colour scheme is now black/red. Have done this by editing the appropriate .less files which I'm fairly comfortable doing.
BUT I've just added a form, and the submit button is blue by default. How would I go about making it dark red? I can't figure out where the colour comes from, I don't think it is the bootstrap default, it is .btn-primary {background-color: #428bca;} that I need to find and change.
If anyone can point me in the right direction I'd be grateful.
BUT I've just added a form, and the submit button is blue by default. How would I go about making it dark red? I can't figure out where the colour comes from, I don't think it is the bootstrap default, it is .btn-primary {background-color: #428bca;} that I need to find and change.
If anyone can point me in the right direction I'd be grateful.
When you are logged in click on the cog in the upper left, click design, click Customize - you should be able to edit all those colors here.
Are you sure there is an edit option there for form button colours (specifically) in Cloneamental? I can't see it! No options for anything to do with forms or buttons.
OK, I finally found and changed it in cloneamental/css/bootstrap-modified.css, not a very clean solution though
Is there an easier way?
Is there an easier way?
The default bootstrap basic colour scheme is defined in variables.less
You would need to redefine those colours in the main.less (or pulled in from another less file) at some soon after variables.less is pulled in, so that subsequent files see your values rather than the bootstrap default values.
@brand-primary: #428bca; @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f;
You would need to redefine those colours in the main.less (or pulled in from another less file) at some soon after variables.less is pulled in, so that subsequent files see your values rather than the bootstrap default values.
Thanks John - I thought that ought to work but it didn't seem to. I tried adding an extra less file but that did nothing, I then edited those lines in variables.less to my new colours, no change.
Then I looked properly at the original bootstrap-modified.css - it looks like these button colours are hardcoded into bootstrap-modified.css in the line .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}
So am I right in thinking cloneamental is not actually getting the colors from variables.css at all (which I assume it would be in un-modified bootstrap?)
Then I looked properly at the original bootstrap-modified.css - it looks like these button colours are hardcoded into bootstrap-modified.css in the line .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}
So am I right in thinking cloneamental is not actually getting the colors from variables.css at all (which I assume it would be in un-modified bootstrap?)
Correct.
What the theme less does is set up a regular vanilla bootstrap, then introduce new variables at various points in the build process to override the original bootstrap values.
What you need to do is provide your own overrides for those values.
A complication is the whole defaults directory group. They are used by the dashboard defaults and once the dashboard has saved some defaults, the values at the time of the save are pulled in from the dashboard and override anything in the less, so become sticky in the system, irrespective of what you do in the less. (The only way I have found to thoroughly cancel that is to uninstall and reinstall the theme).
What the theme less does is set up a regular vanilla bootstrap, then introduce new variables at various points in the build process to override the original bootstrap values.
What you need to do is provide your own overrides for those values.
A complication is the whole defaults directory group. They are used by the dashboard defaults and once the dashboard has saved some defaults, the values at the time of the save are pulled in from the dashboard and override anything in the less, so become sticky in the system, irrespective of what you do in the less. (The only way I have found to thoroughly cancel that is to uninstall and reinstall the theme).
