Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

Recommended Posts

  • 0

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.

collection.JPG

Link to comment
  • 0
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.

collection.JPG

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!!

Link to comment
  • 0
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!

Link to comment
  • 0

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:

 

fonts.JPG

Link to comment
  • 0

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

Link to comment
  • 0

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

 

 

Edited by ErikaT
Link to comment
  • 0

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

Link to comment
  • 0

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

Link to comment
  • 0

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}

Link to comment
  • 0

 

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.

Link to comment
  • 0

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

Link to comment
  • 0
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!!

Link to comment
  • 0
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 🙂

Link to comment
  • 0
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

Link to comment
  • 0
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>

Link to comment
  • 0
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.

Link to comment
  • 0

Ah yes the footer, added the full code again below with footer at bottom. I can't recall if your footer was white or not, if not white then just replace white with:  #ddd9d9, which is the color of your nav items 🙂

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

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

body * {
color: black!important;}

#preFooter *, footer * {
    color: white!important
}

</style>

Edited by ErikaT
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...