Custom Elements - Tabs 1 (Squarespace 7.1)
Documentation
REQUIREMENTS
Business Plan with your Squarespace version 7.1;
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 blog collection for your options, and build the element on the page you want to use it as shown in the video. HTML code to use in the code block:
<div class="tabs-title"></div>
4. Copy the “Code for ‘Show the Section ID’:” from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab
5. In Edit mode press Shift + i keys, which will show your Section ID (this will be used in step 6 and 7)
6. Replace in CSS the “[data-section-id=“5f884c970bce463c7b90299f”]” with your Section id as shown by the selector in step 4
7. Replace in JavaScript the “[data-section-id=“5f884c970bce463c7b90299f”]” with your Section id as shown by the selector in step 4
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:
Headings
Paragraphs
Meta
Code for Show the Section ID:
<script src="https://smi.squarespace.com/assets/sm-show-id/show-id.js?password=demo&ver=1.0.1"></script>
CSS Code:
/* Tabs Type 1 */
@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");
}
[data-section-id="5f884c970bce463c7b90299f"] {
.section-background {
background: #f6efe5;
}
h3 {
font-family: Questrial;
font-size: 10px;
line-height: 200%;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #35322e;
}
.tabs-title h2 {
font-family: libre-caslon-display;
font-weight: 300;
font-size: 38px;
line-height: 100%;
letter-spacing: -0.01em;
color: #35322e;
cursor: pointer;
margin-top: 0;
margin-bottom: 28px;
display: table;
}
.sqs-block-summary-v2 .summary-excerpt p {
font-family: nunito-sans;
font-size: 15px;
line-height: 200%;
letter-spacing: 0;
color: #35322e;
}
.tabs-title h2 span {
border-bottom: 1px solid transparent;
}
.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;
}
.sqs-block-summary-v2 .summary-excerpt {
max-width: 320px;
padding-left: 40px;
margin-top: 105px;
}
.tabs-title h2.sm-active span {
border-bottom: 1px solid #35322e;
}
.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;
}
.sqs-block-code {
margin-top: 45px;
}
@media (max-width: 1199px) {
.tabs-title h2 {
font-size: 32px;
}
.sqs-block-code {
margin-top: 0;
}
.sqs-block-summary-v2 .summary-excerpt {
max-width: 300px;
margin-top: 65px;
}
}
@media (max-width: 991px) {
min-height: auto !important;
.tabs-title h2 {
font-size: 24px;
}
.sqs-block-summary-v2 .summary-excerpt {
margin-top: 45px;
padding-left: 0;
}
}
@media (max-width: 767px) {
.tabs-title {
display: flex;
justify-content: space-between;
}
.tabs-title h2 {
font-size: 18px;
margin-bottom: 0;
}
.sqs-block-summary-v2 .summary-excerpt {
max-width: 100%;
padding-left: 0;
margin: 0;
}
}
@media (max-width: 640px) {
.tabs-title {
display: table;
}
.tabs-title h2 {
font-size: 25px;
margin-bottom: 15px;
}
.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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> var $ = jQuery; $(document).ready(function() { tabs_type_1(); }); function tabs_type_1() { let tabsSelector1 = '[data-section-id="5f884c970bce463c7b90299f"]'; let tabsType1 = $(tabsSelector1); if ( tabsType1.length ) { tabsType1.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>' ); }); }); tabsType1.on('click', '.tabs-title h2', function () { if ( !$(this).hasClass('active') ) { let dataID = $(this).attr('data-id'); $(this).parents(tabsSelector1).find('.sm-active').removeClass('sm-active'); $(this).addClass('sm-active'); $(this).parents(tabsSelector1).find('.summary-item:nth-child('+dataID+')').addClass('sm-active'); } }); // fix for custom URL tabsType1.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>