EMAILBANNER.jpg
 

welcome vips!

Welcome to the VIP area! Here are your exclusive resources and tools that will help you build, design and make your Squarespace site just as bad ass as you are.

 


 

- CSS CODE SNIPPETS FOR SQUARESPACE - 

These are code snippets that I've found through my searches on the web and  the Squarespace Answers forum when designing.

 

disable "right click"

in Squarespace: Settings > Advanced > Code Injection > 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript" language="javascript">$(function () {$(this).bind("contextmenu", function (e) {e.preventDefault();});});</script>
 

make the title over gallery images

in Squarespace: Design > Custom CSS

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 2.4em;
-webkit-transition: all 300ms
ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
background: rgba(0,102,130,0.7);
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: sans-serif,
myriad-pro;
font-weight: lighter;
font-size: initial;
text-transform: capitalize;
letter-spacing: 1px;
color: #fff;
opacity: 0;
pointer-events: none;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: sans-serif, myriad-pro;
font-weight: lighter;
font-size: initial;
text-transform: capitalize;
letter-spacing: 1px;
color: #fff;
opacity: 1;
pointer-events: none;
}



 /* increase image transparency on hover */ 
 img.summary-thumbnail-image.loaded:hover 
 { 
 opacity: 0.5; 
 }
 
 /* display title on hover*/ 
 .sqs-block-summary-v2 .summary-item .summary-title 
 a{ 
 background-color: transparent; 
 opacity: 0; 
 font-family: brandon-grotesque; 
 font-size: 150%; 
 font-weight: 900; 
 color: #000; 
 }
 
 .sqs-block-summary-v2 .summary-item:hover .summary-title 
 a{ 
 background-color: transparent; 
 opacity: 1; 
 font-family: brandon-grotesque; 
 font-size: 150%; 
 font-weight: 900; 
 color: #000; 
 }
 

change index page to full width

in Squarespace: Design > Custom CSS

<style> .collection-type-index .content-inner { padding: 0 !important; max-width: 100% !important ; } </style>
 

change the styling of the summary block titles

in Squarespace: Design > Custom CSS

.sqs-block-summary-v2 { .summary-heading { font-family: "bebas neue"; font-size: 55px ; color: #834461 ; } .summary-title { font-family: "bebas neue"; font-size: 55px ; color: #000000; }
 

add a background image to your footer

in Squarespace: Design > Custom CSS

footer { background-image: url(IMAGE URL HERE); background-repeat: no-repeat; background-size: auto;