Jump to content

Sidebar css code to change background color in FIVE theme

Recommended Posts

  • Replies 8
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

Hi @TonyGoedde!

FIVE is a theme I haven't used, but I pulled up the demo to figure out some code to get your started. 

#sidebar-one-blocks {
    background: lightgray;
    padding: 20px
}

Add the above block to your CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor 

You don't have to include the padding line, but it might look nicer if you don't want the text touching the edges of the background. You can change lightgray to the color code you wanted.

Note that this will likely affect the sidebar on the blog page and the individual posts page. We can figure out an adjustment if that wasn't what you were hoping for.

 

I am not quite sure what you meant regarding the header title block. If you could explain more or point out exactly what you are hoping for, I may be able to help more.

 

Also if you have a link to the website, that would make it easier as well.

 

Hope this helps!

Daniel Rodrigues | Excito LLC
Squarespace Web Design for Photographers & Creatives
🌐 https://www.excitollc.com/ | ✉ Contact Me: daniel@excitollc.com
💡 Squarespace Enthusiast | 📖 Squarespace Design Blog for Photographers
🤝 Always happy to help and collaborate! Connect with me on LinkedIn.

Link to comment

Thank you so much! That worked and was a simple solution that should be part of the standard theme customization.

For the header block color, that is to make the area behind the headers be a color to make them stand out better. See attached screen capture of the site we are replacing. We are going from SS V5 to SS V7 and lots of customization features are gone in V7.

I'd like to be able to make the menu bar like the V5 look too with the live page showing up with a rollover of the orange. Also seen on the screen capture.

Screenshot 2023-10-26 at 10.48.13 AM.png

Link to comment

Hey @TonyGoedde!

 

For the header, you have multiple options. The first option is just the title like you showed in the screenshot. If you want the title and date, use the second option. I added padding again if you want it left-aligned, so it doesn't touch the edge. The last `text-align` line makes it centered like in the screenshot, but you can remove that line, if you want to keep it aligned to the left.

/* For only the title */
h1.entry-title {
    background: gainsboro;
}
/* For the title and the date */
.post header {
    background: gainsboro;
    padding: 15px;
    /* text-align only if you want it centered */
    text-align: center;
}

 

Regarding the header. There are a number of pieces, so only include what you need. There is the navigation background. There there are three different types of orange modifiers, with the third option being what is in the screenshot. The last piece is for your navigation, if you want to change the background or the active box for mobile.

/* Navigation background */
div#navigation-top {
    background: gainsboro;
}

/* Option 1: For small orange box; */
div#navigation-top li.active-link {
    background: orange;
}

/* Option 2: For orange text; */
div#navigation-top li.active-link a {
    color: orange !important;
}

/* Option 3: For full height orange background box; */
div#navigation-top {
    overflow: hidden;
}
div#navigation-top li.active-link {
    position: relative;
}
div#navigation-top li.active-link:before {
    position: absolute;
    top: -100px;
    bottom: -100px;
    content: "";
    background: orange;
    width: 100%;
    z-index: 1;
}
div#navigation-top li.active-link a {
    position: relative;
    z-index: 2;
}

/* For mobile navigation */
#mobile-navigation {
    background: gainsboro;
}
#mobile-navigation li.active-link {
    background: orange;
}

 

Daniel Rodrigues | Excito LLC
Squarespace Web Design for Photographers & Creatives
🌐 https://www.excitollc.com/ | ✉ Contact Me: daniel@excitollc.com
💡 Squarespace Enthusiast | 📖 Squarespace Design Blog for Photographers
🤝 Always happy to help and collaborate! Connect with me on LinkedIn.

Link to comment

Hey @TonyGoedde! Could you share a link to your website so I can debug why the code didn’t make any changes?

Daniel Rodrigues | Excito LLC
Squarespace Web Design for Photographers & Creatives
🌐 https://www.excitollc.com/ | ✉ Contact Me: daniel@excitollc.com
💡 Squarespace Enthusiast | 📖 Squarespace Design Blog for Photographers
🤝 Always happy to help and collaborate! Connect with me on LinkedIn.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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