How to make button + text on Image Slideshow not transparent

[WVU]

Hi,

I’m looking for someone to help me with the following.
I would like my text + button on the Image Slideshow not to be transparent, please view underneath how this is now:

I want them to be the same as the image below, where they are not transparent (except for the outline button).

Could anyone help me with this? I am using the dawn theme!

Thanks in advance!

[topnewyork]

@WVU
Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[rajweb]

Hey @WVU ,

I can help you with this! To make the text and button on your Image Slideshow not transparent in the Dawn theme, you’ll need to adjust the CSS for the slideshow section. Here’s a quick solution:

1. Go to your Shopify admin panel and navigate to Online Store > Themes > Edit Code.

2. Look for the base.css file under Assets and open it.

3. Add the following CSS code at the bottom of the file:

.slideshow__text {
  background-color: rgba(255, 255, 255, 1); /* Makes the text background fully opaque */
  color: #000; /* Adjust text color as needed */
  padding: 10px; /* Adds spacing around the text */
  border-radius: 4px; /* Optional: rounds the edges of the background */
}

.slideshow__btn {
  background-color: rgba(255, 255, 255, 1); /* Fully opaque button background */
  border: 2px solid #000; /* Optional: Adjust the outline color */
  color: #000; /* Button text color */
}

.slideshow__btn:hover {
  background-color: transparent; /* Keeps the outline button style on hover */
  color: #000; /* Adjust hover text color */
}

This will ensure the text and button are fully visible, with the button retaining an outline style where necessary.

If you need further assistance or want to ensure everything looks exactly how you’d like, please feel free to reach out via email. I’d be happy to help you achieve the best outcome for your store!

Best regards,

Rajat

[WVU]

Thank you so much Rajweb!
This helps immensely.
Would you know how to get rid of this white block as well? So that only the button + text shows?
Also is it possible to have 2 buttons next to each other as well? Just like the pic on the bottom of my reply?

[rajweb]

@WVU ,

To answer your additional questions:

1. Removing the white block (background):

To ensure only the text and button are visible without the background block, you can remove the background and padding for the text container. Here’s how to do that:

• In the same base.css file, adjust the slideshow text background like this:

.slideshow__text {
  background: none; /* Removes the white block background */
  padding: 0; /* Removes the padding */
  color: #000; /* Adjust text color if needed */
}

This should remove the white block behind the text and button.

2. Adding 2 buttons side by side:

Yes, it’s possible to have two buttons next to each other! You can adjust the layout using Flexbox. Here’s how you can do it:

Add this CSS to make the buttons align side by side:

.slideshow__buttons {
  display: flex;
  gap: 15px; /* Adds space between the buttons */
  justify-content: center; /* Centers the buttons horizontally */
}

.slideshow__btn {
  background-color: rgba(255, 255, 255, 1); /* Button background */
  border: 2px solid #000; /* Outline color */
  color: #000; /* Button text color */
  padding: 10px 20px; /* Adjust the button size */
  text-transform: uppercase; /* Optional: Makes the text all caps */
}

.slideshow__btn:hover {
  background-color: transparent; /* Keeps outline effect on hover */
  color: #000; /* Hover text color */
}

You may also need to ensure the HTML structure for the buttons is set up like this:

  Button 1
  Button 2

1. This will display two buttons next to each other, as shown in the example image. You can adjust the padding, colors, or text as needed to match your desired style.

Feel free to experiment with the values to get the exact look you’re going for!

If you need further adjustments or have more questions, don’t hesitate to reach out via email. I’ll be happy to help you achieve the best results for your store!

[WVU]

Thank you Rajweb, you’re awesome!
What do you mean by flexbox? Do I add the second piece of code (for 2nd button) in de Base.css File as well?
To ensure HTML structure is set up like you said, do I therefore use the base.css file as well?

Thanks again!