Wordpress buttons not inheriting custom CSS class

Question

I am trying to add two buttons in a footer in Wordpress, using the Qode Bridge theme, on the site http://mygapyear.wpengine.com/. The code for the buttons (placed in the footer widget area) is as follows:

<div>
<div style="margin-top:10px">
[button class="newsletterButton"   icon="fa-arrow-right" target="_self" text="Newsletter signup" color="#ffffff" hover_color="#ffffff"]   
</div>
<div style="margin-top:10px">
[button class="newsletterButton" color="#ffffff" hover_color="#ffffff" icon="fa-arrow-right" target="_self" text="Request a Brochure"]
</div>

I have a couple of problems:

The buttons don't seem to be inheriting the class - inspecting them in the browser shows that they're both still in the qbutton class. I've placed CSS code for the class in both the Appearance > Editor section of WP, and the Qode Options > General > Custom CSS section:
```
.qbutton .newsletterButton{ }
```
The "color" and "hover_color" attributes in the button shortcode don't seem to have any effect - is there a way to implement this in CSS to ensure that the colours are changed?
Is there a way to set button width as a percentage of the width of the div containing it?

I can't help with the Qode Bridge button shortcode issue, however the CSS should probably be .qbutton.newsletterButton if they get output into the same class attribute (I only see class=qbutton). To answer question 3, set the a element to display: block so you can apply widths. — Karl Dawson
– Karl Dawson, Commented Jan 21, 2016 at 13:16

Donald · Accepted Answer · 2016-01-21 16:19:38Z

1

Karl is correct about the classes - if you are trying to reference the same element with two classes you want to use .qbutton.newsletterButton { }. If your issue is that you can't get the class you're specifying to be applied, maybe you could try to put the class on the div surrounding the button, like this:

<div style="margin-top:10px" class="newsletterButton">
    [button icon="fa-arrow-right" target="_self" ..etc]
</div>

And use the CSS

.newsletterButton .qbutton { }

You can style things on hover in CSS - try .newsletterButton:hover { }.

You can use percentage widths as well - just use the property width: 50%; (or whatever width you want) in your CSS. Here's a good article from CSS Tricks about percentage widths.

answered Jan 21, 2016 at 16:19

Donald

1,22013 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Wordpress buttons not inheriting custom CSS class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related