CSS


CODE INJECTION

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 lightbox
.sqs-lightbox-close {
color: #000 !important;
}


OTHER CSS SNIPPETS THAT SOMETIMES CAN BE HELPFUL

// 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
 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;
  }


CSS SYNTAX

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