journal style layout

synature · April 20, 2014

I can't seem to find anything on here that would let me set up a journal gallery with the captions to the right or left of the photo instead of at the bottom.

It's probably something obvious, but I'm not seeing anywhere I can change that. Help would be appreciated, :-)

Allen · April 20, 2014

synature wrote: »

I can't seem to find anything on here that would let me set up a journal gallery with the captions to the right or left of the photo instead of at the bottom.

It's probably something obvious, but I'm not seeing anywhere I can change that. Help would be appreciated, :-)

I'm still experimenting with this but have one gallery in work. This is the CSS I used in "Just this Gallery". http://www.photosbyat.com/Archery/Bobs-Bear-Trip

.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content {
    display: inline-block;
    width: 50%;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
    display: inline-block;
    width: 50%;
    padding: 0 .5em 1.2em 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sm-tile-wrapper {
width: 100% !important;
}

.sm-tile-caption {
padding-top: 40px;
font-size:120%;
}

.sm-tile-info {
    text-align: left !important;
}

synature · April 20, 2014

Works great!

Using the journal gallery as a blog tool is better than using a page as long as the text part can remain simple. If only because it keeps the commentary on that photo in the caption.

Allen wrote: »

I'm still experimenting with this but have one gallery in work. This is the CSS I used in "Just this Gallery". http://www.photosbyat.com/Archery/Bobs-Bear-Trip

.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-content {
    display: inline-block;
    width: 50%;
}
.sm-user-ui .sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
    display: inline-block;
    width: 50%;
    padding: 0 .5em 1.2em 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sm-tile-wrapper {
width: 100% !important;
}

.sm-tile-caption {
padding-top: 40px;
font-size:120%;
}

.sm-tile-info {
    text-align: left !important;
}

Allen · December 3, 2016

Working on this now. Currently with these two rules.
Moving the text up to top of photo when not logged in.
Logged in I need the text down some so it doesn't interfere with the tools.
Probably don't need that font size either.

.sm-tile-caption {
padding-top: 0;
font-size:115%;
}

.sm-user-loggedin.sm-user-owner .sm-tile-caption {
padding-top: 40px;
}

BTW, playing with this part of the original posted CSS.
.sm-tile-caption { padding-top: 40px; font-size:120%; }

journal style layout

Comments