Change background and font colour on Contact Us page

[jneillco]

I have just added a new page using Contact Us template. (See below.) How do I change the background colour and/or font colour? I am using Narrative theme. Thanks!

[oscprofessional · Accepted solution]

Hello  jneillco,

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

#contact-us main#MainContent {
    background-color: gray;
}
#contact-us h1.section-header__title.h2 {
    color: orange;
}

[Ren7 · Accepted solution]

Hey, there! 

My name is Ren from the Shopify support team, here to help out. Are you looking to change the background color of the font or the entire page? 

To make changes to the font and font background, navigate to your Contact page and select the text button to alternate between text and background and use the colour adjuster to make your selection. Looks like this: 

 If you are referring to the background of the page and how to change the general appearance, you can try navigating to your theme.scss located in the Assets folder of the theme code. Line 292 should be where you can make changes to the form background colours. More details can be found in the answer to a similar question in this post here.

It's also mentioned that if you're looking to completely customized the contact page, we have several app integrations that can help with this! Check out them out.

Let me know how you make out with that! 

[jneillco]

Awesome, worked perfectly. Thank you again!

[Tddandridge]

How can you change the background color and text colr of the message you get after a contact form is submitted in the debut theme?

[KetanKumar]

@Tddandridge 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.form-message--success {
background-color: #f39c12;
    color: #fff;
border-color: #f39c12;
}
}

[Algalsc]

Hi, my site is www.perfectdd.com and I'm trying to change the background color of my About page (Our Story) to #DDD4CB but the code isn't working. Can you please let me know exactly what I need to type at the bottom of theme.scss.liquid please? 

[KetanKumar]

@Algalsc 

Thanks for post

i have chekc this but sorry your store is passoword protect can you please share is.

[Muezart]

How can I change the highlighted background colour ?

[KetanKumar]

@Muezart 

Thanks for post can you please share store url