About CSS Code

Gentle is a beautifully designed website with very little code, and we did that to keep it simple for you! Squarespace can be a fun place to play around, and we highly suggest it! That’s how we have learned our little hacks that allow us to get awesome effects with almost no code! Let us tell you just a little about the code exists within your template, and how you can adjust it when/if you need to.

To access the CCS code area within Squarespace, simply go to Website> Website Tools> Custom CSS. From there you will see a box with some gibberish in it. We’ve labelled each piece of code by page and by adjustment. ALL the code within Gentle is for the White borders on images and simple animation. If this is not a design that you like, go ahead and delete all the code. If you’d like to change the colour, simple replace the word white with black or whichever colour you’d prefer!

Below is a copy of the CSS code for your reference. Please keep it incase of emergencies. 😉

CSS CODE

//GROUP CLASSES-IMAGE BORDER//

.eventlist-column-thumbnail {border-style: solid; border-color: #ffffff; border-radius: 32px; border-width: 2px;}

//COROUSEL-BORDER//

.user-items-list-simple .list-item {

border: 2px solid #ffffff;

border-radius: 34px !important;}

.user-items-list-simple .list-item img {

border-radius: 32px !important;}

//RADIUS FOR IMAGES//

.products .grid-image-wrapper,

.image-block-wrapper,

.ProductItem-gallery-slides-item.selected,

.sqs-gallery-design-grid-slide .image-slide-anchor

.image-overlay { border-radius: 32px; }

// This adds a radius to the images when under a colored field

img {border-radius: 32px; }

// This adds a radius to the BLOG/article images

a {border-radius: 32px}

//LIST ITEM BORDER COLOR CHANGE ON HOVER//

.list-item[data-is-card-enabled="true"]:hover {border-color:#757263}

//CONTACT FORM-BACKGROUND COLOR CHANGE//

.form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus { background: #E87A7A; outline: transparent}

//SUMMARY-BORDER//

.summary-block-wrapper img {border: 2px solid #ffffff}

//JOURNAL -IMAGE BORDER//

.blog-basic-grid .image-wrapper {border-style: solid; border-color: #ffffff; border-radius: 32px; border-width: 2px;}

//REMOVE UNDERLINE FROM LINKS//

.sqs-block-html a {

background-image:none!important;}

.sqs-block-html h1 a, h2 a, h3 a, h4 a, p a {border-bottom-style: none !important;text-decoration-line: none !important;}

//ACCORDIAN BLOCK-BORDER//

.sqs-block-accordion, {border-style: solid; border-color: #ffffff; border-radius: 32px; border-width: 2px;}