How do I change colors on various pages using CSS code?

[Lewcidity]

Hi, I am seriously losing my mind and getting really frustrated with all the colours I need to change and the lack of ease to do so.

I have already done the whole "theme colour maker" thing and have applied it where it allows me to but there are still sooo many pages that need their colours changing with no option to do this through the original means.

I understand I have to now use the css code to change these pages how I want them to look (I'm not really sure why it has to be this difficult to just change colours) but I cant seem to find a solution that changes everything I need.

I have followed some tutorials on how to change the back ground and text colours but then that doesn't change the internal hyperlink text colours, buttons, button edges, form fields and their texts and all that stuff.

Lets take the login page as an example.

My whole theme is black background with red text, outlines etc.

For me to change the colours via css it looks to me like i need a piece of code for the "login", form field main, form field outline, form field text, forgotten password text, sign in box main, sign in box outline, sign in box text, create account text and background main.

Honestly, if anyone could help me with this and how to proceed with other pages like this it would be such an amazing help.

[Made4uo-Ribe]

Hi @Lewcidity 

Maybe I can help. 😅 Would you mind to share your Store URL website? with password if its protected. Thanks! And please let me know which pages youll like to change and what color? 

[Lewcidity]

Hi @Made4uo-Ribe,

Thank you for the response.

the URL is: www.onlyomorfia.com

password: Shopify1234

When you see the homepage you'll understand the vibe I'm going for.

I need everything that isn't black & red to follow suit. Black backgrounds with red text. Anything that is some kind of box such as a form field or button i would like red text, black main colour then outlined in red again. The red i am using is #EC0000.

Thank you for your help.

[Made4uo-Ribe · Accepted solution]

Thank you for the information. Try this one. 

• 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:

div#shopify-section-template--16244819263646__banner * {
    background: black;
    color: #EC0000;
}
div#shopify-section-template--16244819263646__product-grid * {
    background: black;
    color: #EC0000;
}
div#shopify-section-template--16244819230878__cart-items {
    background: black;
}
.cart__warnings * {
    color: #EC0000;
}
a.button {
    border: 1px solid #EC0000;
}

• And Save.

i hope it help. 

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

[Lewcidity]

Thank you for this although some things still remain unfixed.

FIXED:

UNFIXED:

- POLICY PAGES

Do i just need to paste the code you provided to another place to apply the settings?

Thank you.

[Made4uo-Ribe]

This is for the 1st and 2nd image unfixed. The 3rd image I cant edit that one. Its not allowed to edit base by shopify. 

Same Instruction.

div#shopify-section-template--16244819624094__main {
    background: black;
}
div#shopify-section-template--16244819624094__main * {
    color: #EC0000;
}
.customer button:after {
    border: 1px solid #EC0000;
}
section#shopify-section-template--16244819460254__main {
    background: black;
}
section#shopify-section-template--16244819460254__main * {
    color: #EC0000;
}

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