Changing Background Color for Spotlight version 11.00

Store Design
1

Hello!

I’m using theme Spotlight version 11.00, and I am trying to change the background color across all pages of the website. I changed the theme colors as much as I can, but I still have areas of the background that are still white. How do I change the color to black?

Any help would be greatly appreciated!!

Thanks!

Kelsy

1 Like
2

Hi @Kelsy_1

For the whole pages you can try this one. And if there still other saection didnt turn in to black, would you mind to share your Store URL with password if its protected. Thanks!

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
body.gradient {
    background: black;
}
  • And Save.
  • I hope it help.
  • Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
3

Hey @Kelsy_1

You can try using the above code and if it still doesn’t work for you then can you share your Store URL and Password if enabled so that I can provide you with a proper solution.

4

Hi Ribe_Dagandara!

That totally worked! Unfortunately now you can’t see the text on the products page. How do I change the text color to white?

A million thank yous!!!

Kelsy

1 Like
5

Oh im just guessing, if this wont work would you mind to share your store URL website? you can PM me. You can also share te preview. Thanks!

body.gradient * {
    color: white;
}

Same Instruction.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Try this one.

Same Instruction.

.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in * {
    color: white;
}

It is only for the product page right?

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Oh, also in the collection pages. I check it.

Same Instruction.

ul#product-grid * {
    color: white;
    border-radius: 0px;
}

I take out the white radius also.

Ribe_Dagandara_0-1692634397901.png
Ribe_Dagandara_0-1692634397901.png1210×352 287 KB

If you dont like to take it out then remove the border-radius.

1 Like
8

3 more pages that is not change into white. Please try this one first, if this not working on all pages. Then try the other codes that I give.

Same Instruction.

main#MainContent * {
    color: white;
}
.quantity-popover-container * {
    color: black !important;
}
1 Like
9

Hi!

The codes worked, but I’ve lost the text in the boxes on the product page. Yu can’t see the the Style, quantity, or the other box. Can you help with that too?

Again, a million thank yous! I’m not that literate when it comes to code. LOL

Kelsy

1 Like
10

Yes, i know it would affect. Same Instruction.

quantity-input.quantity * {
    color: black !important;
}
button#ProductSubmitButton-template--20465203052865__main span {
    color: black;
}
.select * {
    color: black !important;
}
11

Hi Ribe!

Unfortunately that didn’t work.

Kelsy