Changing the font color on just two pages on my site with Horizon Template

Site URL: http://thehouseofredvelvet.com/memoir

Hello,

I got some awesome code to change the background color, but now I need to change the text color to black so you can read it! 🙂  Does anyone know what that custom code it for just the two pages? Memoir and the blog pages themselves (which is a now unlinked page) Or would I have to do every page individually? 

Thank you. 

Hi,

It will be the same code as @creedon supplied in:

If you use this plugin in chrome you can identify the collection id's of the pages you want to alter: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

So for your current memoir page it is:

#collection-603c26a15e1da817afdb2025 #siteWrapper {
color: black!important;
background-color : red;
}

The "color" property relates to text color.

The "background-color" property to background color.

So if you use the plugin to identify the collection id of each page you need to change, you can then just duplicate the code above, changing the collection id and colors as you see fit for whichever pages you need to alter as per pic below. Once you've installed the plugin if you click the collection number it will copy it to your clipboard.

4 hours ago, ErikaT said:

Hi,

It will be the same code as @creedon supplied in:

If you use this plugin in chrome you can identify the collection id's of the pages you want to alter: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

So for your current memoir page it is:

#collection-603c26a15e1da817afdb2025 #siteWrapper {
color: black!important;
background-color : red;
}

The "color" property relates to text color.

The "background-color" property to background color.

So if you use the plugin to identify the collection id of each page you need to change, you can then just duplicate the code above, changing the collection id and colors as you see fit for whichever pages you need to alter as per pic below. Once you've installed the plugin if you click the collection number it will copy it to your clipboard.

Thank you so much. I am actually changing it to white background. I have some of the text changed to black, but I need ALL the text to black. 

Do you know if there is a way to change this on the thehouseofredvelvet.com/memoirs page as well so it will automatically do it on every new blog post?

Thank you so much for the wonderful help!!

Hi, yes you can add the below which will change all the title links to black text:

.sqs-block-summary-v2 .summary-title a {
    color: black!important;
}

9 hours ago, ErikaT said:

Hi, yes you can add the below which will change all the title links to black text:

.sqs-block-summary-v2 .summary-title a {
    color: black!important;
}

Thank you for this. These are the two pages.

thehouseofredvelvet.com/memoir

thehouseofredvelvet.com/memoirs

It seems to get some of it, but not all of the headings that I have in the blog. I am also trying to figure out how to make the change happen on all of the pages in the blog section memoirs. Which is the one I use to build off of. 

Do you happen to know how to do this? Thank you for your help!

Hi,

Ah didn't realise there were 2 memoir sections 🙂

I'm not too familiar with version 7 templates but if you go to your blog page. Then to Design > Site Styles 

Then click a space inside your blog page, it will allow you to change the font colours there as per below screenshot:

You may not need any code if you change your font colors here. If you still do give me a shout 🙂

Is that 7.1? Unfortunately they don't have a seperate change for Blogs on this one. I believe it is all code. I have this so far: (for both)

#collection-5fe17ac8c70e3835b6f14b1e #siteWrapper {

  background-color : white;
  color : black!important;
  .sqs-block-summary-v2 .summary-title a {
    color: black!important;
}
  
  }
#collection-603c26a15e1da817afdb2025 #siteWrapper {

  background-color : white;
color : black!important;
  .sqs-block-summary-v2 .summary-title a {
    color: black!important;
}
  }

I quickly created a version 7 site, so that screenshot is from v7.

Try removing all the code you mentioned above and replacing with:

//Memoir & Memoirs Background Colour Change
#collection-603c26a15e1da817afdb2025 #siteWrapper,
#collection-5fe17ac8c70e3835b6f14b1e #siteWrapper {
  background-color : white;
}

//Site-Wide Change Various Text to Black
h1 a, p *, h2, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black!important;}

Some of that worked, but I am still missing the headings on the Memoirs page, and Memoir. I added the color: black; to include the regular text. I had to take out the important on the bottom because it changed the link color in the footer to black. I tried adding the title code that I had before for the Memoir page, but for some reason it didn't get it.

Here is what I have:

//Memoir & Memoirs Background Colour Change
#collection-603c26a15e1da817afdb2025 #siteWrapper,
#collection-5fe17ac8c70e3835b6f14b1e #siteWrapper {
  background-color : white;
  color : black
}

//Site-Wide Change Various Text to Black
h1 a, p *, h2, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black;} 
 

Actually just added the previous code I had in there, and now the Memoir page is good. 

But the 

thehouseofredvelvet.com/memoirs 

still is missing the tag links and titles for some reason. 

Also, I am wondering because that is the Blog page  in Squarespace (the one I am working off of), that would matter. I would like to get it where the individual blog pages were all white background also. Hmm

If you want all blog pages to have a white background, go to your blog page settings and insert the below code into the "blog item code injection". And we'll try and important at the end of the color property see if that does the trick:

#siteWrapper {
  background-color : white;
  color : black
}

h1 a, p *, h2, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black!important}

37 minutes ago, ErikaT said:

If you want all blog pages to have a white background, go to your blog page settings and insert the below code into the "blog item code injection". And we'll try and important at the end of the color property see if that does the trick:

#siteWrapper {
  background-color : white;
  color : black
}

h1 a, p *, h2, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black!important}

There seems to be some changes unless that is from the other code, but the pages are still black. Hmm.

Thank you so much for your help by the way. I really appreciate it.

Actually I out it in the Custom CSS and it turned white! But, I am missing the headings on the individual blog pages. Shows up white (like for example on :

https://www.thehouseofredvelvet.com/memoirs/flowers-of-evil

But they work on the other ones. Strange! 

I am speaking too soon! It is HEADING 3 that isn't showing up. I changed it to Heading 2 for now so you can see it, but I need to add Heading 3 the capability.

The only thing that seems missing also is the word Comments below.

//Memoir & Memoirs Background Colour Change
#collection-603c26a15e1da817afdb2025 #siteWrapper,
#collection-5fe17ac8c70e3835b6f14b1e #siteWrapper {
  background-color : white;
  color : black
}

//Site-Wide Change Various Text to Black
h1 a, p *, h2, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black;} 
#collection-5fe17ac8c70e3835b6f14b1e #siteWrapper {

  background-color : white;
  color : black!important;
  .sqs-block-summary-v2 .summary-title a {
    color: black!important;
}
  
  }
#collection-603c26a15e1da817afdb2025 #siteWrapper {

  background-color : white;
color : black!important;
  .sqs-block-summary-v2 .summary-title a {
    color: black!important;
}
  }
#siteWrapper {
  background-color : white;
  color : black
}

h1 a, p *, h2, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black!important}

Above is WHAT I HAVE in Custom CSS

Just add a h3 into the bottom line so:

h1 a, p *, h2, h3, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black!important}

47 minutes ago, ErikaT said:

Just add a h3 into the bottom line so:

h1 a, p *, h2, h3, .entry-header a, .entry-source, .entry-comments, .sqs-block-summary-v2 .summary-metadata-item {
  color: black!important}

Thank you so much. This fixed the last bits. I am missing the Social share button that is right below the Tagged: bit on the individual blog posts. Not sure what it is called, but it highlights so you can tweet it, or pin it,etc.

Would you know how to fix this? Thank you!!

Actually I made a mistake. This changed my whole site white now. 

I may have to see if this can go into the Blog pages only.

Yup just add the relevant code into the blog code injection sections 🙂

https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

49 minutes ago, thehouseofredvelvet said:

Thank you so much. This fixed the last bits. I am missing the Social share button that is right below the Tagged: bit on the individual blog posts. Not sure what it is called, but it highlights so you can tweet it, or pin it,etc.

Would you know how to fix this? Thank you!!

Which bit is the social share? If you can direct me to a page with it on 🙂

5 minutes ago, ErikaT said:

Yup just add the relevant code into the blog code injection sections 🙂

https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

For some reason, when I put that code in the Blog Item Injection, it shows up on the bottom of the page written out and the page is still black. 

https://www.thehouseofredvelvet.com/memoirs/two-ways-to-support-mental-health

11 minutes ago, ErikaT said:

Which bit is the social share? If you can direct me to a page with it on 🙂

Yes, same page as last post (because you can see it now.)

https://www.thehouseofredvelvet.com/memoirs/two-ways-to-support-mental-health

The Likes and Share button there by the Comments section.

9 hours ago, thehouseofredvelvet said:

For some reason, when I put that code in the Blog Item Injection, it shows up on the bottom of the page written out and the page is still black. 

https://www.thehouseofredvelvet.com/memoirs/two-ways-to-support-mental-health

Ah yes, I forgot to mention injection needs encapsulated in style attributes.

So if you delete all the custom code we've added and add the below into the blog item injection and blog header injection - below code is a different way of doing it, there are lots of ways:

<style>
#siteWrapper {
  background-color : white!important;}

#mainNavWrapper nav a, #mainNavWrapper nav a:visited, #mainNavWrapper nav label {
    color: #ddd9d9!important
}

body * {
color: black!important;}
</style>

6 hours ago, ErikaT said:

Ah yes, I forgot to mention injection needs encapsulated in style attributes.

So if you delete all the custom code we've added and add the below into the blog item injection and blog header injection - below code is a different way of doing it, there are lots of ways:

<style>
#siteWrapper {
  background-color : white!important;}

#mainNavWrapper nav a, #mainNavWrapper nav a:visited, #mainNavWrapper nav label {
    color: #ddd9d9!important
}

body * {
color: black!important;}
</style>

This did it. Except is there a way to exclude the pre-footer? It turned that text black.

https://www.thehouseofredvelvet.com/memoirs/welcome

Thank you. I am learning a lot. Appreciate your help.

as well as the footer...