ISHIMOTO - CENTERING ACTIVE IMAGE + STYLING GALLERY CONTROLS

hello,

I've been trying a lot of different CSS to center the active image on my slideshow galleries as well as style the control arrows to no avail. Can anyone take a look and tell me what im doing wrong?

My site is :www.processandpost.com

thanks in advance, Anthony

Hi @AnthonyGoble

Create a Gallery Page. In Site Styles set opacity to 50. You'll then see that the active slide is always centered.

CSS to style the arrows in a Gallery Page:

.collection-type-gallery.gallery-controls-arrows .gallery-controls .gallery-next, .collection-type-gallery.gallery-controls-arrows .gallery-controls .gallery-prev
{   
              font-size: 35px;
              font-weight: 700;
              color: red;
              background: none;
              padding: 0.2em;
}

Magne

@MagneM

Thank you so much for this swift response. It worked perfectly- though I would also like to change the hover state along with it. Can you send me the code to remove the background from the hover state from the arrows and replace it with a 'bold' style on hover? Thank you in advance!

best,Anthony

Hi @AnthonyGoble

I've made some changes to the example code above:

.collection-type-gallery.gallery-controls-arrows .gallery-controls .gallery-next, .collection-type-gallery.gallery-controls-arrows .gallery-controls .gallery-prev
 {   
               font-size: 35px;
               font-weight: 400;
               color: red;
               background: none !important;
               padding: 0.2em;
&:hover {
               font-weight: 700;
}
}

Magne

@MagneM

Thanks so much again for your swift and thorough help. Lastly, I'd like to have the arrows sit further away from the sides of the page, and be more centered between the image and the sides.

In regards to centering my active image, I think the CSS code I used to add space between my images (padding) is stopping me from being able to center itIf you have a solution to this It would be much appreciated. You've been a huge help.

-Anthony

Hi @AnthonyGoble

.collection-type-gallery {
               border-left: 100px solid;
               border-right: 100px solid;
               border-color: white;
}

.slide {
               border-left: 20px solid;
               border-right: 20px solid;
               border-color: white;
}   

.slide:first-child {
               border-left: none;
} 

.slide:last-child {
               border-right: none;
}  

.collection-type-gallery.gallery-controls-arrows .gallery-controls .gallery-next {
               margin-right: 0.7em;
               position: fixed;
} 

.collection-type-gallery.gallery-controls-arrows .gallery-controls .gallery-prev
     {                 
               margin-left: 0.7em;
               position: fixed;
}

Magne :)

@MagneM

this is exactly what I needed. Thank you very much!

-Anthony