Customize the Squarespace Announcement Bar | AJM Learn

Описание: Customize the announcement bar with drop shadows, gradients, and custom bold font colors.

Note! The CSS in the original post and below has been updated to include more than what's in this video :)

Original post:
https://ajmexperience.com/learn-posts...

For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn

Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...

Get our full CSS Library:
https://www.ajmexperience.com/squares...

——————

HERE’S THE CSS:

// ADD A DROP SHADOW //
.sqs-announcement-bar {
box-shadow: 1px 4px 6px rgba(0,0,0,0.2) }

// ADD A GRADIENT FILL //
.sqs-announcement-bar {
background: radial-gradient(circle, #7cccbd, #319aab) !important; }

// CHANGE THE BOLD COLOR //
.sqs-announcement-bar p strong {
color: #ffffff !important; }

// REMOVE THE X //
.sqs-announcement-bar-close {
display: none; }

// RIGHT ALIGN THE TEXT //
.sqs-announcement-bar p {
text-align: right;
padding-right: 30px; }

// MAKE A LINK A BUTTON //
.sqs-announcement-bar em {
font-size: 12px;
padding: 5px 16px !important;
color: #353640;
border-radius: 10px;
background: #E9F7E7;
font-style: normal !important;
box-shadow: 2px 2px 5px rgba(0,0,0,.3) }

// REMOVE THE UNDERLINE //
.sqs-announcement-bar a {
text-decoration: none !important; }

// ADD A DROP SHADOW //
.sqs-announcement-bar {
box-shadow: 0px 2px 5px rgba(0,0,0,.4) }

——————

AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm

Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.