Canvas Support

Change Font Color on Form - One-Page Canvas Dark

7 replies · opened Mar 6, 2020

77Lexen7Mar 6, 2020

Hi there,

I am trying to make the form input fields easier to read on one-page/index-dark.html
Right now the font is dark on a dark background...
Would you please tell me how and where to make the font white?

Thank you!

SSemicolon WebSTAFFMar 8, 2020

Hello,

You can consider using the following CSS code:


.dark .sm-form-control:not(.not-dark) {
	color: #HEX;
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

77Lexen7Mar 9, 2020

Thank you for that... would you please tell me where I should add that code?
;)
Thank you!

77Lexen7Mar 11, 2020

Thank you for that… would you please tell me where I should add that code?
?
Thank you!

(48 hours turn around for a simple question like this seems a bit much. Not impressed!!!)

Got it...
.dark .sm-form-control:not(.not-dark) {
color: #HEX;
}

But where do I insert that code???????

SSemicolon WebSTAFFMar 11, 2020

Hello,

Thanks for your Patience and Apologies about the Delay!

You will need to use these codes inside the css/custom.css File and detailed instructions are already provided in the Documentation > Start > Customization Section about using Custom CSS Codes.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

77Lexen7Mar 12, 2020

Thank you for your help but I think I need to be clearer...

I am using one page dark for this site
http://www.idahotelcomexperts.com/

If you scroll to the bottom to the contact form, the fields are too dark to read

I have tried using the custom code in the custom.css - following the instructions - but nothing worked so I reverted the code.

Would you please look at the source code and the attached screenshot of the form... as it may clarify...

Maybe you were thinking I was referring to code other than this...
It the form the quick-contact widget?

Thank you!

77Lexen7Mar 12, 2020

Finally found it…..

In CSS/dark.css

.dark .sm-form-control:not(.not-dark)::-moz-placeholder { color: #666; }
.dark .sm-form-control:not(.not-dark):-ms-input-placeholder { color: #666; }
.dark .sm-form-control:not(.not-dark)::-webkit-input-placeholder { color: #66; }

Logic = placeholder is displaying the field labels (they are the placeholders…)

The labels are being displayed…. The field labels are place holders…

.dark .sm-form-control:not(.not-dark)::-moz-placeholder { color: #666; } This one is for mozilla firefox
.dark .sm-form-control:not(.not-dark):-ms-input-placeholder { color: #666; } This is for Microsoft
.dark .sm-form-control:not(.not-dark)::-webkit-input-placeholder { color: #666; } This is for Chrome

To make this work…
Change the colors to white

.dark .sm-form-control:not(.not-dark)::-moz-placeholder { color: #FFFFFF; }
.dark .sm-form-control:not(.not-dark):-ms-input-placeholder { color: #FFFFFF; }
.dark .sm-form-control:not(.not-dark)::-webkit-input-placeholder { color: #FFFFFF; }

But not in dark.css
Add that code to the css/custom.css

Custom CSS

Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.dark .sm-form-control:not(.not-dark)::-moz-placeholder { color: #FFFFFF; }
.dark .sm-form-control:not(.not-dark):-ms-input-placeholder { color: #FFFFFF; }
.dark .sm-form-control:not(.not-dark)::-webkit-input-placeholder { color: #FFFFFF; }

Then add the link to the custom.css in the header of the index.html page

<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" href="css/custom.css" type="text/css" />

Full instructions from Canvas Documentation

Theme Customization
We have include a Custom CSS File in the css Folder so that you can better handle your Customizations while updating Canvas to the Latest Version. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/responsive.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.
Example:
<head>
...
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" href="css/custom.css" type="text/css" />
</head>
End result… the custom code will be loaded and will overwrite the default code…

Doing this the right way - per the instructions will let you update the latest CSS files without affecting your custom code…

Hope this helps someone out there….

SSemicolon WebSTAFFMar 12, 2020

Hello,

Thanks for your Patience.

Really Glad that your issues were resolved. And Thank You so much for the very elaborate and helpful information with step-by-step guide to achieve the results for your issue. This will help a lot of users.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard