Changing the colour theme of individual blog posts?

Hi all. I am wondering if I could apply a different colour theme to one individual blog post without changing the colour theme to all the blogs? Can this be done through a code block or custom CSS? Thank you.

Hi. Possibile with custom CSS. Can you share link to a post? We can help easier

On 5/21/2021 at 7:28 PM, tuanphan said:

Hi. Possibile with custom CSS. Can you share link to a post? We can help easier

https://megalodon-leopard-hb9r.squarespace.com/suspension/crown-major

Hi @tuanphan, here's the link to one of the blog posts.

At the moment I have a packshot image with a white background, which works fine with the current colour theme.

But I have some other images that has a dark/black background, so I need to be able to change the colour theme of an individual blog post.

Thank you in advance!

15 hours ago, caravaggio said:

https://megalodon-leopard-hb9r.squarespace.com/suspension/crown-major

 

Hi @tuanphan, here's the link to one of the blog posts.

At the moment I have a packshot image with a white background, which works fine with the current colour theme.

But I have some other images that has a dark/black background, so I need to be able to change the colour theme of an individual blog post.

Thank you in advance!

can you share link to blog with dark background image?

8 minutes ago, tuanphan said:

can you share link to blog with dark background image?

I've created a test page:
https://megalodon-leopard-hb9r.squarespace.com/testblog/test

password: thankyou

8 hours ago, caravaggio said:

I've created a test page:
https://megalodon-leopard-hb9r.squarespace.com/testblog/test

password: thankyou

Thank. Now you want, this page, change

• background color to black
• text color to white
• pagination title to white

is this right?

4 minutes ago, tuanphan said:

Thank. Now you want, this page, change

• background color to black
• text color to white
• pagination title to white

is this right?

• background colour: black
• text color: white
• navigation bar: black
• navigation text: white
• footer background: white
• footer text: black

Bascially the opposite of the current colour theme.
I have a dark theme going so I'm wondering if I could just apply that theme?

On 5/26/2021 at 4:58 PM, caravaggio said:

• background colour: black
• text color: white
• navigation bar: black
• navigation text: white
• footer background: white
• footer text: black

Bascially the opposite of the current colour theme.
I have a dark theme going so I'm wondering if I could just apply that theme?

Add to Testblog Page Header

<style>
  body .section-background {
    background-color: black !important;
}
header#header * {
    color: white;
}
header#header a.btn {
    border: 1px solid white;
}
.content-wrapper * {
    color: white !important;
}
section.item-pagination.item-pagination--prev-next {
    background: black;
}
section.item-pagination.item-pagination--prev-next * {
    color: white !important;
    stroke: white;
}
footer.sections .section-background {
    background: white !important;
}
footer.sections * {
    color: black !important;
    stroke: black !Important;
}
</style>

Thanks @tuanphan 😊 I will give it a go.

On 6/8/2021 at 11:41 AM, caravaggio said:

Thanks @tuanphan 😊 I will give it a go.

Do you need fix these?

Site URL – https://megalodon-leopard-hb9r.squarespace.com/

1. (Mobile-Promotional popup) Center title?

2. (Tablet-Overlay) Align socials/button/menu?

3. (Tablet-Contact) Stacked map/text?

4. (Mobile-Projects) Page looks long. Want to add a back to top button?

On 6/13/2021 at 11:17 AM, tuanphan said:

Do you need fix these?

Site URL – https://megalodon-leopard-hb9r.squarespace.com/

1. (Mobile-Promotional popup) Center title?

2. (Tablet-Overlay) Align socials/button/menu?

3. (Tablet-Contact) Stacked map/text?

4. (Mobile-Projects) Page looks long. Want to add a back to top button?

Yes! If you could help me with those that would be amazing!

Thanks so much @tuanphan 🥰

21 hours ago, caravaggio said:

Yes! If you could help me with those that would be amazing!

Thanks so much @tuanphan 🥰

Q1. Can you enable promotional popup?

Q2. 3. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* align overlay icons */
.header-menu-actions {
    padding-left: 3vw;
}
/* contact page stacked title map */
div#page-section-5fe41a059034a3052e2453e0>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
div#page-section-5fe41a059034a3052e2453e0>.row .col {
    width: 100%;
}
}

Q4. Follow this guide.