styling submit buttons

Home Forums Legacy Support Support queries Styling issues styling submit buttons

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #184950
    MeesterGijs
    Spectator
    Hello, I would like these submit buttons here: - https://meestergijs.nl/contact/ - profile page, save profile changes - save profile picture button - profile page, settings, save emailaddress changes button - profile page, settings, delete account button - All the save changes buttons at group admin pages ...to have this styling: }background: #88deb4;color: #fff;border: 2px solid #88deb4 !important;} :hover{background: #fff !important;color: #88deb4 !important;border: 2px solid #88deb4 !important;}
    #184997
    logan
    Member
    Hoi Vriend, Please goto wp-admin > customize> custom css > paste this code there carefully.
    1.  http://prntscr.com/lk38r6
    2.  http://prntscr.com/lk3b2l
    3.  http://prntscr.com/lk3bla
    4.  http://prntscr.com/lk3d48
    5.  http://prntscr.com/lk3ef1
    6.  http://prntscr.com/lk3fv4
    .logged-in.customize-support form.wpcf7-form  input.wpcf7-form-control.wpcf7-submit { background: #88deb4; color: #fff; border: 2px solid #88deb4 !important;} .logged-in.customize-support form.wpcf7-form  input.wpcf7-form-control.wpcf7-submit:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;} .change-avatar .padder .bp-uploader-window  .drag-drop-inside p.drag-drop-buttons input#bp-browse-button { background: #88deb4; color: #fff; border: 2px solid #88deb4 !important; margin-left: 15px!important;} .change-avatar .padder .bp-uploader-window  .drag-drop-inside p.drag-drop-buttons input#bp-browse-button:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;} .my-profile.profile-edit div.profile form#profile-edit-form .submit input#profile-group-edit-submit { background: #88deb4; color: #fff; border: 2px solid #88deb4 !important;} .my-profile.profile-edit div.profile form#profile-edit-form .submit input#profile-group-edit-submit:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;} .my-account form#settings-form div.submit input#submit{ background: #88deb4; color: #fff; border: 2px solid #88deb4 !important;} .my-account form#settings-form div.submit input#submit:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;} .group-admin form#group-settings-form input#save, .group-admin form#group-settings-form input[type='submit']{ background: #88deb4; color: #fff; border: 2px solid #88deb4 !important;} .group-admin form#group-settings-form input#save:hover, .group-admin form#group-settings-form input[type='submit']:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;} happy coding.
    #185012
    MeesterGijs
    Spectator
    Dear Logan, The bigger the code, the happier I get :) Thanks! The only one that doesn't work is this one (contact form): .logged-in.customize-support form.wpcf7-form input.wpcf7-form-control.wpcf7-submit { background: #88deb4; color: #fff; border: 2px solid #88deb4 !important; } .logged-in.customize-support form.wpcf7-form input.wpcf7-form-control.wpcf7-submit:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important; } And another questions: at the group page the buttons are stuck to the footer. How do I give it some space?
    #185060
    logan
    Member
    Hoi, this is working fine please check the codes again. .logged-in.customize-support form.wpcf7-form input.wpcf7-form-control.wpcf7-submit { background: #88deb4; color: #fff; border: 2px solid #88deb4 !important; } .logged-in.customize-support form.wpcf7-form input.wpcf7-form-control.wpcf7-submit:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important; } Refer: http://prntscr.com/lk6mu9 For the last issue: you just needed to add margin from bottom. it was so easy more than eating a piece of cake my fella.  you could have done it by your own. you are quite intelligent. Anyways i have done your part of coding. .group-admin form#group-settings-form input#save, .group-admin form#group-settings-form input[type='submit']{ background: #88deb4; color: #fff; border: 2px solid #88deb4 !important; margin-bottom: 10px !important;} .group-admin form#group-settings-form input#save:hover, .group-admin form#group-settings-form input[type='submit']:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;} Refer: http://prntscr.com/lk6w1s Kind regards.  
    #185061
    Anshuman Sahu
    Keymaster
    Corrected css  :
     form.wpcf7-form input.wpcf7-form-control.wpcf7-submit { background: #88deb4; color: #fff; border: 2px solid #88deb4 !important;
    
    }
    
    form.wpcf7-form input.wpcf7-form-control.wpcf7-submit:hover{ background: #fff !important; color: #88deb4 !important; border: 2px solid #88deb4 !important;
    
    }
      for button sticking to bottom : form#group-settings-form { margin-bottom: 30px; }
    #185084
    MeesterGijs
    Spectator
    Perfect! Thank you so much. Last few days habe been great. I fixed the save changes button, added all students to new courses, styling has been top notch. Thanks, Alex! You can close this one.
    #185155
    logan
    Member
    cheers :)
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘styling submit buttons’ is closed to new replies.