Hi, I’m trying to set a default style for all buttons in my Genesis child theme so that buttons created in BB are using the styles in my css. But, I can’t target them without using !important… but them I’m unable to customize certain buttons using the BB custom options.
You can see here: http://clients.moderntraction.com/laureleastman/
I want all buttons backgrounds to be red with white text. Except in the header Content Slider, I want the button bg to be black.
How can I do this?
Hey Melanie,
Try using these CSS snippets and see if they work, after removing the ones with the !important in place.
/*Change default button background color*/
.fl-builder-content .fl-node-content a.fl-button {
background: orange;
}
/*Change default button text color*/
.fl-builder-content .fl-node-content a.fl-button span {
color: green;
}
Let me know how it goes!
Ben
It affects the text colour, but not the background or the icon.
My css looks like this:
.fl-builder-content .fl-node-content a.fl-button span, .fl-builder-content .fl-button i.fl-button-icon-after {
color: #fff;
}
Hey Melanie,
Sorry but the site has a lot of custom buttons so I’m a bit lost as to where these default buttons are. Do you mind showing me where they should be and what colors they should be in so I can test the CSS?
Ben
Hey Melanie,
That really helps a lot! Try using these snippets this time.
/*Change default BB button font and icon color*/
.fl-builder-content .fl-node-content a.fl-button span, .fl-builder-content .fl-node-content a.fl-button i {
color: #FFF;
}
/*Change default BB button background*/
.fl-builder-content .fl-node-content.fl-module-content a.fl-button {
background: green;
}
Ben
Thanks so much! Works perfectly!
Is there a way for me to know how to target elements for future customizations?
Hey Melanie,
No worries! Based from your CSS, you are able to target the correct elements, just not enough specificity and as a result, was overridden by the default CSS. One of our community members, Leo, was generous enough to provide a quick explanation about CSS Specificity here. You can also check this site for more in-depth explanation.
Hope this helps!
Ben
Hi, I’m now trying to use this code on a site where I’m using a child theme and I can’t get it to work.
See here http://clients.moderntraction.com/getsarah/ Under the Proven Results section, that button ‘Yes, I want to apply!’ is not styled and should be showing in purple, but is not.
Hey Mel,
I’m seeing the button as purple with a darker purple hover applied. Here’s a screenshot. Is it not that way on your end?
Best,
Billy
Great looking site BTW! 
No, not in that section, under Proven Results. It’s blue.
Thanks
Gotcha, I see it now. Interesting! Would you mind shooting over temp admin access so I can have a look around?
Best,
Billy
[Content Hidden]
[Content Hidden]
Yes I know. I set the colours in the builder so the client would see them. I just want it set to be purple by default using the style in my child theme.
The only button that was set to default was the one in the Proven Results section, so that I can test if it’s picking up the styles from my css. But it isn’t.
I want to figure this out for future website as well.
Hey Melanie,
Is this the CSS you added on your child theme? I don’t think it’s being picked up since there is a weird A character before the background property.
http://imgur.com/1llTkHm
Also, you’re missing one class to make it stronger. It should be like this.
/*Change default BB button background*/
.fl-builder-content .fl-node-content.fl-module-content a.fl-button {
background: #FFF;
}
.fl-builder-content .fl-node-content.fl-module-content a.fl-button:hover {
background: #CCC;
}
Hope this helps!
Ben
Oh weird! This wasn’t showing in my css editor nor in Google Inspector! Not sure how you found it, but I delete the spacing before just to clear it and now it works!
This was likely due to copying over the code from my Evernote.
Thanks!
Hey Melanie,
Yep, that was most likely the case. I simply visited the style.css file of your site from my browser so I’m guessing it supports special characters. Just a piece of advice, I usually paste anything to a notepad first before pasting it to anywhere. It gets rid of those invisible characters. Have fun with The Beaver!
Ben