Change the background color of the global contact form on Dawn

Store Design

Topic summary

Goal: restyle Dawn theme’s contact page to match a dark scheme—page background black (#121212), body text and H1 white (#FFFFFF), “Send” button green (#30E413), and visible outlines around input fields.

Context: Theme settings only affected the lower section; the top/text area couldn’t be styled via the editor. A page URL was shared for reference.

Attempts: Custom CSS was suggested for theme.liquid (before ), first with a contact-page condition and then with section-specific selectors. Editing contact-form.liquid didn’t take effect. Visuals were shared to show expected outcome.

Working solution: Inserting a block in theme.liquid that:

  • Sets the contact section background to #121212.
  • Colors H1 and rich text to #fff for readability.
  • Styles the button’s border/shadow in green (#30E413).
  • Adjusts input fields’ border/shadow (black) for contrast.

Result: The user confirmed the CSS approach resolved the styling needs. Status: resolved; no further action requested.

Summarized with AI on January 2. AI used: gpt-5.
1

Hello, i have troubles to change the background color of the global contact form on Dawn behind the text, you can change the contact background color form on the bottom but not on the top with the text, also i would like to change the color of the title h1, the button send and the square boxes for this green 30E413

For the background in white behind the text i would like to change it for this black 121212 ans put the text in white FFFFFF to be visible, any idea where i can go in the code ? Thank you

Capture d'Ă©cran 2024-03-24 143415.png
Capture d'Ă©cran 2024-03-24 143415.png1890×800 42.8 KB

2

Hello @Sauron6263

Can you share page URL?

3

hello, yes : https://mobilegear.fr/pages/contact

It is the contact page unfortunately on the Dawn theme you can change the color only in the boxes section not the text

4

You want to change background color(30E413) of these boxes?

Like This:

techlyser_web_0-1711293349576.png
techlyser_web_0-1711293349576.png833×389 6.59 KB

5

no, the send button yeah in green like this, not the full boxes in green but just the squares around and the white part of my page where the text is i want to put it in black so full page in black and green button and green rectangles

6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid
    {% if page contains ‘contact’ %}

.field:before{ box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) #000 !important; } .field:after{ border: .1rem solid #000 !important; box-shadow: 0 0 0 var(--inputs-border-width) rgb(14 13 13 / 96%) !important; } .button:before{ box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) #30E413 !important; } .button:after{ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18,18,18, calc(1 - 1.0 )), 0 0 0 var(--buttons-border- width) #30E413 !important; } section#shopify-section-template--21240830656861__main { background: #121212 !important; } h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in { color: #fff !important; } .rte.scroll-trigger.animate--slide-in { color: #fff !important; }

{% endif %}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

7

thx for your reply, i tried just added before body at the end of theme.liu=quid but this is not changing anything on the contact page

Capture d'Ă©cran 2024-03-24 183520.png
Capture d'Ă©cran 2024-03-24 183520.png1467×781 45 KB

Capture d'Ă©cran 2024-03-24 183616.png
Capture d'Ă©cran 2024-03-24 183616.png1243×676 29.4 KB

8

remove all code and apply this

#shopify-section-template--21240830656861__main .field:before{ box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) #000 !important; } #shopify-section-template--21240830656861__main .field:after{ border: .1rem solid #000 !important; box-shadow: 0 0 0 var(--inputs-border-width) rgb(14 13 13 / 96%) !important; } #shopify-section-template--21240830656861__main .button:before{ box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) #30E413 !important; } #shopify-section-template--21240830656861__main .button:after{ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18,18,18, calc(1 - 1.0 )), 0 0 0 var(--buttons-border-width) #30E413 !important; } section#shopify-section-template--21240830656861__main { background: #121212 !important; } #shopify-section-template--21240830656861__main h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in { color: #fff !important; } #shopify-section-template--21240830656861__main .rte.scroll-trigger.animate--slide-in { color: #fff !important; }
9

i also tried to add the code on contact-form.liquid but same no changes

10

see

techlyser_web_0-1711298665409.png
techlyser_web_0-1711298665409.png727×469 15.1 KB

techlyser_web_1-1711298707826.png
techlyser_web_1-1711298707826.png857×447 21.8 KB

11

remove all code and add this

.field:before{ box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) #000 !important; } .field:after{ border: .1rem solid #000 !important; box-shadow: 0 0 0 var(--inputs-border-width) rgb(14 13 13 / 96%) !important; } .button:before{ box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) #30E413 !important; } .button:after{ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18,18,18, calc(1 - 1.0 )), 0 0 0 var(--buttons-border-width) #30E413 !important; } section#shopify-section-template--21240830656861__main { background: #121212 !important; } h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in { color: #fff !important; } .rte.scroll-trigger.animate--slide-in { color: #fff !important; }
1 Like
12

thx working !