Enhance Your Squarespace Website: 10+ Super Useful Squarespace CSS Plugins

In the ever-evolving world of web design, Squarespace has emerged as a powerful platform for creating stunning websites with ease. While Squarespace offers a user-friendly interface and a plethora of built-in features, there are times when you want to take your website customization to the next level. That's where CSS plugins come into play. In this post, we'll explore 10+ super useful Squarespace CSS plugins that can help you enhance the aesthetics and functionality of your website.

Image Block - Zoom (Make Bigger) Hover

This custom Squarespace CSS code adds zoom on hover in Squarespace image block.


// IMAGE BLOCK - ZOOM HOVER - GHOST //


.sqs-block-image:hover {

  scale: 1.5 !important;

  transition: all 0.2s ease-in-out !important;

}


.sqs-block-image {

  transition: all 0.2s ease-in-out !important;

}


Scrolling Announcement Bar

This custom Squarespace CSS code adds infinite loop in Squarespace announcement bar.


// SCROLLING ANNOUNCEMENT BAR TEXT - GHOST PLUGINS //


@bar-scrolling-speed: 20s;

@bar-pause-on-hover: paused; // use running to turn off pause on hover


@bar-padding: 5px;

@bar-x-close-background: #000;


@bar-hyperlink-line: none; // use underline to show hyperlink line


/* --- Do Not Edit Below ---- */


.sqs-announcement-bar { padding: @bar-padding; } .sqs-announcement-bar-text a { text-decoration: @bar-hyperlink-line !important; text-decoration-line: @bar-hyperlink-line !important; } .sqs-announcement-bar .sqs-announcement-bar-close { background-color: @bar-x-close-background !important; z-index: 9 !important; height: 100%; } #announcement-bar-text-inner-id p:hover { animation-play-state: @bar-pause-on-hover; } #announcement-bar-text-inner-id p { display: inline-block; will-change: transform; animation: scrolling-announcement @bar-scrolling-speed linear infinite; padding-left: 100% !important; width: max-content; inline-size: max-content; height: max-content; block-size: max-content; } @keyframes scrolling-announcement { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }


// SCROLLING ANNOUNCEMENT BAR TEXT - GHOST PLUGINS //


Header line

This Squarespace code snippet adds a simple straight line to your header.


#header { box-shadow: 0px 0px 1px 0px rgba(170,170,170,1) !important; }


Image Block - Solid Shadow Style

By this plugin you can add a solid shadow and border style to the image block.


// IMAGE BLOCK - SOLID BOX SHADOW STYLE - GHOST //


.sqs-block-image .design-layout-fluid .sqs-image {

  border: 1px solid #000 !important;

  border-radius: 10px !important;

  box-shadow: 5px 5px #000 !important;

}


Gradient backgrounds

Using a gradient background can add a captivating touch to your Squarespace website, providing a fantastic way to showcase your brand colors prominently on your homepage or about us section!


.site-wrapper {

    background: linear-gradient(-45deg, #ff576a, #b81bef) !important;

}

.page-section, .section-background {

    background: transparent !important;

}


2 Navigation Buttons

By this plugin you can turn your last two links into buttons.


// 2 Navigation Buttons 7.1 - Ghost //


@link-for-first-button: 4; // add the number of the link to turn it into a button - example: if it's the 4th link add 4

@link-for-second-button: 5; // add the number of the link to turn it into a button


@2-nav-buttons-background: #000;

@2-nav-buttons-link-color: #fff;

@2-nav-buttons-font-size: 14px;

@2-nav-buttons-padding: 10px 5px;


@2-nav-buttons-width: 120px;

@2-nav-buttons-border: 1px solid #000;

@2-nav-buttons-radius: 5px;


/* ---- Do Not Edit Below ---- */


.header-nav-item:nth-child(@link-for-first-button) a, .header-nav-item:nth-child(@link-for-second-button) a { font-size: @2-nav-buttons-font-size; background: @2-nav-buttons-background !important; color: @2-nav-buttons-link-color !important; width: @2-nav-buttons-width !important; border: @2-nav-buttons-border !important; border-radius: @2-nav-buttons-radius !important; text-align: center !important; } .header-nav-item a { padding: @2-nav-buttons-padding !important; }


// 2 Navigation Buttons 7.1 - Ghost //



Solid shadow button

Get a new style on your buttons. Get even more button styles with this plugin.


.sqs-block-button .sqs-block-button-element--medium {       

  box-shadow: 5px 5px #FF6969;   

  transition: all ease-in .05s; 

}  

.sqs-block-button .sqs-block-button-element--medium:active {   

  box-shadow: none;   

  transform: translateY(4px) !important;   

  transition: all ease-in .05s; 

}



Scrolling Block - Tilted Style

Thanks to this plugin you can add a tilted and angled style to the Scrolling Block.


// SCROLLING BLOCK - TILT STYLE - GHOST PLUGINS //


.marquee-block {

  transform: rotate(-5deg) !important;

}


Simple Blog Post Style

Give your blog posts in the Basic Grid Blog layout a modern look.


.blog-basic-grid--container { background-color: #ffffff; } .blog-basic-grid--text { width: 90% !important; padding-bottom: 40px; }


Rotate Blocks

Rotate any block on your Squarespace site.


BLOCK-ID {

  transform: rotate(20deg);

}


Top and Bottom Site Header Border

Add a simple border to the top and bottom of the site header.


.header-announcement-bar-wrapper {

  border-top: 1px solid #FFF;

  border-bottom: 1px solid #FFF;

  margin: 20px;

  width: auto !important;

}



Conclusion:

Squarespace offers a fantastic platform for creating beautiful websites, and with the addition of these super useful CSS plugins, you can take your website customization to new heights. Experiment with these plugins, mix and match them to suit your brand's personality, and watch as your Squarespace website transforms into a visually stunning and highly functional online presence. Embrace the power of CSS customization and make your Squarespace site truly yours.

Credits:

Ghost Plugins , Spark Plugin