Squarespace Helpful CSS Code

 

 

Make Google Embed Maps Responsive

https://www.ostraining.com/blog/coding/responsive-google-maps/

 

 

Logo Redirect Link

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 <script>

   $(document).ready(function() {

       $("img[alt='Swiss Hibiscus']").parent().attr("href", "/welcome/");

               });

 </script>

 

 

CUSTOM FONTS for COVER Page

<style>

/* BRANDING -- Text

----------------------*/

[data-compound-type="logo"][data-slice-type="heading"] h1{

 font-family: "" !important;

 }

 

/* BRANDING -- Heading

----------------------*/

[data-slice-type="heading"]:not([data-compound-type]) h1{

 font-family: "" !important;

 }

 

/* BRANDING -- Paragraph/Body

-----------------------------*/

[data-slice-type="body"] p{

 font-family: '' !important;

 }

 

/* BRANDING -- Buttons

----------------------*/ 

.button-style-outline [data-slice-type="buttons"] a{

 font-family: '' !important;

 }

  

@font-face {

    font-family: '';

    src: url('') format(''),

}

</style>

 

 

 

ANCHOR LINKS

http://www.muno.space/code-snippets/anchor-links

 

 

Footer Padding

.footer-wrapper {

max-width: 960px;

margin: 0 auto;

padding: 80px 8%; 

}

 

 

 

Change Background color of ONE page

[data-url-id="families-and-individuals"] .content-inner { background-color: #70c0cf !important; }

 [data-url-id="families-and-individuals"] .content { background-color: #70c0cf !important; }

 

 

Open in a New Tab

"target="_blank

 

 

HIDE Main Title of page within an index (needs to go in Custom CSS for whole site)

 

#content-wrapper [data-url-id="ww-apply"] .page-title-wrapper {

   display: none !important;

   min-height: 0.1px;

 }

 

 

Custom Font

<style>

  @font-face {

    font-family: 'FranklinGothicHandDemi';

       src: url('//static1.squarespace.com/static/54e7ec8be4b0a4e937a70ca9/t/558736b7e4b04e6344618676/1434924727901/2E7B6D_0_0.eot'),

              url('//static1.squarespace.com/static/54e7ec8be4b0a4e937a70ca9/t/558736c1e4b04e63446186a4/1434924737550/2E7B6D_0_0.ttf'),

              url('//static1.squarespace.com/static/54e7ec8be4b0a4e937a70ca9/t/558736cbe4b04e63446186cc/1434924747089/2E7B6D_0_0.woff'),

              url('//static1.squarespace.com/static/54e7ec8be4b0a4e937a70ca9/t/558736d1e4b04e63446186e2/1434924753896/2E7B6D_0_0.woff2');

    font-weight: normal;

    font-style: normal;

  }

.main-nav ul li a span, .main-nav ul li a:visited span {

font-family: "FranklinGothicHandDemi",

 !important;

}

  h1, h2, h3, h4, h5 { font-family: 'FranklinGothicHandDemi' !important; font-weight: normal; font-style: normal; }

h1, {

    font-family: 'FranklinGothicHandDemi';

    font-weight: normal;

    font-style: normal;

    font-size: 40px;

  }

h2, {

    font-family: 'FranklinGothicHandDemi';

    font-weight: normal;

    font-style: normal;

    font-size: 35px;

  }

h3, h4, h5, h6 {

    font-family: 'FranklinGothicHandDemi';

    font-weight: normal;

    font-style: normal;

    font-size: 20px;

  }

</style>

 

 

 

Image full width

.content-inner {

   max-width: 100% !important;

 }

 

(If you want to isolate a single page)

.collection-5770d15db3db2bd35f6c6c14 .content-inner {

max-width: 100% !important;

}

 

 

 

Change hover/link color in main nav

 

.main-nav ul li a:hover {

   color: rgb(255,0,0) !important;

}

 

Change hover/link color in a paragraph

 

a { 

     color: #fc8002; 

     &:hover, &:visited, &:active { color: #ACEDFF; }

  }

 

Change Header colors

 

 h2, h3 {

   

  color: #89BBFE;

  }

 

 

Delete Title and Header Image of a Single Page

 

In page code injection

 

<style> 

.title--description-position-over-image .title-desc-wrapper:not(.has-main-image) {

  display: none;

</style>

 

 

 

Squarefront.com

 

http://squareplugins.com/

 

 

 

Add button to main nav (border):

 

.main-nav ul li:last-child {

  border: solid 3px;

  padding: 10px;

  color:#72a326;

}

 

 

  1.  

 

.external-link a {

  background: #fff !important;

  color: #49503f !important;

  border: solid 3px;

  border-color: #72a326 !important;

  text-decoration: none;

  padding: 8px 12px 8px 12px;

  -webkit-transition: background-color .1s ease-out;

  transition: background-color .1s ease-out;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

}

.external-link a:hover {

  color: #fff !important;

  background-color: #fff !important;

  border-color: #72a326 !important;

}

 

 

  1. Use the same form in different pages? 
  • find the page that the form is on 
  • find the source code for that page
  • find the code for the form itself copy it
  • create html code block and paste the code into it. 
  • if you need to make any changes, you have to find the original form and do it there. Then you have to recopy the steps above.

 

  1.  

Disable Links in Summary Blocks

 

 /* disable lightbox on summary block images for team page*/

 #collection-56cc7703c6fc08547b3348e0 .summary-thumbnail-container {

 pointer-events: none !important;

 }

 

 /* disable lightbox on summary block titles for team page*/

 #collection-56cc7703c6fc08547b3348e0 .summary-title-link {

 pointer-events: none !important;

 }

 

 

Accordion

http://www.silvabokis.com/squarespace-tips/how-to-create-hideshow-faqs-in-squarespace

 

 

   .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {

  opacity: .1;

  -webkit-transition: opacity .3s ease-in-out;

  transition: opacity .3s ease-in-out;

  -moz-transition: opacity .3s ease-in-out;

  -o-transition: opacity .3s ease-in-out;

  -ms-transition: opacity .3s ease-in-out;

 }

 

 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {

  display: block;

  position: absolute;

  top: 110px;

  right: 0;

  bottom: 0; 

  left: 0;

  padding: 2em;

  -webkit-transition: all .3s ease-out;

  -moz-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  -ms-transition: all .3s ease-out; 

  transition: all .3s ease-out;

  margin-bottom: 0px !important; 

 }

 

 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {

  color: #273845; 

  opacity: 0; 

  text-transform: uppercase; 

  font-size: 18px; 

  line-height: 125%;

  letter-spacing: 2px; 

  margin-bottom: 240px;

 }

 

 .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {

  color: #273845; 

  opacity:1; 

  text-transform: uppercase; 

  vertical-align: middle; 

  font-size: 18px; 

  line-height: 125%;

  letter-spacing: 2px; 

  margin-bottom: 240px;

 }

 

 @media only screen and (max-width: 400px) {

 .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 

 color: transparent; 

 opacity: 0;

 }

 }