-
Posts
-
Do you have an example of the coding you use to custom style a button and override the global styles? The documentation says style=””. I am guessing you set a hex color and a hover color. How about changing the text color? Any thoughts?
Hey Matt,
If you haven’t gotten to this section yet, you can alter the appearance of your buttons very easily via the Customizer. If you’re needing to do something custom on top of that to a particular button or set of buttons, you would just need to enter in something like the following:
[button style="background-color: red; color: white;"] ... [/button]
The color attribute is the attribute that will change your text color. However, I wouldn’t recommend doing inline button styles for a couple reasons.
- Unless you’re creating a very unique button for a particular purpose, inline styles are inefficient as you’ll have to copy and paste every time you want to use them.
- As you stated, you’ll need to style hover states as well, which isn’t possible via inline CSS.
Personally, I’d give your button a class, like so:
[button class="btn-unique"] ... [/button]
Then I’d style it via a child theme. If you’re not making a lot of CSS updates, you can use the Custom section of the Customizer using the CSS field. You can place as much CSS as you want in here, but it’s really better for quick fixes. If you’re managing a lot of CSS, it’s usually better to put it in a child theme.
You can use our child themes that we have developed specifically with X by downloading them here. Be sure to unzip the file, and upload the child theme that corresponds to the Stack that you’re using. Once you’ve done that, simply add in your custom button styles into the style.css file like so:
.x-btn.btn-unique { ...standard styles... } .x-btn.btn-unique:hover, .x-btn.btn-unique:focus { ...hover and focus styles... }Or you can split out your hover and focus styles if you want. Hopefully this helps you out with custom button styling. If you have any further questions or if I happened to not address something that you need further clarification on, please don’t hesitate to let us know!
Thanks!
- <script> jQuery(function($){ $("#no-reply-1631 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
