Change Contact Page Font Color (White on white = illegible)

Technical Q&A
1

Hi Shopify Community,

On my shopify page www.strawhataerial.com (password is: LawnmowerMan2) I have changed the theme text color to white for contrast with the dark background. But on the contact page, the text is located inside the text boxes. This is an issue because the text is white on white and customers won’t see it.

I see two possible solutions. One is somehow move the text to outside and above the box so the white text is contrasted against the dark background. Or two, change the text color to black.

Does anybody know how to do either? I have a little experience mucking around with the codes to get things how I like it, but I don’t know how to do this. Thanks!

Capture.PNG
Capture.PNG1828×1204 106 KB

Here is the code for this page. I modified one thig already which was to delete the phone number box:


  # {{ page.title }}
  {% if page.content != blank %}
    
      

        {{ page.content }}
      

    

  {% endif %}
  
    

      {% form 'contact' %}

        {% if form.posted_successfully? %}
          

            {{ 'contact.form.post_success' | t }}
          

        {% endif %}

        {{ form.errors | default_errors }}

        
          

            
            
          

          
            
            
          

        

        
        
        

        
      {% endform %}
    

  

  {% section 'featured-products-subsection' %}
2

Please add below code in bottom of assets/theme.scss.css file.

.label–hidden {

overflow: unset;

clip: unset;

}

label {

color:#000;

}

3

I will send you 2 options, go to Assets > theme.scss.liquid and paste this at the bottom of the file:

  • Code for option 1:
.contact-form .label--hidden{
	height: auto !important;
    width: auto !important;
    position: relative !important;
    margin-bottom: 5px;
    color: #fff !important;
}
  • Code for option 2:
.contact-form .form-vertical input::placeholder,
.contact-form .form-vertical input{
    color: #000 !important;
}

Hope it is clear to you.

4

Hi Denis,

Your code resulted in a funny thing where there are now black labels, but the white text still remains. I am not sure how to delete the white text or how to make it invisible.

StrawHatSam_0-1638571072817.png
StrawHatSam_0-1638571072817.png1742×841 47.8 KB

5

[email removed] LitExtension,

Your code seems to have no effect on my contact page. I copy and pasted it directly from your post below the bottom line of my theme code and neither method worked at all.

6

Hi @StrawHatSam ,

I have changed the code so you have the best choice:

Code:

.contact-form.form-vertical input::placeholder,
.contact-form.form-vertical textarea::placeholder{
	color: transparent !important;
}
.contact-form .label--hidden{
	height: auto !important;
    width: auto !important;
    position: relative !important;
    margin-bottom: 5px;
    color: #fff !important;
}

Code:

.contact-form.form-vertical input::placeholder,
.contact-form.form-vertical textarea::placeholder{
	color: #000 !important;
}
.contact-form .label--hidden{
	display: none !important;
}

Hope it is clear to you.

1 Like
7

Awesome! This is beautiful. Your first option looks great and there are no redundant words on the inside of the text boxes. Thanks so much!