Custom Elements - Tabs 03

Documentation

REQUIREMENTS

Business Plan with your Squarespace version 7.0;
Squarespace template that allows stacked Index pages;

How to

To implement your custom element inside your Squarespace account please follow the instructions below or/and watch the video:

Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab
Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab
Create a post collection with title, image and description. Image recommended ratio - horizontal.
Add a new section inside an Index Page, where you want the element located. Make sure to title the section with slug “tabs-type-3“ or “tabs-type-3-x“. HTML code to use when building the element:

<div class="tabs-title"></div>

Video Passcode: SQM-ELEMENTS

This video will go over how to update your fonts** to match the ones from the Custom element (check screenshots below) and the other way around.

**Font-families set in the CSS Code might differ from the ones mentioned in the video tutorial. The practice of changing the fonts stays the same.

Fonts Styles:

Heading 2

Body

CSS Code:

/* Tabs Type 3 */
@font-face {
  font-family: Questrial;
  src: url("https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5cade8cfe5e5f02b0ddd34b8/1554901200175/Questrial-Regular.ttf");
}
@font-face {
  font-family: nunito-sans;
  src: url("https://static1.squarespace.com/static/5e5cc5496ecd6e20d2894138/t/642e87d44790e500c508a6b1/1680771029363/NunitoSans-Light.ttf");
}
@font-face {
  font-family: libre-caslon-display;
  src: url("https://static1.squarespace.com/static/642fc2cb0ff3d476932cd662/t/642fd70e40a7231d4fe182f4/1680856846167/libre-caslon-display.regular.otf");
}
[id^="tabs-type-3"] {
  background: #a29d97;

  .summary-excerpt h2 {
    font-family: libre-caslon-display;
    font-weight: 300;
    font-size: 43px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 48px;
  }
  .summary-excerpt h3 {
    font-family: nunito-sans;
    font-weight: 600;
    font-size: 11px;
    line-height: 200%;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-block;
    float: left;
    margin-top: 5px;
  }
  .summary-excerpt p {
    font-family: nunito-sans;
    font-size: 15px;
    line-height: 180%;
    letter-spacing: 0;
    color: #ffffff;
    max-width: 400px;
  }
  .summary-excerpt ul li p {
    font-family: Questrial;
    font-size: 10px;
    line-height: 250%;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
  }
  .summary-excerpt p a {
    font-family: nunito-sans;
    font-weight: 600;
    font-size: 9px;
    line-height: 120%;
    letter-spacing: 0.3em;
    color: #494949;
    padding: 19px 60px;
    background: #ffffff;
    margin-left: 55px;
    transition: all 0.4s;
  }
  .tabs-title h2 {
    font-family: Questrial;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #cecece;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    margin-left: 10%;
  }
  .tabs-title h2:first-child {
    margin-left: 0;
  }
  .Index-page-content {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .summary-excerpt ul {
    padding: 17px 0 65px 15px;
  }
  .summary-excerpt ul[data-rte-list] li > *:first-child::before {
    content: "-";
  }
  .summary-excerpt ul[data-rte-list] li > *:first-child::before {
    padding-right: 4px;
  }
  .sqs-block-summary-v2 .summary-excerpt li {
    margin-bottom: 1px;
  }
  .summary-excerpt p a:hover {
    opacity: 0.8;
  }
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    position: relative;
    transition: all 0.5s;
    display: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .yui3-widget
    .summary-item:first-child,
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .summary-item.sm-active {
    display: block;
  }
  .tabs-title h2.sm-active {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
  }
  .sqs-block-summary-v2 .summary-title {
    display: none;
  }
  .summary-thumbnail-outer-container {
    pointer-events: none;
  }
  .summary-thumbnail img {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
  }
  .tabs-title {
    display: flex;
    justify-content: center;
  }
  .sqs-block-code {
    margin-bottom: 45px;
  }
  @media (max-width: 1199px) {
    .Index-page-content {
      padding-top: 70px;
      padding-bottom: 50px;
    }
    .tabs-title h2 {
      margin-left: 5%;
    }
  }
  @media (max-width: 991px) {
    .summary-excerpt h2 {
      font-size: 35px;
      margin-bottom: 25px;
    }
    .sqs-block-code {
      margin-bottom: 15px;
    }
    .summary-excerpt p a {
      padding: 19px 45px;
    }
    .tabs-title h2 {
      font-size: 11px;
      letter-spacing: 0.3em;
    }
  }
  @media (max-width: 767px) {
    .summary-excerpt h2 {
      font-size: 30px;
    }
    .summary-excerpt p a {
      padding: 19px 35px;
      margin-left: 40px;
    }
    .tabs-title h2 {
      font-size: 11px;
      letter-spacing: 0.2em;
    }
  }
  @media (max-width: 640px) {
    .Index-page-content {
      padding-top: 30px;
      padding-bottom: 20px;
    }
    .tabs-title {
      flex-direction: column;
      align-items: flex-start;
    }
    .tabs-title h2 {
      display: inline-block;
      margin-left: 0;
      margin-bottom: 15px;
    }
    .summary-excerpt h3 {
      float: none;
      display: inline-block;
      margin-bottom: 25px;
    }
    .summary-excerpt ul {
      padding-bottom: 25px;
    }
    .summary-excerpt p a {
      margin-left: 0;
    }
    .sqs-block-code {
      margin-bottom: 0;
    }
    .sqs-block-summary-v2
      .summary-block-setting-design-list
      .summary-thumbnail-container {
      padding: 0 0 20px;
    }
    .sqs-block-summary-v2
      .summary-block-setting-design-list
      .summary-thumbnail-outer-container,
    .sqs-gallery-design-list
      .sqs-gallery-design-list-slide
      .sqs-gallery-meta-container {
      width: 100% !important;
    }
  }
}

JavaScript Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  tabs_type_3();
});

function tabs_type_3() {
  let tabsSelector3 = '[id^="tabs-type-3"]';
  let tabsType3 = $(tabsSelector3);
  if ( tabsType3.length ) {
    tabsType3.each( function() {
      let count = 0;
      let $this = $(this);
      $this.find('.summary-item:first-child').addClass('sm-active');
      let $tabsTitle = $this.find('.tabs-title');
      $this.find('.summary-item .summary-title-link').each( function() {
        count++;
        let active = '';
        if ( count == 1 ) {
          active = 'class="sm-active"';
        }
        $tabsTitle.append( '<h2 '+active+' data-id="'+ count +'">' + $(this).html() + '</h2>' );
      });
    });

    tabsType3.on('click', '.tabs-title h2', function () {
      if ( !$(this).hasClass('active') ) {
        let dataID = $(this).attr('data-id');
        $(this).parents(tabsSelector3).find('.sm-active').removeClass('sm-active');

        $(this).addClass('sm-active');
        $(this).parents(tabsSelector3).find('.summary-item:nth-child('+dataID+')').addClass('sm-active');
      }
    });

    // fix for custom URL
    tabsType3.find('.summary-item').each(function() {
      let $this = $(this);
      let href = $this.find('.summary-title-link').attr('href');
      $this.find('.summary-read-more-link').attr('href', href);
    });
  }
}
</script>

Custom Elements - Tabs 03

Documentation

REQUIREMENTS

How to

Part of Pixieset Family

USeful links