Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
AnthonyGoble

ISHIMOTO - CENTERING ACTIVE IMAGE + STYLING GALLERY CONTROLS

Question

Posted (edited)

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

Edited by AnthonyGoble
Initial Revision

Fashion and Beauty photographer + Retoucher living in NYC

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
Posted (edited)

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

Edited by MagneM
Initial Revision

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...