Changing the color of the contact form and order of widgets

Hi,
I really like your theme and was wondering that is it possible to change the color of the contact form at the front page? I did not even found the settings of the contact form, so I installed Contact Form 7.

Another question is that is it possible to change the order of those sections in the first page? Or do I have to change those from the modify themes -section?

-Ville

Hi @tinydragon,

it’s not currently possible to reorder the homepage sections. Changing the color of the contact form, requires some CSS knowledge. If you’re comfortable writing CSS code, please let me know so I can provide you with a small CSS snippet.

Thanks,
Colorlib Support.

Hi,
@colorlibsupport and thanks. I know basics of the CSS. So I sure can try.

-Ville

Hello,

Here is the CSS code to change the input fields background color, border and text color:

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

This is the one for the “Send” button, with background color and text color:
#contact-us .section-content .wpcf7-form p .wpcf7-submit{
background-color: #fff;
color: #e69f67;
}

Just add this code to a stylesheet.css on your server, preferably in a child theme so it does not get erased when you update the theme. You can also place it inside Dashboard > Appearances > Editor > Style.css but again, it will get erased when you update the theme.

Since I don’t know what is your color code, just play around and change all the hex codes (e.g. #df955b)

Let me know if everything is working as expected.

Best regards

Hi,

I am wondering if you can provide me the CSS Snippet to edit the size of the font sitewide. It is currently a bit too small.

Thank you

Hello @diazjavi,

Unfortunately, I cannot offer you CSS Snippet to change the font size because there are multiple rules depending on the title, sub-titles, sections, buttons, and many many more.

You can find all the font-size rules inside the main.min.css on your FTP server:
/wp-content/themes/illdy/layout/css/main.min.css

Here you can search for every font-size property and increase the value with a couple of pixels.

I hope this gets you further with the setup of your website.

Regards

Good afternoon! Within the main.min.css , what exactly is the field that I can change to increase the font size of the body of posts ? Thank you!

Hello,

You should look out for the body { font-size: 15px; }

Let me know if you got it alright.

Regards

Hello @colorlibsupport
I just used your code mentioned in the previous posts but I would also like to change the #df955b background colour of the main “container”. The picture is attached. How should I change the code and where?
Thank you

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

This is the code that handles the contact section background color:

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

Let me know if you got it alright.

Yes, thank you for your support.

Hello @colorlibsupport,

First of all, thank you for your great support and the nice theme!

One more question on this topic, as soon as I insert the text into the contact fields, the text is not visible, because of the white colour on the white field. How can I change the colour of the insert text?

Thank you

Hello @rirock,

I’m happy that I could help so far!

Try this CSS code:

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

Additionally, depending on how the form is styled, you could use some placeholder CSS rules to change the color of the text, as well.

Regards

Hello,
Unfortunately the CSS Code didnot work. Are there any other possibilities?
Thank you!

It should work alright, maybe try adding important to the syntax:

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

On top of that use the code for placeholder (default unfocused state)

/* Webkit */
#contact-us .section-content .wpcf7-form p .wpcf7-text::-webkit-input-placeholder,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea::-webkit-input-placeholder { color: #000; }

/* Firefox 4-18 */
#contact-us .section-content .wpcf7-form p .wpcf7-text:-moz-placeholder,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea:-moz-placeholder { color: #000; }

/* Firefox 19+ */
#contact-us .section-content .wpcf7-form p .wpcf7-text::-moz-placeholder,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea::-moz-placeholder { color: #000; }

/* IE10+ */
#contact-us .section-content .wpcf7-form p .wpcf7-text:-ms-input-placeholder,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea:-ms-input-placeholder { color: #000; }

If this is still not working, please provide website preview.

Regards