Sidebar css code to change background color in FIVE theme

How and where can I change/add CSS code to make the sidebar have a different background color in the FIVE theme? Also can I change the header title block to have a background color?

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!

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.

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;
}

Thanks for the CSS. Unfortunately neither the header or nav bar code made any changes.

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

Hello,

The site is still in the beta/test location and not public. How can I show it without giving admin privileges?

Thanks

On 11/6/2023 at 10:26 PM, TonyGoedde said:

Hello,

The site is still in the beta/test location and not public. How can I show it without giving admin privileges?

Thanks

You can follow this

This should be able to achieve without giving any stranger access to the site.