Weird Button Styling Issue | Canard Theme

  • Unknown's avatar
    dylanmaustin · Member ·

    Hi there!

    So across my site, all links and buttons are #5E17EB with white text. This appears everywhere from forms to “read more” buttons.

    For some reason, the only instance where this isn’t the case is the “Load More Posts” button on my Latest Posts page. As you can see here, it’s using the theme’s default color, but nowhere in the settings is this still set to red.

    I put a newsletter block there to demonstrate what should be happening on the same page:

    I tried doing some CSS code to modify the color and padding and whatnot, but even with an !important; override attempt, the most I could do was change the padding and font size. Color never changed, and when resizing the page to tablet/mobile screen sizes, the button got even larger than with my modifications.

    Can someone please help with this? Is there a setting I’m just not seeing for the Posts block? Is there CSS that can help? Or is there a way I can manually turn this off and add a different way to load more posts?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    dylanmaustin · Member ·

    It won’t let me edit my original post, but I should add that in the Builder, the opposite is true. The default color appears everywhere (red) EXCEPT the load more posts button…

  • machellie · Staff ·

    Hi there, @dylanmaustin!

    Thanks for reaching out. It seems this issue is happening only with the Blog Posts Block, which is using the theme’s default colors.

    To change this, we will want to add a bit of custom CSS. You will want to add the following CSS to My Site → Appearance → Additional CSS:

    /*change color of load more block and reduce padding - Blog Posts Block (MC)*/
.wpnbha.has-more-button button {
    background-color: #5E17EB;
    border: none;
    padding: 15px;
}

    Let me know if this works for you! Looking forward to hearing from you!

  • Unknown's avatar
    dylanmaustin · Member ·

    Amazing! I added this to adjust the font size as well:

    font-size: 14px;

    Out of curiosity, you mentioned that the Blog Posts Block is using the theme’s default colors. Is this something I caused or can change in the background or is it just a bug?

    Thank you.

  • aleone89 · Staff ·

    Hey there,

    I wouldn’t say this is a bug, and is something you can change.

    It can be changed using the Site styles as seen here: https://en.support.wordpress.com/using-styles/

    This can be done via the editor via Appearance > Site Editor.

    I hope this helps.

  • Unknown's avatar
    dylanmaustin · Member ·

    Hey there,

    That’s not it. Changing colors was one of the first things I did for this site. There are no options anywhere that are unspecified or set to red or a generic default color.

    Obviously my issue now is fixed, was just curious for if I find any rogue colors in the future.

  • Unknown's avatar
    geekinthegirl · Member ·

    Hi there!

    No problem, thanks for clarifying – this isn’t a bug, it’s the normal behaviour of your content blocks like the Blog Posts block to use your site Styles, unless it’s overridden by custom CSS like the snippet shared above.

    You shouldn’t see any rogue colour changes from here, but if you do notice anything else that does look out of place, don’t hesitate to let us know!

  • The topic ‘Weird Button Styling Issue | Canard Theme’ is closed to new replies.