-
-
Save MyListingClub/a49ac62a0f6e49f1c71a68fa1808ee21 to your computer and use it in GitHub Desktop.
CSS | Submit Form Design
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//// INSTRUCTIONS: | |
//// Copy and paste any of the code snippets below into Theme Tools > Theme Options > Custom Code > CSS. | |
---------------------------CODE SNIPPET IS BELOW THIS LINE--------------------------------------------------------- | |
/* ML - SUBMIT FORM - BACKGROUND */ | |
.add-listing-step #submit-job-form { | |
background-image: url(https://website[dot]com/wp-content/uploads/yourimage.jpg); | |
} | |
/* ML - SUBMIT FORM - LABELS - COLORED BACKGROUND */ | |
#submit-job-form .field-head label { | |
margin-left: -10px; | |
font-weight: 900; | |
text-transform: uppercase; | |
padding: 6px 12px; | |
border-radius: 16px; | |
background-color: rgba(0,0,0,0.05); | |
} | |
/* ML - SUBMIT FORM - ROUNDED AND SHADOWED EDGES */ | |
#submit-job-form .form-section { | |
border-radius: 10px; | |
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); | |
} | |
/* ML - SUMBIT FORM - SECTION HEADINGS */ | |
#submit-job-form .form-section .pf-head { | |
background-color: #6956d3; | |
padding-bottom: 15px; | |
} | |
.element .pf-body { | |
padding-top: 0px; | |
} | |
/* ML - SUBMIT FORM - TITLES */ | |
.c27-submit-listing-form .title-style-1 h5 { | |
color: #fff; | |
text-transform: uppercase; | |
font-weight: 800; | |
} | |
/* ML - SUBMIT FORM - LABELS */ | |
#submit-job-form .field-head label { | |
margin-left: -10px; | |
font-weight: 900; | |
text-transform: uppercase; | |
padding: 6px 12px; | |
border-radius: 16px; | |
} | |
/* ML - SUBMIT FORM - ALIGNS SOME FIELD DESCRIPTIONS THAT WERE NOT UNIFORM WITH THE OTHERS */ | |
#submit-job-form small.description { | |
display: block; | |
width: 100%; | |
margin-top: 5px; | |
} | |
/* ML - SUBMIT FORM - SOCIAL NETWORKS BUTTON */ | |
.social-networks-repeater > input[type="button"] { | |
color: #fff !important; | |
background: #6956d3; | |
text-transform: uppercase; | |
border-radius: 25px; | |
} | |
.social-networks-repeater > input[type="button"]:hover { | |
color: fff !important; | |
background: #000; | |
} | |
/* ML - SUBMIT FORM - WORK HOURS BUTTON */ | |
.work-hours-repeater>input[type=button] { | |
color: #fff !important; | |
background: #6956d3; | |
text-transform: uppercase; | |
border-radius: 25px; | |
} | |
.work-hours-repeater>input[type=button]:hover { | |
color: #fff !important; | |
background: #000; | |
} | |
/* ML - SUBMIT FORM - KEEPS IMAGES THE ORIGINAL DIMENSIONS IN PREVIEW, PRIOR TO UPLOADING */ | |
.job-manager-uploaded-file .job-manager-uploaded-file-preview img { | |
object-fit: contain; | |
} | |
/* ML - SUBMIT FORM - SUBTITLES */ | |
#submit-job-form small { | |
opacity: 1; | |
font-style: italic; | |
text-transform: none; | |
} | |
/* ML - SUBMIT FORM - REMOVE THE IMAGE UPLOAD SIZE LABEL */ | |
#submit-job-form .file-upload-field small { | |
display: none !important; | |
} | |
/* ML - SUBMIT FORM - CHANGES THE COLOR OF THE DROP-DOWN FIELD SELECTOR ICON */ | |
#submit-job-form .select2-selection--multiple:before, #submit-job-form .select2-selection--single:before { | |
color: #6b3cfc; | |
opacity: 1; | |
} | |
/* ML - SUBMIT FORM - CHANGES THE COLOR OF THE UPLOAD MEDIA ICON */ | |
.review-gallery-add { | |
color: #6956d3; | |
} | |
/* ML - SUBMIT FORM - SUBMIT BUTTON */ | |
form .listing-form-submit-btn button[type=submit].preview-btn { | |
text-transform: uppercase; | |
} | |
.skip-preview-btn { | |
padding: 10px 40px !important; | |
width: 100% !important; | |
color: #fff !important; | |
background-color: #8C69FC !important; | |
text-transform: uppercase; | |
font-weight: 900 !important; | |
} | |
.skip-preview-btn:hover { | |
color: #fff !important; | |
background-color: #000 !important; | |
} | |
/* ML - SUBMIT FORM - LEFT SIDE NAVIGATION */ | |
.add-listing-nav a { | |
text-transform: uppercase; | |
font-weight: 900; | |
} | |
/* ML - SUBMIT FORM - LEFT SIDE NAVIGATION - ACTIVE NAVIATION CIRCLE */ | |
.add-listing-nav .active i { | |
background-color: #6956d3; | |
} | |
.add-listing-nav ul a i span { | |
background-color: #fff !important; | |
} | |
/* ML - SUBMIT FORM - LEFT SIDE NAVIGATION - ACTIVE NAVIATION CIRCLE - TEXT HOVER */ | |
.add-listing-nav .active a:hover i { | |
border-color: #050096 !important; | |
background-color: #050096; | |
} | |
/* ML - SUBMIT FORM - LEFT SIDE NAVIGATION - INACTIVE NAVIATION CIRCLES */ | |
.add-listing-nav a:hover i { | |
border-color: #8C69FC; | |
background-color: #8C69FC; | |
} | |
.add-listing-nav i:hover { | |
border: #8C69FC !important; | |
background-color: #8C69FC !important; | |
} | |
.add-listing-nav ul a i span:hover { | |
border: #fff !important; | |
background-color: #fff !important; | |
} | |
.add-listing-nav a i { | |
border-color: #aaa; | |
background-color: #aaa; | |
} | |
/* ML - SUBMIT FORM - LISTING PREVIEW - SUBMIT LISTING BUTTON */ | |
.job_listing_preview_title input[type="submit"].job-manager-button-submit-listing.button.button-2 { | |
border-radius: 25px; | |
text-transform: uppercase; | |
font-weight: 600; | |
} | |
.job_listing_preview_title input[type="submit"].job-manager-button-submit-listing.button.button-2:hover { | |
background-color: #000 !important; | |
color: #fff !important; | |
} | |
/* ML - SUBMIT FORM - LISTING PREVIEW - EDIT LISTING BUTTON */ | |
.job_listing_preview_title .button.job-manager-button-edit-listing { | |
border-radius: 25px; | |
text-transform: uppercase; | |
font-weight: 600; | |
} | |
.job_listing_preview_title .button.job-manager-button-edit-listing:hover { | |
background-color: #000 !important; | |
color: #fff !important; | |
} | |
// ML - SUBMIT FORM - REQUIRED FIELDS | |
.c27-submit-listing-form .field.required-field::before { | |
content: 'Required field'; | |
color: red; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment