How to remove or make slideshow button borders transparent on Dawn theme 10.0?

Store Design
, , ,
1

Hey everyone!

I have a Slideshow for the Women’s & Men’s section (Dawn Theme 10.0) & I want to delete the border of the buttons or make them transparent. I already made the color of the button transparent, with the aim of having only the writing stand alone. Can I change this in the css of just this section? I have already set “border: none” but doesn’t seem to work.

Here’s the sections custom css code:

.button {
background-color: transparent;
border: none;
color: #fff;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 80px;
transition-duration: 0.4s;
cursor: pointer;
text-shadow: -4px -1px 1px #f78d1d;
}
.button:hover {
color: #f78d1d;
text-shadow: -4px -1px 1px #fff;
}

Thank you for your help!

1 Like
2

Hey @bootik54
Kindly share your Store URL and Password if enabled

3

Hello @bootik54

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

4

How can I share the link to an unpublished theme?

the one I sent before doesn’t show the site Im working on

5

To share the preview link of a theme which is not been published yet,

Follow these Steps:

  1. Go to Online Store
  2. Choose the theme
  3. Click on 3 Horizontal dots
  4. Click on Preview
  5. In the bottom, you will see a button called Share Preview
  6. Copy the link and send it here

Also make sure if you have password enabled, then please share the password as well

6

Thank you! Here’s the link:

https://ak622r1jv3f4ucd5-60672934051.shopifypreview.com

7

Hey @bootik54

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Moeed_0-1686639225349.png
Moeed_0-1686639225349.png677×314 298 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
8

Thank you for the quick solution! When I hover above it the border still appears in black, any way I can get rid of it completely?

9

Hi @bootik54 ,

Thank you for the information.

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.css, styles.css or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden button {
    border: none;
}
10

Hi @bootik54

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.button:not([disabled]):hover:after {
       box-shadow: unset !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

1 Like
11

This solved the rest of my problem. Thank you very much!

1 Like
12

I’m so glad that my suggestion can help :slightly_smiling_face: