make transparent navigation gallery button

Tourist
23 0 1

Hello people,

 

Screenshot_3.png

do you know how to take away the pink colour and make it completely transparent?

 

here's the code in styles.scss.liquid

/*! Flickity v2.0.10
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-prev-next-button{position:absolute;top:50%;width:44px;height:44px;border:none;border-radius:50%;background:#fff;background:hsla(0,0%,100%,.75);cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button:hover{background:#fff}.flickity-prev-next-button:focus{outline:0;box-shadow:0 0 0 5px #09f}.flickity-prev-next-button:active{opacity:.6}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button:disabled{opacity:.3;cursor:auto}.flickity-prev-next-button svg{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-prev-next-button .arrow{fill:#333}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}

.flickity-enabled {
  position: relative;
  overflow: hidden;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  filter: alpha(opacity=50);
  opacity: 0.5;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11%;
  border: none;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  border-radius: 0;
  height: auto;
  max-width: 100px;
  transform: none;
}

.flickity-prev-next-button:hover {
  background: white;
  border: none;
}

.flickity-prev-next-button:focus {
  outline: none;
}

.flickity-prev-next-button:hover, .flickity-prev-next-button:active {
  filter: alpha(opacity=80);
  opacity: 0.8;
}

.flickity-prev-next-button.previous {
  left: -1px;
}
.flickity-prev-next-button.next {
  right: -1px;
}
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: -1px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: -1px;
}

.flickity-prev-next-button:disabled {
  filter: alpha(opacity=10); /* IE8 */
  opacity: 0.1;
  cursor: auto;
}

.flickity-prev-next-button svg {
  @include vertical-alignment;
  position: absolute;
  left: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: {{ settings.arrow_color }};
}

/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
  color: {{ settings.arrow_color }};
  font-size: 26px;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  filter: alpha(opacity=25); /* IE8 */
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  filter: alpha(opacity=100); /* IE8 */
  opacity: 1;
}

/* Custom sliders */
.flickity-slider > li {
  list-style-type: none;
  width: 100%;
  text-align: center;
}

/* General Flickity styling */

img[data-flickity-lazyload] {
  width: auto;
}

.slideshow_animation--fade {
  .flickity-slider {
    transform: none !important;
  }

  .gallery-cell {
    left: 0 !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
  }

  .gallery-cell.is-selected {
    opacity: 1;
    z-index: 0
  }
}

thanks in advance!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
209 16 33

Hi, @archaon1989

 

Thanks for reaching out about that. I took a look at your store, and on my end those already appear as transparent: 

 

20-37-c8hjx-inbh3

 

Would you mind taking a look at your product in a different browser or in an incognito tab to see if you see the issue there as well? Thanks! 

Brie | Social Care @ Shopify

 - Was my reply helpful? Click Like to let me know! 

 - Was your question answered? Mark it as an Accepted Solution
 

To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
23 0 1

Hello Brie,

 

yes, now it works because i reset the code as it was before but now i have this problem:

 

https://community.shopify.com/c/Shopify-Design/button-color-doesn-t-change/m-p/648916#M162148

 

if i do what they told me i'll get the issue i reported here in this post..

 

i want the buttons on the homepage colered in pink

 

Thanks

0 Likes
Highlighted

Hello @archaon1989,

If you want to change the color of arrow then please add below css in your styles.scss file

.transparentBackground--false .flickity-prev-next-button .arrow {
	fill: #ffc6c6 !important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Staff
Shopify Staff
209 16 33

Hi, @archaon1989

 

Okay, I see. Just to clarify - when you change the button colour with your theme settings it then adds the pink boxes to your arrow buttons, but you were hoping to have your button colour be set to pink while still keeping the slideshow arrows transparent?  

Brie | Social Care @ Shopify

 - Was my reply helpful? Click Like to let me know! 

 - Was your question answered? Mark it as an Accepted Solution
 

To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes