Announcement

Announcement Module
Collapse

Support Topics :

Important update for support topics : http://vibethemes.com/forums/forum/w...-support-topic
------
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
    Important Links
    Live documentation
    Issue Log & Coming up
    Translation Status
    What's new in update ?
    Tips & Tricks section
    How to update WPLMS theme and plugins

    Support email for mailing your credentials:
    support@vibethemes.com
    P.S: Always mail the thread/topic link along with credentials for tracking.

    For faster support create a support request at support forums

    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.
          Important Links
          Live documentation
          Issue Log & Coming up
          Translation Status
          What's new in update ?
          Tips & Tricks section
          How to update WPLMS theme and plugins

          Support email for mailing your credentials:
          support@vibethemes.com
          P.S: Always mail the thread/topic link along with credentials for tracking.

          For faster support create a support request at support forums

          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.
              Important Links
              Live documentation
              Issue Log & Coming up
              Translation Status
              What's new in update ?
              Tips & Tricks section
              How to update WPLMS theme and plugins

              Support email for mailing your credentials:
              support@vibethemes.com
              P.S: Always mail the thread/topic link along with credentials for tracking.

              For faster support create a support request at support forums

              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.
                  Important Links
                  Live documentation
                  Issue Log & Coming up
                  Translation Status
                  What's new in update ?
                  Tips & Tricks section
                  How to update WPLMS theme and plugins

                  Support email for mailing your credentials:
                  support@vibethemes.com
                  P.S: Always mail the thread/topic link along with credentials for tracking.

                  For faster support create a support request at support forums

                  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.
                        Important Links
                        Live documentation
                        Issue Log & Coming up
                        Translation Status
                        What's new in update ?
                        Tips & Tricks section
                        How to update WPLMS theme and plugins

                        Support email for mailing your credentials:
                        support@vibethemes.com
                        P.S: Always mail the thread/topic link along with credentials for tracking.

                        For faster support create a support request at support forums

                        Comment


                        • #13
                          Thank you...

                          Comment

                          Working...
                          X