Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GB Button Colors

  • HI,

    How can I set colors for a button global style? Colors are not saved when creating the style, and can’t be set when editing it either.

    Thanks,
    Paul.

  • CSS for the global style shows accent and accent-2 saved but they aren’t reflected either in the editor or front-end.

    .ssne-btn-primary {
        background-color: var(--accent);
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        color: #ffffff;
        display: inline-flex;
        font-size: 16px;
        font-weight: 500;
        padding: 13px 30px
    }
    
    .ssne-btn-primary:hover {
        background-color: var(--accent-2);
        color: #ffffff
    }
  • Hi there,

    Can I see a button with global style on the site?

  • Hi Ying,

    Site is here – https://gp.style960.com/

    CSS has been regenerated, and cache purged. I know this is a long standing issue with GB but I thought a fix would have been applied. Why can’t button colors be changed in the editor if needed?

    Thanks,
    Paul.

  • Hi there,

    Make sure to remove the local block style: https://cln.sh/VvDtXc3T.

  • Hi, same “issue” here (—> https://lightup.davidecrivelli.com/98-2/ GB PRO 2.0 rc1) … but I guess we’re doing the whole button styling wrong.
    When you create a new button, it comes with a standard style (assigned to the block (screenshot at the end of the message). You assign the global style to the button, then you delete the block style of it and it works.

    Not sure if this is the standard procedure, Ying can tell us more I guess 😉

    Screenshot:

    (edit: or like David says, –> https://generate.support/topic/generateblocks-correct-button-styling-and-creation-workflow/#post-150801 this could be also a good way).

    Davide

  • Regenerating GB CSS and clearing the local block styles worked for me. What I now can’t figure out is how to set the link colour for an identical button when I add it to the after slideout navigation hook. I can force it with custom css + !important but the same button added to the after navigation hook keeps the link colour as set in the global style.

  • Or how size that button to fill the slideout navigation. Setting flex-grow to 1 or changing the button width to 100% have no effect.

  • Your site isn’t loading anything, I can not see the button.

    Can you show me the button in slideout nav?

  • Hi Ying,

    URL is the same – https://gp.style960.com/

    Button is using the after slideout navigation hook.

    Thanks,
    Paul.

  • The link color for the button is inherited from the navigation menu link color. Try removing the Header Link color under Customize > Colors and set the Link color in the Body section instead.

  • Thanks for the reply Alvin but that isn’t a fix here – link body color for the whole site needs to be the accent color which is a dark blue (button uses accent for the background).

  • I don’t think there’s away other than using CSS:

    .slideout-navigation a.gb-button {
        color: #ffffff;
    }
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.