How do I change the background color of blog posts?

I am trying to keep the background of my website a transparent black with white text and change the background of my blog posts to a solid white with black text. Does anyone know how to add custom CSS for this? Any help would be much appreciated. Thanks in advance.

asked Mar 12 '13 at 20:32 by ryanwired 11112

1
1

There is a way, but whatever code you add will be loaded with every single page on your site, whether or not it's needed.

So, the first thing you will have to do is find the unique collection ID for your blog posts, without it you would be styling all of the other pages too.

Finding your blog's ID

  1. Go to your Squarespace Configuration
  2. Select the Content Manager (the 'a' in the left hand navigation)
  3. Select your blog
  4. Look at the address bar in the browser, it'll looks something like: your-site.squarespace.com/config#collectionId=550122bge4b0gg1f828ca1ab&module=content
  5. I've bolded the collection ID in the previous step, find your blogs collection ID and copy it

Adding inline CSS

  1. Switch to Settings (the cog in the left hand navigation)
  2. Select Code Injection
  3. Then add the following into the Header:

 

<style type="text/css">
  body #COLLECTION-ID-GOES-HERE {
    background-color: white;
    color: black;
  }
  body #COLLECTION-ID-GOES-HERE .wrapper {
    background-color: transparent;
  }
</style>

I'm suggesting using transparent on the wrapper so that you only have to set the color once on the body element, but you can just copy the body color there too.

The resulting code would (using the collection ID from previously as an example) look like:

<style type="text/css">
  body #550122bge4b0gg1f828ca1ab {
    background-color: white;
    color: black;
  }
  body #550122bge4b0gg1f828ca1ab .wrapper {
    background-color: transparent;
  }
</style>

Or, linking to a CSS file

If you wanted to change more of the blogs CSS, you might want to upload the CSS as a file. That requires a few more steps, first link to it in the Code Injection > Header:

<link rel="stylesheet" type="text/css" href="/s/mystyles.css" />

Just take the CSS you would have put in the Header block and strip out the <style> tags so it should look like:

body #COLLECTION-ID-GOES-HERE {
  background-color: white;
  color: black;
}
body #COLLECTION-ID-GOES-HERE .wrapper {
  background-color: transparent;
}

Save it as mystyles.css (or whatever you'd prefer) then upload the CSS file:

  1. Start editing either an existing or new text block in a blog post
  2. Select some text (you can delete this afterwards) and add a link
  3. In the pop-up, select the Files tab
  4. Add your CSS file
  5. Save and check the page and the linked CSS file
  6. Go back to the text block and delete the link

There's more about file management in the help article, Uploading and Managing Files.

You can read a lot more about the different methods of adding CSS at Matthew James Taylor's blog: Four methods of adding CSS to HTML.

answered May 27 '13 at 19:38 by neeklamy 2.3k17

link
Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×329
×138
×76
×40
×24

Asked: Mar 12 '13 at 20:32

Seen: 3,076 times

Last updated: Feb 18 at 10:55

Established 2004 Handmade in NYC