Design Kit Updates

Latest Update 18 December 2018

This article covers updates that have been made to the design kit to improve its functionality and make it more user friendly.

For Ónyx design kit, the update pertains specifically to graphic elements. If you have implemented the design kit before the update release, you can choose to continue using graphics or follow the instructions below to implement these through CSS code and settings inside Site Styles tab in your account.

The Update affects the Homepage, specifically the Portfolio & About Us links, which now can be easily edited without the necessity to use Photoshop files, as well as line divider that is added not as an image but through CSS code. With the help of provided CSS, the fonts will also be updated. (watch video below).

Another update is regarding the bottom box links area, which will be created with the help of Images block (Poster style) + provided CSS code (watch video below).

In order for your code to work properly, make sure that the URL slug (which you can find when you click on the settings of each page ) is the same as the one from your code(see screenshot below as example). If necessary, update all sections’ tags with your slug.

COPY and paste this code in the “Custom CSS” area under the Design-> Advanced tab

/***Top Slider - edit the slug "slider" to match your own****/
section[id^="slider"] .Index-page-content {
    padding: 0;
}
section[id^="slider"] .sqs-block-gallery {
    padding: 0;
}
section[id^="slider"] .sqs-gallery-controls .next {
    right: 17px;
    background-color: transparent!important;
}
section[id^="slider"] .sqs-gallery-controls .previous {
    left: 17px;
    background-color: transparent!important;
}

/***Portfolio & About Section - edit this wording through text not images and add divider. Change the "about-section" slug to match your slug for this section****/
section[id^="about-section"] .sqs-row {
    display: flex;
}
section[id^="about-section"] .sqs-row .sqs-col-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section[id^="about-section"] .sqs-row .sqs-col-2 {
    position: relative;
}
section[id^="about-section"] .sqs-row .sqs-col-2:before {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic {
    max-width: 250px !important;
    margin: 0 auto;
}
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img {
    max-width:  100% !important;
    height: auto !important;
}
section[id^="about-section"] code {
    margin-top: 0;
    margin-bottom: 0;
}
section[id^="about-section"] h2,
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p {
    font-family: Playfair Display;
    font-weight: 400;
    font-style: normal;
    font-size: 65px;
    letter-spacing: -0.01em;
    line-height: 0.72em;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 35px;
}
section[id^="about-section"] h2 strong,
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p strong {
    font-size: 13px;
    letter-spacing: 1.1em;
    font-style: normal;
    font-weight: normal;
    display: block;
    margin-bottom: 1px;
}
section[id^="about-section"] a,
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-subtitle p {
    font-family: Playfair Display;
    font-weight: 400;
    font-style: normal;
    font-size: 13px !important;
    letter-spacing: 1.1em;
    line-height: 2em;
    text-transform: uppercase;
    border: none !important;
}
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-subtitle p {
    line-height: 3.2em;
}
section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-subtitle-wrapper {
    margin-top: 35px;
}
section[id^="about-section"] .sqs-block-image .design-layout-poster .image-card {
    width: 100%;
}
@media only screen and (max-width: 1199px) {
    section[id^="about-section"] h2,
    section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p {
        font-size: 55px;
    }
    section[id^="about-section"] h2 strong,
    section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p strong {
        letter-spacing: 1em;
    }
}
@media only screen and (max-width: 991px) {
    section[id^="about-section"] h2,
    section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p {
        font-size: 40px;
    }
    section[id^="about-section"] h2 strong,
    section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p strong {
        letter-spacing: 0.6em;
        margin-bottom: 25px;
    }
    section[id^="about-section"] .sqs-col-4 .sqs-block-spacer {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    section[id^="about-section"] h2,
    section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title p {
        font-size: 35px;
    }
    section[id^="about-section"] a,
    section[id^="about-section"] .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-subtitle p {
        letter-spacing: 0.8em;
    }
}
@media only screen and (max-width: 639px) {
    section[id^="about-section"] .sqs-row {
        flex-direction: column;
    }
}

pre code {
    font-family: Arial;
}

/***Image links styling***/
.sqs-col-3 .design-layout-poster {
    position: relative;
}
.sqs-col-3 .design-layout-poster:before {
    content: '';
    width: calc(~"100% - 20px");
    height: calc(~"100% - 20px");
    border: 1px solid #fff;
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
}
.sqs-col-3 .sqs-block-image .design-layout-poster .image-title-wrapper .image-title p {
    font-family: brandon-grotesque;
    font-weight: 700;
    font-style: normal;
    font-size: 24px!important;
    letter-spacing: 0.2em
}