How to Change the Contact Form Style

Support
#1

i am using ethos 2 but i like the contact form style of icons 6. follow the image please
how to change the contact form styles from ethos 2 to icon 6 style.
because the ethos 2 contact form, there is a big gaps between the boxes , i mean big size boxes.

#2

Hello @badarkwk,

Thanks for asking. :slight_smile:

You can add following CSS under X > Launch > Options > CSS to mimic Icon 6 contact form style. Please note that I have also shared CSS to change submit button style.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    height: 2.65em;
    margin-bottom: 9px;
    border: 1px solid #dfdfdf;
    border: 1px solid rgba(0,0,0,0.075);
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
}

textarea {
    height: auto;
    line-height: 1.3;
}

[type="submit"] {
    color: #01baba;
    border-color: #01baba;
    background-color: #ff2a13;
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 0.25em;
}

[type="submit"]:hover {
    color: #019696;
    border-color: #019696;
    background-color: #ef2201;
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
}

Thanks.

1 Like
#3

Dear Got it but i am confuse how to work with all of these css codes, i am afraid for changing wrong - actually i am not a software engineer nor a IT Specialist, i am a students and don’t know about the coding system, i purchased x theme just because its very awsome to work easily and perfect, if i know the coding may be i designed my own theme hahaha.

kindly solve it on your behave, i belive you will do it best at your own behalf, i am sharinf wordpress detail in Secure Notes.

#4

Hi there,

You will have to add the CSS codes in X > Theme Options > CSS and make sure that there is no CSS error in the codes that you have in order for the codes to surely works.

The custom codes you have requested to go above and beyond the support we offer but please note that these goes beyond the scope of our support as these are not a theme issue but rather than a customization for the site display that you are aiming for. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you.

Thanks for understanding. Take care!

1 Like
#5

dear i did not described that there is a issue with the theme. this is a perfect theme thats why i am using, i just need the CSS coding to change,

now i am going to try the following instructions, if i did not get the soloution then i come to back to you :slight_smile:

#6

select, textarea, input[type=“text”], input[type=“password”], input[type=“datetime”], input[type=“datetime-local”], input[type=“date”], input[type=“month”], input[type=“time”], input[type=“week”], input[type=“number”], input[type=“email”], input[type=“url”], input[type=“search”], input[type=“tel”], input[type=“color”], .uneditable-input {
display: inline-block;
height: 2.65em;
margin-bottom: 9px;
border: 1px solid #dfdfdf;
border: 1px solid rgba(0,0,0,0.075);
padding: 0 0.65em;
font-size: 13px;
line-height: normal;
color: #555;
background-color: #fff;
}

textarea {
height: auto;
line-height: 1.3;
}

its working fine now - i did not use the css code for button, the current button is fine. i just want to change the colour of the buttion, just provide the coding for the button, for hovour also, follow the image plz

#7

Hello @badarkwk,

You can use above codes that I shared to change button color. But to help you better I am sharing again. Please note that this will only change font color.

input[type="submit"] {color: #ddd;}

input[type="submit"]:hover {color: #b5b0b0;}

In case you want to change font and background color both, then please use following CSS:

input[type="submit"] {color: #fff; background-color: #6f6969; border-color: #6f6969;}

input[type="submit"]:hover {color: #b5b0b0; background-color: #2f2e2e; border-color: #2f2e2e;}

Please change color codes as per requirement.

Thanks.

1 Like
#8

Thank You So Much - Problem Solved - :slight_smile: Awsome

#9

Glad to hear that :slight_smile: You’re welcome :slight_smile:

1 Like
#10

kindly follow the images

you can see the gap between the “Get Detail” from up and down side is perfect -

but the message body is nearly the upper border line - kindly create standard gap between the uppper line and msg body. check the second colour.

#11

Hi,

To adjust the gap, you can add padding to your textarea.

eg.

textarea {
    padding:10px 10px;
    height: auto;
    line-height: 1.3;
}

Change 10px to adjust.

If the padding property has two values:

eg.

padding: 25px 50px;

top and bottom paddings are 25px
right and left paddings are 50px

https://www.w3schools.com/css/css_padding.asp

Hope that helps.

#12

Got it - Solved Problem - Thank You

#13

You’re welcome! :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.