Generally my buttons are transparent with a border (#292929) and dark text (#292929) and the hover color is #292929 with white text.
Sections with images, such as the hero section, where the button is on top of the image, the button should be dark with a dark border (#292929) with white text; the hover color should be white with #292929 text. You can see what it looks like in the July’23 version of the theme.
It seems that the CSS specificity rule is causing this issue. The style body .page-container .main-content .btn, with its ID selector, has higher specificity compared to .slideshow__slide–0cb77fe3-f5ea-4ceb-9bdb-58f4a0344b9f .btn, and therefore, it takes precedence. To fix this, update the original style in body .page-container .main-content .btn from ‘transparent’ to ‘#ffffff’. The style applied in your section, as it stands, can’t override this due to CSS specificity rules.
Thanks @sizzlecommerce thanks for looking into this.
Changing the main content button to white turns all buttons white, which isn’t what I want. I only want the buttons on top of images to be white, the rest should be transparent…
Is there no other solution?
Apologies, I misunderstood. Yes it’s is possible, you just need to add CSS that has higher specificty for the slideshow. See my screenshot. An example of the css would be:
body .page-container .main-content .slideshow-wrapper .btn {
background-color: #ffffff !important;
}
Because I added the .slideshow-wrapper class, I made the CSS more specific. Ideally you arrange the CSS to not be using importants or update the section with Button color settings so you have more control, but this should initially get you what you need in the short term.
I figured out I can add the CSS below to every individual slide where I don’t want it to apply but I would love to have it configured in the theme.liquid so I don’t have to do this manually…
In the future, if you want to use specific CSS for each slide, each slide in that slideshow section has a unique class, as you can see in the screenshot. If you use that unique class in have a higher specificity, that is also another approach.
Hi @saraki . You would need to use inspect element on your browser to see the IDs of any element. If you are not familiar with how to use inspect element, there are probably some videos on YouTube you can watch. Otherwise if that feels a bit too advanced, I would recommend finding a developer to build in settings into your sections so that you can control the button colors within settings rather that writing custom css.
