Change elements of contact us areas

[cairns_nic]

Hi,

I have the Contact us areas on my "Contact us" page as well as in my footer….

Can you please tell me how to change the submit button, glowing boarder around the text fields as well as the b/g of the text fields themselves to different colors? Thanks.


My site: www.advancedmachinesolutions.ca

[VTF_Admin]

Change colors according to your requirements:

For Glowing Border, change rgba code :

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {   border-color: rgba(82, 168, 236, 0.8);   outline: 0;   outline: thin dotted \9;   /* IE6-9 */    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }

For text area

footer input.form_field, footer textarea.form_field {    background-color: #393F42;
    border: 1px solid #3B3E41;
    color: #999999;
    padding: 5px;


}

For Submit Button

.button.primary.send_message
{
 background:url("../img/btn.png") repeat-x scroll center top #E55E48; border-color: #D03922;
}
.button.primary.send_message:hover
{
 background:url("../img/btn.png") repeat-x scroll center top #E55E48; border-color: #D03922;
}

[cairns_nic]

Thank you for this.

[cairns_nic]

Hi,

I just got around to working with this but seem to have run into an issue…here's the coding I placed in style.css of the Vibecom theme.


textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus,.uneditable-input:focus {border-color: rgba(82,168,236,0.6); outline: 0; outline: thin dotted \9; /* IE6-9 */ -webkit-box-shadow: inset 0 1px 1px rgba(0,255,0), 0 0 8px rgba(82,168,236,0.6); -moz-box-shadow: inset 0 1px 1px rgba(0,255,0), 0 0 8px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,255,0), 0 0 8px rgba(82,168,236,0.6);
}



footer input.form_field, footer textarea.form_field {background-color: #dcdcdc;
border: 1px solid #dcdcdc;
color: #dcdcdc;
padding: 5px;
}



.button.primary .send_message
{
background:url("../img/btn.png") repeat-x scroll center top #E55E48; border-color: #D03922;
}
.button.primary .send_message:hover
{
background:url("../img/btn.png") repeat-x scroll center top #E55E48; border-color: #D03922;
}

[Mr.Vibe]

Try pasting the above CSS in the new child theme custom.css file, available in 1.0.6 update.

[cairns_nic]

Not to sound ignorant but was I suppose to delete the child theme too when doing the upgrade to the newest version or does it upgrade automatically? I only deleted/replaced the main theme as suggested in the instructional video.

[Mr.Vibe]

"was I suppose to delete the child theme too "
No, but the only exception is 1.0.6. In v 1.0.6 we've added few enhancements to the original theme which makes using child theme and adding custom changes easier.
Like in earlier child themes, for every CSS code you have to add extra !important tag after every line.
But in new child theme that is not required.
Also you can add your custom javascript functions which gives you a lot of flexibility.

So, we recommend that you update the child theme also. If you;ve made any custom changes in the CSS do not forget to save them locally on your desktop and add them back to the new child theme.

[cairns_nic]

Hi,

I've got everything working fine except the changing of the button color.

Here's the coding in that area….

.button.primary .send_message
{
background:url("../img/btn.png") repeat-x scroll center top #C10000; border-color: #C10000;
}
.button.primary .send_message:hover
{
background:url("../img/btn.png") repeat-x scroll center top #C10000; border-color: #C10000;
}

[Mr.Vibe]

There is no space between .primary and .send_message,

so instead of .button.primary .send_message the code should be .button.primary.send_message

There was mistake in the above pasted code.
P.S: You can now copy and paste from above, I've made the corrections.

[cairns_nic]

Thank you!