Announcement

Announcement Module
Collapse

OFFICIAL MAIL for SUPPORT : support@vibethemes.com

OFFICIAL MAIL for SUPPORT : support@vibethemes.com , Priority support for Forums.
See more
See less

Change elements of contact us areas

Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Support Change elements of contact us areas

    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

  • #2
    Change colors according to your requirements:

    For Glowing Border, change rgba code :
    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
    Code:
    footer input.form_field, footer textarea.form_field {    background-color: #393F42;
        border: 1px solid #3B3E41;
        color: #999999;
        padding: 5px;
    
    
    }
    For Submit Button
    Code:
    .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;
    }
    Last edited by Mr.Vibe; 03-13-2013, 12:08 PM. Reason: removing space from primary .send_message

    Comment


    • #3
      Thank you for this.

      Comment


      • #4
        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;
        }

        Comment


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

          Comment


          • #6
            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.

            Comment


            • #7
              "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.

              Comment


              • #8
                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;
                }

                Comment


                • #9
                  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.

                  Comment


                  • #10
                    Thank you!

                    Comment


                    • #11
                      Just one more thing, on mouse over I still want it to remain gray. Thanks.

                      Comment


                      • #12
                        ADD
                        Code:
                        .button.primary.send_message:hover{
                        background: #888;
                        }
                        Last edited by Mr.Vibe; 03-16-2013, 07:48 AM.

                        Comment


                        • #13
                          Thank you...

                          Comment

                          Working...
                          X