Main CSS Coding

You wanted me to show you how to change the fonts, colors, spacing, etc on specific pages rather than just doing it in the template designer. The main code for this is simple, and you can tweak it according to what you would like to change! 

h2 {
    font-family: "proxima-nova";
    font-size: 24px;
    line-height: 1.2em;
    text-transform: none;
    letter-spacing: -1px;
    font-weight: 500;
    font-style: normal;
    color: #000000;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

Okay, so that code above shows how to edit so many things! I recommend only including what you are actually trying to change when you type the code in, BUT I wanted to show you most of your options. 

h2 - The h2 is the heading selection. For example the Main CSS Coding that you see for the title of this tutorial is your h2 selection because you gave it the Heading 2 attributes. 

font-family - you can change this by typing the font name into the " ". Make sure you leave those there, or it will not work! You will only be able to use fonts that Squarespace provides though. Custom fonts from elsewhere is a whole new thing! 

text-transform - you have a few options here! You can do uppercase, lowercase, capitalize. 

font-weight -  you can see the options that there are for each of the fonts. You can only use a weight that Squarespace already accepts. These are typically 100, 300, 500 etc.. The bigger the number, the heavier the weight, which means the bolder it looks. 

letter spacing - I typically don't mess with this. But the higher the number, the more spacing between each letter. 

font style -  you have a few options here! You can do normal, italic, oblique, and bold. 

color - You can change this easily as long as you know your #value! Simply type it in there. 

padding - I always start this out with the 0 0 0 0 values. Now you just need to know what each 0 stands for. If for example I did padding: 10px 20px 30px 40px; ... this is what you would be changing in terms of each number. padding: 10px(top) 20px(right) 30px(bottom) 40px(left). I would normally use the same values on top & bottom, and then again on right & left, but this eaxmple just shows you to change this. 

margin - margin can be done the same way. BUT you probably won't use margin often. Padding adds padding to the text, but changing margins physically moves the entire item. 

This is where it gets tricky...

Now that you know how to change the coding, we have to choose what you are changing it for! This is where I said I would be doing some teaching. Now that you know the general code, and what each thing changes, I can tell you where to change it and how to choose what you are changing. 

How To Choose What You Are Changing

Okay. So if you want specific text on the page to take on certain attributes then I suggest giving that text a specific tag. For example, select the text and apply Heading 1. The tag for that would be h1. BUT if you want to find that tag and the current styling on the page you will highlight what you are wanting to change, right click, and the select inspect element.  You should then see something like the code that I provided. You can actually test your edits right there. They just won't save.  What I do is copy this code, paste it where I need to, make the tweaks there, and then save. But this teaches you where to find the selector that you need to use to change a specific selection. 

Now that I know what to change, and how to change it... WHERE THE HECK DO I CHANGE IT?!?

Okay. So there are two places that you can insert custom CSS. 

OPTION ONE - The first option changes the css for that selection on the entire site. Here is how you find this place! LOGIN > DESIGN > CUSTOM CSS. Once again. I suggest that you only use this option if you want to change a certain selection on the entire site!!!

OPTION TWO - This option will change the css for the selection on a specific page. LOGIN > PAGES > CLICK GEAR  NEXT TO PAGE > ADVANCED > PAGE HEADER CODE INJECTION. This is where you type your code in. Now when you do it on the custom css page you will typically see the changed right there, even before you hit save so that you can make sure you like it before saving. Here, you will have to hit save first! Then refresh your page and you should see your edits in action. 

NOW YOU KNOW THE BASIC TO CHANGE CSS OF TEXT! LET'S SEE HOW THIS APPLIES TO EACH ITEM YOU WANTED CHANGED!

That above code, or something very very similar, can actually be used to make most of the edits that you mentioned! Here is a little bit of info on how to change each item that you mentioned!

POP QUOTES

You wanted to know if an image or custom css was best for pop quotes! I personally recommend the images. I like how you ave them now! I typically will use images for something like this as well! BUT... just for the sake of teaching you. If you wanted to do this with CSS on a page I would add that quote in as it's own text block. Then just a heading selection that you won't use on the rest of the page. Possibly Header 3... Then you would go into the advanced settings of that page and type the above code in with the edits that you want done! The selection tag for that heading would most likely be h3. 

TESTIMONIALS

You wanted your testimonials to POP and mentioned possibly having a color block behind the testimonial. This is what I found to do this!

“Let’s make this quote POP just for the fun of it, and then learn how the heck we do it! ”
— Tiffany @ Tiffany Kuehl Designs

I added the testimonial into the page using the quote block. I then did the inspect element that I mentioned and found the code that highlighted the area I was looking for. Once I did this I went to the advanced settings for the specific page and applied this code:

<style>
  .sqs-block-quote figure {
    margin: 1em 0;
  background: #b3dad3;
  color: #fff;
  font-size: 14px;
  padding: 15px 15px 15px 15px;
}
</style>

You can then go in and change the font family,font size,  color, padding, etc. You can add the font that you want the main quote in on the template designer. But the size on this code block changes the sizing of the text for the author of the quote. 

LEFT ALIGN BANNER TEXT

As we mentioned before, you can do this via an image. Sometimes this may just be the best option. BUT this is how you will do it with coding!!! 

#page-title, #banner {
    margin-bottom: 0;
    position: relative;
    text-align: left;
}

You can make this change to all of your pages using the style editor. But if you just want to make this change to one specific page you will go to the advanced settings for that page and apply the code above. you can obviously change left to right when you want to as well. 

BLOG SIDEBAR

You mentioned wanting a thinner blog sidebar. I did go in and do this for you already. But wanted to teach you how to change this just in case you wanted a different width. I promise it is super easy!

Go to your blog page from the dashboard like you would any other. But then once you are there you will go to the style editor option on the dashboard. While you are on your blog page you will then see a sidebar section in which you can go in and tweak specific things. The first of which is your width! 

LOOK AT YOU GO!!!

Now you are a coding pro when it comes to tweaking specific things using CSS Coding! Feel free to always play around with it and learn more! When you want to find out how to change specific things that aren't listed here you will simply inspect the element on your computer and find the thing you want to change by making sure it is highlighted and seeing what the code shown when it is looks like. Then just tweak that code! 

It sounds scary sometimes, but trust me! You've got this! 

OTHER QUESTIONS

OPT-IN/FREEBIE

You mentioned wanting to know how to do an opt-in/freebie on your site. I have never personally done this, but here is how I feel it could best be done! 

Your first step is to create a sign up form much like this one. 

You can change the visible appearance of this in the style editor! 

You create this by adding a newsletter block. As you are creating it you will put the text you want on the form on the DISPLAY tab. In the STORAGE tab you will connect it to either your mailchimp account or Google Drive. Then on the ADVANCED tab you choose what you want the actual button that they click to say and the thank you message that you want displayed when they hit submit. 

If you connect it to your mail chimp and have certain mail chimp (paid) packages you can have it set up to automatically send them the freebie when they sign up to the mail chimp list that you have associated with it. 

If you don't want to pay for mail chimp there is a way to do something like this using your website. First you would connect the form to a specific list in mailchimp (or connect to google drive). This will simply gather the emails for the people that submit the form. Then you can do one of two things...

ONE - Simply send the freebies to the people that signed up! 

TWO - You create a page containing these freebies. Once you do this you simply password protect the page and send the people who have signed up a pretty little email with that code! You can do this via newsletter on Mailchimp, or you can create a pretty little canned response in gmail that you send out when you get the new email!

OMG! That's It!!!

I think that covered everything that you mentioned wanting to learn! I will work on the images that you wanted next!