Top 10 favorite Squarespace 7.0 hacks - VOL 2!

Now, if you didn’t have a change to read the first post no worries at all, head on over there and have a read first because we share some tips and tricks on how to implement your code which will be a HUGE time saver for you!

Without further ado, here’s our top 10 favorite hacks vol 2!

1. CHANGE AN INDEX PAGE BACKGROUND COLOR

Super nice bit of code if you want to change just one background and not the whole site! Get your #SectionID by clicking on the cog next to the page name and under the General tab look down till you see URL Slug.

//Change Index Page Background Color

#SectionID {

background-color: #000000;

}

//----------//

2. MAKE A LINE BLOCK IN YOUR FOOTER FULL WIDTH

Sometimes you just don’t want the padding on a line block, here’s how to remove it! (Change up the border thickness for added customization!)

///Horizontal Line Block Full Width - Footer

footer {

border-top: 2px solid #000000;

margin: auto;

width: 100%;

}

//----------//

3. FULLY CUSTOMIZE NEWSLETTER BLOCK

This is one of our all-time favorite things to do because we think everyone can all agree that the standard newsletter block is pretty blah. This snippet of code will allow you to change everything about the newsletter block! (Also added a bit at the end to further customize for mobile!)

///Newsletter Block Formatting

.newsletter-block .newsletter-form-field-element {

font-family: "apres" !important;

font-weight: 200;

font-size: 12.5px;

letter-spacing: 0.9px;

text-transform: none;

border-radius: 0px !important;

background: transparent !important;

border-top: 0px !important;

border-left: 0px !important;

border-right: 0px !important;

border-bottom: solid 2px #d3364a !important;

}

.newsletter-block .newsletter-form-header-title {

font-size: 60px;

line-height: 60px;

letter-spacing: 2px;

font-family: 'Futura' !important;

text-align: center;

text-transform: none;

}

.newsletter-form-field-element::-webkit-input-placeholder {

color: #000 !important;

}

.newsletter-form-button {

background: #000 !important;

padding: 11px 30px 14px 30px !important;

border-radius: 0px !important;

border-color: #d3364a !important;

text-transform: uppercase;

font-size: 13px !important;

font-family: Apres !important;

font-weight: 600 !important;

letter-spacing: 0.2em;

color: #fff !important;

}

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

.Footer .newsletter-form-field-element {

background: none !important;

border-top: 0px !important;

border-left: 0px !important;

border-right: 0px !important;

border-radius: 0px !important;

border-bottom: solid 1px #ffffff !important;

}

//----------//

4. LEFT AND RIGHT JUSTIFY TEXT BLOCKS

In the event you want to left and right justify your text blocks, you can use the following code. Replace the h3 tags for whichever fonts you want to justify, or add multiples. If you want to target certain pages only, just add the section ID or the collection number!

///Left + Right Justify Text

h3 {

text-align: justify !important;

}

//----------//

5. FULLY CUSTOMIZE LIGHTBOX FORM

Another REALLY fun snippet of code, fully customize your lightbox forms for something so much more branded and fun!

///Change Lightbox Form

//Text Change

.lightbox-content .form-wrapper .lightbox-content .form-title .lightbox-close {

color: white !important;

}

//Form Field Changes

.lightbox-content .form-wrapper .field-list .field .field-element {

border:none;

border-bottom: 2px solid;

border-color: #fff;

background: #d4364b;

}

//Background Color Change

.lightbox-content {

background: #d4364b !important;

}

//Submit Button Change

.lightbox-content .form-wrapper input[type="submit"] {

display: block;

background: #fff;

color: rgba(242,240,241,0.4);

border: solid;

font-family: 'apres';

font-size: 12px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: .2em;

padding: 10px 50px;

border-radius: none !important;

border-width: 1px;

border-color: rgba(242,240,241,0.9);

cursor: pointer;

color: #000;

}

//Lightbox Open Button Change

.lightbox-handle.sqs-system-button {

font-size: 12px;

line-height: 17px;

}

//Lightbox Open Button Change MOBILE ONLY

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

.lightbox-handle.sqs-system-button {

width: 82% !important;

line-height: 20px;

}

//----------//

6. MAKE THE LAST ITEM IN THE NAV A BUTTON

Some of the templates within SQS will allow you to make the last item in the nav a button and some don’t. Here’s the code if your template doesn’t offer it!

///Make Last Item In Nav Bar a Button

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type {

background-color: #d0b569;

padding: 10px 20px;

border-radius: 0px;

color: #ffffff;

}

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type:hover {

background-color: #ddc68e;

color: #ffffff!important;

}

//----------//

7. CUSTOMIZE HEADER FONT IN COVER PAGE

For this code, you’ll have to go into the page advanced settings by clicking on the cog next to the page name, navigating down to advanced and copy and paste the code there. You can also do this for the body copy by replacing the h1 tag with p!

<style>

h1 {

font-family: "BlackerDisplay-medium" !important;

}

</style>

8. REMOVE HYPHENS FROM MOBILE

No one and we mean NO ONE likes looking at a website on their phone and all the text is hyphenating. It’s super annoying, here’s the code to get rid of that!

///Remove Hyphens From Mobile

p, h1, h2, h3, {

-webkit-hyphens: manual !important;

-moz-hyphens: manual !important;

-ms-hyphens: manual !important;

hyphens: manual !important;

}

//----------//

9. TURN A BODY FONT LINK INTO A BUTTON

In the event you don’t want to use a button block and you need to turn a link within your body copy into a button, now you can!

//Turn A Body Font Link Into A Button

#block-edac6dc7a8718da66f51 {

a {

border-width: 0px;

border-radius: 0px;

border-style: none;

border-color: #none;

background-color: #000;

padding: 13px 26px;

font-family: apres !important;

font-size: 13px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: .2em;

-webkit-transition: 0.1s background-color linear, 0.1s color linear;

-moz-transition: 0.1s background-color linear, 0.1s color linear;

-o-transition: 0.1s background-color linear, 0.1s color linear;

transition: 0.1s background-color linear, 0.1s color linear;

}

#block-edac6dc7a8718da66f51 {

a:hover {

background-color: rgba(255,255,255,.8);

color: #000;

-webkit-transition: all .4s ease;

-moz-transition: all .4s ease;

-o-transition: all .4s ease;

}

//----------//

10. CHANGE LINK HOVER COLOR IN FOOTER ONLY

Lastly, we love this snippet of code because it allows us to further customize a site for my clients to match their branded colors!

///Change Link Hover Color Footer

.Footer

a:hover {

color: #a8aeb1 !important;

}

//----------//

And that’s it! Hope you all have as much fun customizing your Squarespace sites as we do!

~

Cheers,

Amy.

Top 10 favorite Squarespace 7.0 hacks - VOL 2!

DESIGN