Jump to content

ISHIMOTO - CENTERING ACTIVE IMAGE + STYLING GALLERY CONTROLS

Recommended Posts

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

Fashion and Beauty photographer + Retoucher living in NYC

Link to comment
  • Replies 6
  • Created
  • Last Reply

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

Link to comment

@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

Fashion and Beauty photographer + Retoucher living in NYC

Link to comment

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

Link to comment

@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

Fashion and Beauty photographer + Retoucher living in NYC

Link to comment

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 :)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.