Bug with my button styling - I want to make all buttons same style

Site password: MLC

Hi forum,

Please can someone help. On my homepage I have an image carousel with buttons toggled on. The default (and only available option) for the button styling in this block is primary. I want to update the buttons to all have the same style - An underline with no fill BG. This can be seen on my other buttons.

When I update the primary button in my styles, it doesn't update the buttons on the image carousel.

This is a bug that needs to be reported to Squarespace - For now, do you know how I can code the primary button to have the underline, no fill styling, with black text & transparent BG? Same as tertiary?

Many thanks,
George

@GJCDesign If you modify the styling of the Primary button in Site Styles > Buttons > Primary, it should automatically update the button within the Auto Layout (Carousel) section. Ensure that you first style the Primary button, then click 'Apply to all button types,' and finally, save your changes. If this doesn't produce outcome, I can provide a custom code solution.

Hi Lesum,

See the outcome in screenshot and on website link above. I've made the primary button underline with no fill and applied to all button styles. The result is that the primary buttons are now not underlined (?) and the ones under the carousel have white text while the other buttons on the page have black.

This is the bug I was referencing.

@GJCDesign I understand what you're saying. Sometimes when applying a style change, it doesn't affect the site. What I meant to say in my last comment is, please try one more time and click the save button before closing the site styles.

Thanks Lesum, I went through the steps exactly as you suggested and saved, and the buttons are still bugged. See screenshot attached. The primary buttons are not underlined or visible at all. and I have to hover over them to display anything. I also tried swapping the colours for the primary button under the associated color theme and nothing changed.

If someone could please help I'd really appreciate it!

Can you share link to this page? We can check easier.

Thanks tuanphan,

Here it is, it was linked in the original post but can't see it anywhere.

https://primrose-opossum-f4gc.squarespace.com/

Password: MLC

George

Please can someone help! Commenting to bump this back up to the top of the list

@GJCDesign Hi! Add this block of code under Website > Pages > Website Tools > Custom CSS to transform the styling of the tertiary button into the primary button as you mentioned in your post:

#siteWrapper.site-wrapper .sqs-button-element--primary {
  border-width: var(--tertiary-button-stroke) !important;
  border-color: var(--tertiaryButtonBackgroundColor) !important;
  padding: var(--tertiary-button-padding-y) var(--tertiary-button-padding-x) !important;
  color: var(--tertiaryButtonBackgroundColor) !important;
  font-family: var(--tertiary-button-font-font-family) !important;
  font-style: var(--tertiary-button-font-font-style) !important;
  font-weight: var(--tertiary-button-font-font-weight) !important;
  line-height: var(--tertiary-button-font-line-height) !important;
  letter-spacing: var(--tertiary-button-font-letter-spacing) !important;
  text-transform: var(--tertiary-button-font-text-transform) !important;
  transition: .1s background-color linear, .1s color linear;
}

#siteWrapper .sqs-button-element--primary:hover {
  color: var(--tertiaryButtonTextColor) !important;
  background-color:  var(--tertiaryButtonBackgroundColor) !important;
}

@media screen and (min-width: 1512px) {
    #siteWrapper .sqs-button-element--primary {
font-size: calc(~'var(--tertiary-button-font-font-size-value) * 1rem') !important;
    }
}
@media screen and (min-width: 768px), screen and (max-width: calc(1511px)) and (orientation: landscape) {
    #siteWrapper .sqs-button-element--primary {
font-size: calc(~'(var(--tertiary-button-font-font-size-value) - 1) * 1.2vw + 1rem') !important;
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
    #siteWrapper .sqs-button-element--primary {
font-size: calc(~'(var(--tertiary-button-font-font-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem') !important;
    }
}

// button border styling
 #siteWrapper .sqs-button-element--primary {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom-style: solid !important;
    border-radius: 0 !important;
    border-bottom-width: var(--tertiary-button-stroke) !important;
}