Jump to content

Adding 2 CSS Codes

By ShanHailey, in Customize with code

Go to solution Solved by Caroline_Smith,

Recommended Posts

ShanHailey Level 2

ShanHailey

Posted
Posted

Hi,

Hoping for help. I'm having trouble adding two CSS Codes. Only the first code works. When I add second code the change shows temporarily, but does not save permanently for some reason.  1st code is to freeze header, 2nd code is to add transparent color behind text on a page (this is what I've been using below):

 

/* Fixed Header */
.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}
.Content-outer {
  margin-top: 50px;
}
#block-0db31487a4910b9a8f73 {
background-color: #802a;
padding: 0px;
text-align: center;
}

Link to comment
  • Replies 6
  • Views 366
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ShanHailey
ShanHailey

Wow, it finally seems to have worked. Thank you so much for your assistance. Have a wonderful evening. -Shannon

Posted Images

ShanHailey Level 2

ShanHailey

Posted
  • Author
Posted

Hi Caroline, thanks so much your reply! So I attached a screenshot of the page I need help with here. When adding the 2nd code in Design, CSS it appears as though the transparent background will work (as displayed in photo). However, once I exit it doesn't actually save this change.

-Shannon

Custom CSS Screenshot- Transparent background.PNG

Link to comment
  • Solution
Caroline_Smith Level 5

Caroline_Smith

Posted
  • Solution
Posted

I'm not sure what's happening, but it looks like when your code is applied, there is an unnecessary space that is inserted (see attached picture). I would try a different way of setting the background color using an rgb or rgba value. Here is what those two options look like (you'll need to play around with the opacity value .6 until you're happy with it): 

#block-0db31487a4910b9a8f73 {
  background-color: rgba(136, 0, 34, .6);
  padding: 0px;
  text-align: center;
}

#block-0db31487a4910b9a8f73 {
  background-color: rgb(136, 0, 34, .6);
  padding: 0px;
  text-align: center;
}

 

 

 

Screenshot_111.png

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources