Change Contact Form Font to Black

Illdy
1

Hi there,

I’d like to change the font colour for the contact form to black.

I’d appreciate the help.

2

Hello @nextand,

You should use this custom CSS code:

#contact-us .section-content .wpcf7-form p .wpcf7-text,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea{
color: #000;
}

#contact-us ::-webkit-input-placeholder {
   color: #000 !important;
}
#contact-us :-moz-placeholder { /* Firefox 18- */
   color: #000 !important;  
}
#contact-us ::-moz-placeholder {  /* Firefox 19+ */
   color: 000 !important;   
}
#contact-us :-ms-input-placeholder {  
   color: #000 !important;  
}

This should do the trick

3

Hi there,

I’ve added the code but unfortunatly it didn’t work. Here is my site: stansweetcakes.com

Also here is the full css page:

/*
Theme Name: Illdy
Theme URI: Illdy - Free One Page WordPress Business Theme - Colorlib
Author: Colorlib
Author URI: https://colorlib.com
Description: Illdy is a free premium one page WordPress theme.
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: illdy

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

@import ‘layout/css/main.min.css’;

.page .bottom-header{
display: none;
}

#header .top-header .header-navigation ul li a {
color: #000 !important;
}
.home #header .top-header .header-navigation ul li a {
color: #000 !important;
}

@media only screen and (max-width: 992px){
.open-responsive-menu .fa {
color: #000 !important;
}
.home .open-responsive-menu .fa {
color: #fff !important;
}

}

#contact-us {
width: 100%;
background-color: #000000;
padding: 40px 0 50px 0;
text-align: center;
}

#contact-us .section-content .wpcf7-form p .wpcf7-text,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea{
background-color: #000000 !important;
border: 1px solid #000000 !important;
color: #fff !important;
}

#contact-us .section-content .wpcf7-form p .wpcf7-text,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea{
color: #000;
}

#contact-us ::-webkit-input-placeholder {
color: #000 !important;
}
#contact-us :-moz-placeholder { /* Firefox 18- /
color: #000 !important;
}
#contact-us ::-moz-placeholder { / Firefox 19+ */
color: 000 !important;
}
#contact-us :-ms-input-placeholder {
color: #000 !important;
}

4

Dear Colorlib,

I saw in this thread talking about the CONTACT FORM.
I would like to change the background colour of the CONTACT FORM as it clashes with my website colour palette.
Also I am very much interested to change the font [size and style] for the entire website sections, as I need something larger and bolder.
Please kindly advise on how to solve these issues.
This is my first website ever! This morning I was a total novice :-)) I love this theme!

invatadesprebani.ro/

Many thanks,
Cecilia

5

Hello,

I’m not sure if you made any changes in this time and/or you choosed to go for the white, but you might want to try this CSS code:

.wpcf7-form p {
    color: black;
}

Regards

6

Thank you! The issue I was having was with another plugin conflicting with the CSS file. But now everything is in order. I appreciate your help.

7

Hello Cecilia,

On top of the coding you see in this thread, you can use this code to change the contact us background color:

#contact-us {
    background-color: #dda06f;
}

Additional, you can try this code to change the font style:

body {
    line-height: 1.5;
    background-color: #fff;
    font-family: "Source Sans Pro",sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #888;
}
.front-page-section .section-header p {
    margin-bottom: 0;
    line-height: 1.6;
    font-size: 15px;
    color: #888;
}
.front-page-section .section-header h3 {
    margin: 0 0 30px;
    line-height: .6;
    font-weight: 900;
    font-size: 30px;
    color: #000;
    text-transform: uppercase;
}

Best regards