Change Button Color
This support request was posted in Flatbase by mikhail
- mikhail September 25, 2015 at 10:06 pm
Hi,
I have went through the documentation and the support blog but cant find the answer to my question.
I would like to change the colors of the buttons on my site from grey to blue. I cant find the options anywhere.
Some screen shots:
http://www.evernote.com/shard/s279/sh/1f1a4f0d-477d-468c-bf47-b546d6921947/9c69f5879d045f27559defeeee511a0dJuanfra Aldasoro September 26, 2015 at 2:30 pmHi,
Thank you for writing. Unfortunately there’s no option within the theme options to change the color of the button.
At this moment, the only way to change that would be adding some custom css to the button element:
button { background: blue; color: white; }You can learn more about custom CSS here: http://nicethemes.com/support/theme-docs/flatbase/#custom-css
Best,
Juan.mikhail September 26, 2015 at 3:38 pmJuan,
That only works for the sidebar widget buttons, what about the post comment button and the button at the bottom of ever page? that is still grey
Juanfra Aldasoro September 27, 2015 at 2:31 pmHi,
Thank you for the follow up. All the classes for the different buttons are:
.button-primary, .button-blue, .button-secondary, .header .nav li.current-page a, .header .nav-callout, .cta-button, input[type="submit"], button, #commentform .button, #respond input[type="submit"], .nice-contact-form input[type="submit"], .blog-masonry #posts-ajax-loader-button { background: blue; color: white; }Best,
Juan.mikhail September 27, 2015 at 6:46 pmJuan,
That worked well for most of the buttons. But, it did not work in 2 instances.
1.) sidebar widget- here is the code that i used and screenshot:
Submit a TicketIt should be the same blue as the post comment button with white text.
2.) Call to Action button at the bottom of every page – it did not change with your code. Here is the code that I used in the custom css section:
“.button-primary, .button-blue, .button-secondary, .header .nav li.current-page a, .header .nav-callout, .cta-button, input[type=”submit”], button, #commentform .button, #respond input[type=”submit”], .nice-contact-form input[type=”submit”], .blog-masonry #posts-ajax-loader-button {
background: #092f57;
color: white;
}”mikhail September 27, 2015 at 6:48 pmThe widget code did not come out properly so here is a screenshot:
Juanfra Aldasoro September 28, 2015 at 2:24 pmHello,
Thank you for the follow up. That’s because certain rules apply to classes that have different hierarchies. For your code to get working on all buttons, apply the “!important;” value for both values.
.button-primary, .button-blue, .button-secondary, .header .nav li.current-page a, .header .nav-callout, .cta-button, input[type="submit"], button, #commentform .button, #respond input[type="submit"], .nice-contact-form input[type="submit"], .blog-masonry #posts-ajax-loader-button { background: #092f57 !important; color: white !important; }Best,
Juan.mikhail September 28, 2015 at 2:35 pmThanks Juan, we are getting closer!
There are still 2 small bugs.
1.) the sidebar button still has grey text for some reason
http://www.evernote.com/shard/s279/sh/5ef6e19e-6b5e-4180-aaea-ff757d035345/1e41376541bef76e36cfcc798f5ad27f2.) The hover effect went away
Juanfra Aldasoro September 28, 2015 at 2:49 pmNo problem.
1) Well, that’s because you are using an ‘a’ tag inside the ‘button’.
Something like this will do the trick:
button a { color: white !important; }2) The hover effect is only applied on forms like the comments form.
Best,
Juan.mikhail September 28, 2015 at 2:56 pm1) I couldnt figure out where to place your code, here is what it is currently:
http://www.evernote.com/shard/s279/sh/05e3c938-04a7-4431-bcc7-581bbfeb4efa/1f2e0891bef0a325a575b3152eacdb922) There used to be a hover effect, but with the custom code it took it away
Juanfra Aldasoro September 28, 2015 at 8:52 pmHello,
1) That code is CSS. We’ve a section of the documentation where we explain where to put custom CSS: http://nicethemes.com/support/theme-docs/flatbase/#custom-css
The code that you are using for that text widget is bad formatted, you are not closing the button, and you are using the a tag before the button tag.
If you’re gonna do it that way, then the CSS should be:
a button { color: white !important; }2) The hover effect was seen before because it uses the “Accent color”. In your case, the accent color is the same color that you are using to paint the background of your buttons. Check http://demo.nicethemes.com/flatbase/contact/ and see that the hover effect uses the accent color. There is no way to change that.
Best,
Juan.mikhail September 28, 2015 at 9:03 pm1) what is the code I need to put to make a button in the sidebar widget to link here? with the color specifications ? Your code does not have a link
2) got it thanks
Juanfra Aldasoro September 28, 2015 at 9:30 pm1) I don’t understand your question. I’ve shared a piece of CSS with you in order to put it in the “Custom CSS” field as explained in the link I shared with you: http://nicethemes.com/support/theme-docs/flatbase/#custom-css
What I was trying to say with the markup problem is that you are not closing the button tag, you can read more about the button tag here: http://www.w3schools.com/tags/tag_button.asp (that is an HTML tutorial, it is not related to the theme nor WordPress).
I base my comment in the code I’ve seen in the screenshot you’ve shared with me: https://www.evernote.com/shard/s279/sh/05e3c938-04a7-4431-bcc7-581bbfeb4efa/1f2e0891bef0a325a575b3152eacdb92
2) No problem.
Best,
Juan.
You must be logged in to reply to this topic.