Border around photos in Collage Landscape?

AKStudios

Good day,

This is my first post and I can't find another thread answer so I am hoping someone could help me out please? I am looking to add css to my galleries to add a border around the photos in the Collage Landscape view mode. I can find it for the Smugmug layout but that's it. I've even tried to swap the smugmug with Collage landscape but the code didn't work as I hoped.

Thanks for the assistance in advance. I am very appreciative!

Andrew

www.andrewkstudios.com

thenickdude

The best solution I could come up with is this:

.sm-gallery-images .sm-tiles-row-organic .sm-image {
	border:5px solid black;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

With the caveat that it changes the aspect ratio of the image slightly, the further away the image is from being square to begin with. There are probably better solutions out there.

AKStudios

Thank you thenickdude! It worked and that's what I was looking for. I really appreciate your time and feedback.

AKStudios

Borders around folders/galleries?

thenickdude wrote: »

The best solution I could come up with is this:

.sm-gallery-images .sm-tiles-row-organic .sm-image {
	border:5px solid black;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

With the caveat that it changes the aspect ratio of the image slightly, the further away the image is from being square to begin with. There are probably better solutions out there.

---

I have been trying to figure out css code to do the same thing to galleries within folders but I'm having trouble. For example this page (http://www.andrewkstudios.com/BJJGrapplingMMA) has folders and galleries and I'd like to put borders and rounded corners on this page. I've tried the same codes on this page css but it doesn't work the same. I'm new to css so any suggestions would be greatly appreciated. I'm also looking to put borders around this page but can't figure that out either. http://www.andrewkstudios.com/browse

Thank you in advance for the assistance. Your time is much appreciated.
Andrew

Darter02

I thought I'd try this too. I tested this on a hidden gallery that is separate from my All Galleries customization, but still uses my main theme. I dropped a CSS block on a gallery of Collage Landscape images. I then placed this into it.

/*Add Border to Collage Landscape & Portrait Galleries*/
.sm-gallery-images .sm-tiles-row-organic .sm-image {
	border:1px solid #454840;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

It worked.



I also wanted to have the same border on portrait collage galleries so I added ".sm-gallery-columnorganic" but then the border stopped working in landscape, and never worked in portrait collage. I also experimented with dropping the above code into my current site's main theme, but while it worked in the test gallery, it doesn't when applied to the theme's CSS.

I also tried to get it to apply to the following with no effect, and I don't understand why.

Images in a Feed: .sm-feed .sm-feed-item-description a img
Maps on a page: .leaflet-container .sm-page-widget-image
3x1 & 1x3 aspect images. Plus folders... Basically, everything I applied the rounded commands to.

The codes I use to round corners:

/*ROUNDED CORNERS STUFF*/

/*rounded corners*/
.sm-page-widget-galleries .sm-tile a {
  border-radius: 10px;
}

/*round collage gallery thumbs*/
  .sm-gallery-roworganic img, .sm-gallery-columnorganic img {
    border-radius: 10px;
}

.sm-page-widget-folders .sm-tile a, .sm-page-widget-galleries .sm-tile a, .sm-page-widget-nodes .sm-tile a, .sm-page-widget-pages .sm-tile a {
  border-radius: 10px;
}

/*fix far right rounded corners*/
.sm-page-widget-images .sm-tile a {
  border-radius: 10px;
}

.sm-page-widget-image .sm-tile img {
  border-radius: 10px;
}

.sm-tiles-row-organic .sm-tiles-list {
  overflow: visible;
  margin: 0 0 0 -18px;
}

.sm-tile-single.sm-tiles-uncropped .sm-image {
  border-radius: 10px;
  box-shadow: 0 0 0 #000;
  max-width: 95%
}

/*round corners to feed*/
.sm-feed .sm-feed-item-description a img {
  border-radius: 10px;
}

/*round corners of FB badge*/
.sm-page-widget .sm-page-widget-body a img {
  border-radius: 10px;
}

/*round lightbox image*/
  .sm-lightbox-image {
      border-radius:25px;
}

/* round the edges on maps */
.leaflet-container{
    border-radius: 10px;
  -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-radius:10px;
}

/* Round image in a "single photo 3x1 aspect" block */
.sm-page-widget-image .sm-tiles-3x1 .sm-tile {
	border-radius:10px;
	overflow:hidden;
	-webkit-mask-image: url

(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);	
}

Before I really start to mess around, and possibly wreck things, could I just add a border command to all those rounding rules?

NPayne

Thanks very much for this post this is the css code I've been trying to find for half a day