Edit debut theme slideshow button to get a slick carousel button

Solved
Anonymous
Not applicable
1806 0 0

Hi, currently my slideshow button is dark, instead I'd like it to be transparent with dots for maneuvering as opposed to arrows. I'm using the dark debut theme. Are there any code edits I could make?

CurrentCurrentDesiredDesired

ThomasBorowski
Shopify Expert
540 24 124

This is an accepted solution.

The following tutorial assumes your're using Debut 11.2.0 or that the relevant code in the version of your theme you're using is the same or at least similar.

 

Please be sure to make a backup of your theme before you make any changes to the code!

 

Open up the theme code editor (Online Store -> Themes -> Actions -> Edit code) and open the file Assets/theme.scss.liquid. On or around line no. 5239 there will be this code:

.slideshow__arrows {
  background-color: rgba($color-slideshow-controls-background, 0.4);

And a couple of lines below that, this:

  .slideshow__controls:hover &,
  .slideshow__controls:focus &,
  .slideshow__controls--hover & {
    @include media-query($medium-up) {
      background-color: rgba($color-slideshow-controls-background, 0.75);
    }

Change the values 0.4 and 0.75 to 0. That will make the background of the slideshow controls transparent.

 

★ Dedicated EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★
svarog
New Member
1 0 0

Hi ThomasBorowski, thanks for helping the community. I changed the code according to your advice but it seems to affect only desktop version. Would you mind explaining how to change it also on mobile version please? 

0 Likes
ThomasBorowski
Shopify Expert
540 24 124

The slideshow arrow container is already set to have a transparent background on mobile, so I'm not really sure why it's showing as white... sorry :(

★ Dedicated EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★
0 Likes
thinesh
New Member
1 0 1

Hi I am having the same issue, I tried your code ans it seems to be working but, what exactly I need just the dots on the slideshow itself without the arrows and the pause button. Is it possible?

Skoory
Pathfinder
115 1 44

Hi thinesh,

Did you find a solution for your question, please let me know. Thanks!


@thinesh wrote:

Hi I am having the same issue, I tried your code ans it seems to be working but, what exactly I need just the dots on the slideshow itself without the arrows and the pause button. Is it possible?


 

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
0 Likes
jackline28
Tourist
6 0 1

I have the same problem.
Can anyone help me. 

0 Likes
jackline28
Tourist
6 0 1

did you solve this problem? :(

Skoory
Pathfinder
115 1 44

Yes, but now I have another small problem. The solution works fine with Firefox but with Chrome there appears a light blue frame around the pause/reload button. It's not too bad but we'd rather we didn't have this shape of random colour appearing in the slide images - if possible. Can someone who knows please help?

 

The solution to lose the arrows and the dark rectangular shape that appears when hovering over the slider navigation is this (applies to 2018 version of Debut):

 

Add to the end of theme.scss.liquid -

 

.slideshow__arrows {
background: transparent;
}
.slideshow__arrow.slideshow__arrow-left, .slideshow__arrow.slideshow__arrow-right {
display: none;
}
 
.slideshow__controls:hover .slideshow__arrows, .slideshow__controls:focus .slideshow__arrows, .slideshow__controls--hover .slideshow__arrows {
background: transparent;
}

 

 

 

 

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
0 Likes
jackline28
Tourist
6 0 1
Please help me!!!
How did you solve the first problem?
I want the banner of the slaider to be transparent also on the mobile! But I succeed only on the desktop:(
0 Likes