[Resolved] Why Doesn’t the Advanced “CSS Classes” work on my buttons?

Home Forums Support Why Doesn’t the Advanced “CSS Classes” work on my buttons?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1437150
    Oisin

    Hi there,

    I’m sure I’m missing something obvious, but when I set up a .button class in the customizer and then add the class name to button block no styles are picked up. Is this normal?

    Many thanks

    #1437167
    Elvin
    Customer Support

    Hi Oisin,

    Can you provide us link to your site? So we could check what might be going wrong.

    Perhaps this may be a simple syntaxing issue. # is used for css ID selectors meaning it is used if the html attribute used is id="button.

    If you’re using the class attribute, you must use .button { ... } instead of #button { ... }.

    Let us know if it helps.

    #1437188
    Oisin

    Hi, I’m going to try one or two things and get back to you

    #1437199
    Elvin
    Customer Support

    I’ve checked your site and saw multiple orange buttons (form submit button & WPSP read more buttons) that have different CSS classes.

    Can you specify which ones?

    For the “read more” button, you’ll have to use these CSS selector/s:

    .show-posts-button { ... }

    For the orange submit button, you’ll have to use these CSS selector/s:

    form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit { ... }

    #1437225
    Oisin

    Thanks, I’m ok with using selectors but was wondering why that CSS Class field doesn’t override all other styles. It kind of takes away from the convenience. If I add a button using GenerateBlocks the little advanced field doesn’t seem to work, I still have to use the selectors. Maybe this is normal?

    One other thing, if using the GenerateBlock Grid, how do I make sure the image in the right column disappears leaving only text when the viewer looks at the page on mobile or tablet. Is this easy to implement? Thanks for your help.

    #1437256
    Elvin
    Customer Support

    Thanks, I’m ok with using selectors but was wondering why that CSS Class field doesn’t override all other styles. It kind of takes away from the convenience.

    If you want your class selector’s CSS code to take priority over its sibling class selector, you must add !important to its CSS properties. ex: “background-color: red !important;

    …If I add a button using GenerateBlocks the little advanced field doesn’t seem to work, I still have to use the selectors. Maybe this is normal?

    GenerateBlocks’ Advanced field works. Perhaps you maybe adding the class on the wrong element/container or there’s a css syntaxing issue.

    Here’s a demo on how to use it on buttons.
    https://share.getcloudapp.com/eDuBbDwp

    One other thing, if using the GenerateBlock Grid, how do I make sure the image in the right column disappears leaving only text when the viewer looks at the page on mobile or tablet. Is this easy to implement? Thanks for your help.

    You can try assigning a CSS class name to your right column via Advanced > CSS Classes field and add this CSS code:

    @media (max-width:768px){
    .your-classname {
    display: none;
    }
    }
    #1437807
    Oisin

    Cheers for all the great info. GeneratePress support is amazing.

    I’m not a fan of using !important but thanks for the suggestion.

    I’ll try the CSS you suggested… One last thing.

    The grid columns don’t stack on mobile. The image and text stay side-by-side and look pretty bad. How do I make them stack? Image then text or vice versa.

    There must be a setting I’m not seeing in GenerateBlocks

    #1437912
    David
    Staff
    Customer Support

    Hi there,

    you can set the individual Grid item widths for Tablet and Mobile – by selecting each grid item and changing the settings tab to tablet / mobile. To make them stack set them to 100% width.

    You will also see an Order field on tablet and mobile settings, which will allow you to change the order they are displayed. eg. Left grid item: 2, Right grid item: 1 for Mobile will place the Right Grid item on top.

    #1437935
    Oisin

    Thank you, David. I knew it was something simple.

    #1438003
    David
    Staff
    Customer Support

    You’re welcome.

    As an aside – we’re looking at integration of theme and block styles for buttons. So something for the future to make that easier

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.