AnthonyGoble Posted August 27, 2019 Share Posted August 27, 2019 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
MagneM Posted August 27, 2019 Share Posted August 27, 2019 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
AnthonyGoble Posted August 28, 2019 Author Share Posted August 28, 2019 @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
MagneM Posted August 28, 2019 Share Posted August 28, 2019 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
AnthonyGoble Posted August 28, 2019 Author Share Posted August 28, 2019 @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
MagneM Posted August 28, 2019 Share Posted August 28, 2019 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
AnthonyGoble Posted August 29, 2019 Author Share Posted August 29, 2019 @MagneM this is exactly what I needed. Thank you very much! -Anthony Fashion and Beauty photographer + Retoucher living in NYC Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.