Styling tags & categories on Summary images

styled-summaries_1000.jpg

To change position, color and typography for summary tags, categories and titles you need to write some CSS. Here it is. As usual the blue code refers to LESS variables, most of them to be found in my LESS boilerplate.

.sqs-block-summary-v2 {

.summary-thumbnail-outer-container {
  opacity: 1;
  transition: @transition-fast;
&:hover {  
  opacity: @opacity-high;   
  }
}

// TARGET TEXT-SIZE MEDIUM SUMMARY
.summary-block-setting-text-size-medium .summary-title {
  .anti !important;
  font-family: @guardian;
  font-size: 16px;
  letter-spacing: .03em;
  text-align: left;
}

// CONTENT
.summary-content {
  position: absolute;
  bottom: 0;
  padding: 10px;
  padding-top: 5px;
  height: 25%;
  width: 100%;
  color: #FFF; /* colour of the title and except text */
  background: rgba(255,255,255, 0.3);
  transition: @transition;
&:hover {
  opacity: @opacity-low;   
  }
}
  
.summary-block-setting-show-title .summary-thumbnail-container{
  margin-bottom: 0!important; /* fix to bottom of thumbnail */
  overflow: hidden; /* hide anything that doesn't fit */
  transition: @transition;
  opacity: 1;
&:hover {
  opacity: @opacity-low;
  }  
}
 
.summary-item{
  margin-bottom: 16px!important; 
}
   
// POSITION CATEGORY OR TAG LABELS
.summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats,
.summary-block-setting-primary-metadata-tags .summary-item-has-tags .summary-metadata--primary .summary-metadata-item--tags{
    position: absolute;
    left: 0%;
    top: -27%;
    transform: rotate(-3deg);
    padding-left: 10px;
    opacity: 1;
  }

// CAT OR TAG LABELS
.summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats a,
.summary-block-setting-primary-metadata-tags .summary-item-has-tags .summary-metadata--primary .summary-metadata-item--tags a {
  // Default category labels
  font-family: @guardian-light;
  font-size: 12pt; 
  letter-spacing: 0.05em;
  padding: 4px 9px;
  background: rgba(194, 60, 47, 1); /* default font background – use .js to change */
  color: #fff; 
  }    
}

Note. Original code comes from the Squarespace experts at SoundFocus. Pay them a visit!