[Resolved] The button in the view does not match the result shown

[Author]

Posts

[michelL]

I use the view [huisje-huren-top 3-2 personen op-homepage] and changed the button style (borders and color) but it doesn't match the result on the home page.

See picture attached.

What am I doing wrong?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I couldn't find any picture attached to your message. Can you please share the picture of the buttons and the temporary admin login details?

This will allow me to suggest the next steps accordingly.

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

I see that the first 'Bekijk het huisje' button is added using the Toolset's 'Button' block, while the second one below is added using the Stackable's 'Button' block.

To make this button look similar to the one from the Toolset, you can remove the background color from this block's settings, adjust the text color and include some border.
( screenshot: hidden link )

For the most accurate and updated information about Stackable's block styles, you can consult its official documentation and support.

[michelL]

Hi Waqar,

I changed the button color (as above) to white and the text color to purple but on the homepage it's stays light blue

[Waqar]

Thanks for writing back.

I'm not sure exactly why the Stackable's button blocks styles are not getting applied correctly and you can consult their official support team to troubleshoot this.

As a workaround, I've added the following changes to make that button show in an border outline style:

1. In the 'Button Group' block's settings, I've included a custom class 'custom-outline-button':
( screenshot: hidden link )

2. And in the section, WP Admin -> Appearance -> Customize -> Extra CSS, I've included this CSS code:

.custom-outline-button a.stk-button {
    background: none !important;
    color: var(--ast-global-color-0);
    border: 2px solid var(--ast-global-color-0) !important;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}

.custom-outline-button a.stk-button span {
    color: var(--ast-global-color-0) !important;
}

You can include this new CSS class in any 'Button Group' block's settings on the website, to make it appear in the border outline style.

[michelL]

My issue is resolved now. Thank you!