Custom CSS

 

Custom CSS

Now we are going to add some custom code to your site, but don’t worry its all been written for you and it’s super easy to make a few tweaks.

Let go to Design>Custom CSS

Refer to your templates notes to copy your CSS.
Make sure to copy all of the code and then paste it into your site.

Making tweaks

Most of the tweaks that you are going to want to do are changing the font and the colour.

To change colours in the code all you need to do is look for the hex code.

A hex code is a code that looks something like this #423632.

To change the font style look for the class “font-family” then a name like Courier-New.

Just be aware that when you are entering in font names you need to type them in exactly as then need to be other wise the code will not update.

Custom CSS Code

//newsletter button homepage//
.lightbox-handle-wrapper 
{background-color: #423632;
margin: -17px;}
//home page header image//
 #home-page-header .sqs-block.image-block {
   padding: 0px 0px 0px 0px;
 }
//quotes
 .sqs-block-content blockquote {
      font-size: 20px;
     font-family:"Courier New";
     color: #c69588;
 border-top:solid;
    border-bottom:solid;
   border-left:none;
padding:30px;
 }
//contact form//
#contact-3 .form-wrapper .field-list .field .field-element{
  border:none;
  border-color: #c69588;
  background: #ffffff;  
}
//announcement bar
.sqs-announcement-bar-close { display: none !important }
//services - poster block button bottom//
.sqs-block-image .design-layout-poster .image-button
{
margin-top: 120%;   
 }
 
Joanne Whyte