CSS


CODE INJECTION

<meta name="robots" content="noindex">

 

Prevent iOS from opening audio blocks in new window

<script>

Y.on('domready', function(){

Y.UA.ios = 0; //Y.UA object have test key for different platforms.

//Setting ios value to 0 here allow to skip default Audio Block's behavior

})

 </script>

STANDARD CSS

CSS that should be applied to all House Digital websites

// remove required (*) from forms
span.required {
display: none;
}

// Freeze maps to prevent scrolling issue especially on desktop
.sqs-block-map {pointer-events: none;}


Use this if the website uses a light background

// Change the color of x in gallery lightbox
.sqs-lightbox-close {
color: #000 !important;
}


OTHER CSS SNIPPETS THAT SOMETIMES CAN BE HELPFUL

//Style audio play button

#block-yui_3_17_2_1_1543353640926_11440 {

max-width: 60px;

margin-left: auto;

margin-right: auto;

}

.sqs-widgets-audio-player {

border-radius: 100px;

}

.sqs-widgets-audio-player .played {

display: none !important;

}

.sqs-widgets-audio-player .action {

border-right: 0px;

}

.sqs-widgets-audio-player .action .play-button {

margin-left: 3px;

}

.sqs-widgets-audio-player .action .pause {

margin-left: 1px;

}

//hide announcement bar on all pages except About page
body:not(#collection-5ab9d1b9575d1f042128d8e4) .sqs-announcement-bar { display: none !important; }

 

// restrict width of mobile menu flyout
@media screen and (max-width: 600px) {
.Mobile-overlay-menu {
  width: calc(100% - 50px) !important;
  }}
@media screen and (min-width: 601px) and (max-width: 900px) {
.Mobile-overlay-menu {
  width: calc(100% - 70px) !important;
  }}
@media screen and (min-width: 901px) {
.Mobile-overlay-menu {
  width: calc(100% - 80px) !important;
  }}

 

// Make galleries fill just one column in mobile

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

{.sqs-gallery-design-grid-slide {

width: 100% !important;

clear: none !important;

}

}

// Remove top padding from mobile secondary navigation first child
.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
  padding-top: 0em !important;
}

 

// Style newsletter box title in brine template

// Style newsletter heading.newsletter-form-header {
  h2 {
    text-transform: uppercase !important;
  }
}

 

// Hover effect on poster images
.design-layout-poster:hover {
  opacity: 0.7;
  transition: .5s ease; 
}

.tweak-quote-block-alignment-center .sqs-block-quote {
   font-weight: 500;
   background: #f9f9f9;
   border-left: 10px solid #8E6396;
   margin: 0 10px;
   padding: 0.5em 10px;
   font-style: italic;
   text-align: left;
   font-size: 16px;
}

 

//  Change the footer font size
#footer{
    font-size: 13px !important;
  h2 {
    font-size: 15px;
  }
}

// Add border to footer
#footer {
  border-top: 1px solid hsl(224, 84%, 39%);
}

// Change the color of dividers
.sqs-block-horizontalrule hr {
  background-color: #c9cacc !important;
  height: 1px;
}

// Hide share buttons on products pages
.ProductItem-details-share {
  display: none !important;
}

// remove middle footer block/
#footerBlocksMiddle {
display: none;
}

// remove top footer block/
#footerBlocksTop {
display: none;
}

// Remove hyphens
h1, h2, h3, p {
   -webkit-hyphens: manual !important;
      -moz-hyphens: manual !important;
       -ms-hyphens: manual !important;
           hyphens: manual !important;
 }

 

// CREATE BUTTONS ON HOME PAGE SLIDER GALLERY FOR BRINE TEMPLATE

// BUTTONS OF GALLERY
.Index-gallery-item-content--has-title-and-body p a {

margin-left: -2px;
       color: #000;
       text-transform: uppercase;
       font-size: 12px;
       letter-spacing: 1px;
       font-weight: 500;
       margin-top: 15px !important;
       margin-bottom: 20px !important;
       display: inline-block;
       border: solid 1px #000;
       padding: 15px 20px;
       text-align: center;
       border-radius: 5px;
  transition: all ease-in-out 100ms !important;
  -moz-transition: all ease-in-out 100ms !important;
  -webkit-transition: all ease-in-out 100ms !important;
     }
.Index-gallery-item-content--has-title-and-body p a:hover {
       background: #222 !important;
      border: #222;
       color: #fff;
     }

// Chang color of indicators
.tweak-index-gallery-indicators-dots .Index-gallery-indicators-item .Index-gallery-indicators-item-inner {
  border: 2px #999 solid;
}

// Disable gallery slide on gallery hover, yet enable for arrows and buttons on home page gallery
.Index-gallery-wrapper, .gallery-root {
  pointer-events: none;
}
.gallery-root a, .Index-gallery-indicators, .Index-gallery-control, .Index-gallery-control--left {
   pointer-events: initial;
  }


TEMPLATE SPECIFIC CSS

ADIRONDACK

// Remove text align throughout site
body .contact-wrapper, body #contactInfo, body #mobile-navigation, body .outer-wrapper {
  text-align: left !important;
}

// Remove folder nav on project pages
.folder-nav {
display: none;
}

// Change behavior of cursor when hovering over menu icon on desktop
#desktopMenu {
  cursor: default !important; }

FLATIRON

// Remove unnecessary bottom margin on mobile

@media (max-width: 450px) {
section#container {
margin-bottom: 0px !important;
}}

 

// Change font style and size of image captions

.image-caption >p strong {

  font-size: 20px !important;

  line-height: 20px !important;

  font-family: sans-serif; /*note that other fonts can be used by correctly pointing squarespace to the right font family name*/

  font-weight: 200 !important;

}

 

// Change size of text in desktop footer

.footer-block .sqs-block-content >p {

  font-size: 15px !important;

}

 

// Remove bottom border upon hover from "X" in lightbox

.sqs-lightbox-close{

  border-bottom: none !important;

}

 

// Disable gallery slide on gallery hover, yet enable for arrows and buttons on home page gallery
.Index-gallery-wrapper, .gallery-root {
  pointer-events: none;
}
.gallery-root a, .Index-gallery-indicators, .Index-gallery-control, .Index-gallery-control--left {
   pointer-events: initial;
  }


Cookie CSS styling

// Cookie Notice

.cookie-notice {

display: block !important;  

background: hsla(43, 9%, 94%, 0.98) !important;

  border: 1px solid #ddd !important;

  -webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  border-radius: 0px;

  color: hsl(0, 1%, 45%) !important;

  width: 250px !important;

  font-family: proxima-nova !important;

  font-size: 100% !important;

  letter-spacing: 0.02em;

  line-height: 1.6em;

  position: fixed !important;

  top: auto !important;

  bottom: 30px !important;

  left: auto !important;

  right: 30px !important;

  padding: 30px !important;

}

.cookie-notice a {

  color: hsl(0, 1%, 45%);

}

.cookie-notice .accept {

  display: block;

  width: 200px;

  padding: 10px !important;

  background: hsla(43, 9%, 94%, 0.98);

  color: #0b002b;

  font-family: proxima-nova;

  font-weight: 600;

  text-transform: uppercase;

  font-size: 90%;

  letter-spacing: 0.1em;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  margin-top: 20px !important;

  margin-left: 0px !important;

  border-top-style: none !important;

  border-right-style: none !important;

  border-bottom-style: none !important;

  border-left-style: none !important;

  border: 2px solid #0b002b !important;

}

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

  .cookie-notice {

  width: 250px;

  font-size: 70% !important;

  top: auto !important;

  bottom: 10px !important;

  left: auto !important;

  right: 10px !important;

  padding: 20px !important;

}

}

 


CSS SYNTAX

!important – this prioritizes a CSS rule, helping it to over-ride a conflicting rule.