Jetpack Carousel CSS Border

  • Resolved Capt_Zeanie

    (@capt_zeanie)


    8 years, 11 months ago

    Hi,

    I am trying to add a border to the photos in the jetpack carousel.

    I currently use this CSS code to put borders around my images in post/pages/gallery. See page link at bottom of this post to see what the borders look like.

    background: #23527C;
	margin: 10px;
	padding: 3px;
	border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
	border: 5px solid #000000;

    Now when I am in my default WordPress galley I can see the images with the borders, then once I click the image to open up the jetpack carousel the images are show borderless. Most of my pictures are dark in nature so without the border you can not easily see the photo edges etc.

    Where and how can I add the above CSS to get borders in the jetpack carousel

    https://www.arrowsmith.biz/media/investigationfiles/2015-10-27-mi-drakelow-tunnels/

    Thanks

    https://www.ads-software.com/plugins/jetpack/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    I had a look at your site, and you seem to be using a different plugin right now, “Easy Fancybox”. If you want to give Carousel another try, and change the look of the images in the Carousel view, you can use the following CSS:

    .jp-carousel-wrap .jp-carousel-slide img {
	margin: 10px;
	padding: 3px;
	border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
	border: 5px solid #23527C !important;
}
    Thread Starter Capt_Zeanie

    (@capt_zeanie)

    Hi,

    I was already using Easy Fancybox to give me the lightbox on photos in pages and posts as I was not using any galleries until beginning of this week as I wanted to group most of the media together. It was only when I switched the galleries on that I got the Carousel view, so tried for hours tying to go through the CSS to fins the right class/ID but could not find it, so I deactivated the Carousel view until I could fathom it all out.

    I tried the settings you posted and FANTASTIC. What I had been trying to do for ages. Thank you Jeremy.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Jetpack Carousel CSS Border’ is closed to new replies.

Tags