Gallery slideshow titles and captions

 

Example: Bottom left title and caption

By changing the "bottom-left" part of the main selector, other caption box positions can be addressed. Do not forget to change the settings in the Design tab in the actual slideshow gallery.

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom-left

Examples:

  • "top-right"

  • "center"

  • "bottom-right"

The caption box above is generated with the code below.

/* SLIDESHOW – – bottom left title and caption 
- - - - - - - - - - - - - - - - - - - - - - - */

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom-left {
  
  // TITLE
  .meta-title {

  .anti;
  font-family: @meta;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2em;
  letter-spacing: @spacing;
  color: @text;
  padding-top: 20px;
}

  // CAPTION
  .meta p {

  // CAPTIONtext    
  .anti;
  font-family: @meta;
  font-size: 18px!important;
  line-height: 1em;
  letter-spacing: @spacing;
  color: @text;
 
  // CAPTIONtext em    
  em {
    font-style:  normal;
    font-size: 18px!important;
    letter-spacing: 0;
    color: @decor;
    }

  // CAPTION@media    

  @media @768 {
    font-size: 14px!important;
   }

  @media @480 {
    font-size: 10px!important;
    }
  }

  // CAPTIONlinked & hover
  .meta p a {
    text-decoration: none;
    border-bottom: 1px solid @line!important;
  &:hover {
    opacity: 1;
   }  
  }

  // CAPTION PADDING
  .meta-inside {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }

  // CAPTION BACKGROUND
  .meta {
    background-color: #FFF !important;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}