Home › Forums › Legacy Support › Support queries › Styling issues › styling submit buttons
- This topic has 6 replies, 3 voices, and was last updated 5 years, 4 months ago by logan.
Viewing 7 posts - 1 through 7 (of 7 total)
-
AuthorPosts
-
November 18, 2018 at 12:39 pm #184950MeesterGijsSpectatorHello, 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;}November 19, 2018 at 7:14 am #184997loganMemberHoi Vriend, Please goto wp-admin > customize> custom css > paste this code there carefully. .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.November 19, 2018 at 9:08 am #185012MeesterGijsSpectatorDear 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?November 19, 2018 at 11:34 am #185060loganMemberHoi, 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.November 19, 2018 at 11:37 am #185061Anshuman SahuKeymasterCorrected css :
for button sticking to bottom : form#group-settings-form { margin-bottom: 30px; }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; }
November 19, 2018 at 1:49 pm #185084MeesterGijsSpectatorPerfect! 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.November 20, 2018 at 5:25 am #185155loganMembercheers :) -
AuthorPosts
Viewing 7 posts - 1 through 7 (of 7 total)
- The topic ‘styling submit buttons’ is closed to new replies.