Buttons in wpjobmanager page

Hi guys,

could you please assist me with these ugly looking buttons in the wpjobmanager vacancy page. The yootheme template has nice looking buttons, but i don't know how to use them (http://prntscr.com/f417kl)

It's about this site; http://www.werkenbijkornferry.nl/

  • James Morris

    Hello Sander,

    I hope you are well today.

    I'll be happy to help you with this issue. However, in order to do so, I'll need to be able to see your site. Right now, all I can access is a splash page.

    If you don't want your site to be publicly viewable at this time, would you please enable Support Staff Login so I can take a look into this issue?

    You can learn how to grant WPMU DEV Support Access at the following link:

    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Please reply back here once you've enabled access so I will be notified.

    Best regards,

    James Morris

  • Luís

    Hi Sander ,

    Hope you're doing well today!

    Working here alongside with my teammate James.

    I checked one of the buttons used in your theme (in the bottom of the homepage), and to add the same styles to the form buttons, you will need a CSS code like:

    .application_button, input.wp_job_manager_send_application_button{
        background-color: #106550;
        border: 1px solid #106550;
      	color: #fff;
        cursor: pointer;
        -webkit-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
        -webkit-transition-property: color,background-color,border-color,box-shadow;
        transition-property: color,background-color,border-color,box-shadow;
        font-family: Montserrat;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 1px;
        background-origin: border-box;
        padding: 14px 30px;
        vertical-align: middle;
    }
    .application_button:hover, input.wp_job_manager_send_application_button:hover {
        background-color: transparent;
        border: 1px solid #106550;
      	color: #106550;
    }

    As the "file upload" button has limitations in terms of styling, we will need to make a little trick, hidding the default button and replacing by other one custom made. I you are interested, this is the complete code (with the file upload button included)

    .application_button, input.wp_job_manager_send_application_button, input#upload-cv::before{
        background-color: #106550;
        border: 1px solid #106550;
      	color: #fff;
        cursor: pointer;
        -webkit-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
        -webkit-transition-property: color,background-color,border-color,box-shadow;
        transition-property: color,background-color,border-color,box-shadow;
        font-family: Montserrat;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 1px;
        background-origin: border-box;
        padding: 14px 30px;
        vertical-align: middle;
    }
    .application_button:hover, input.wp_job_manager_send_application_button:hover, input#upload-cv:hover::before {
        background-color: transparent;
        border: 1px solid #106550;
      	color: #106550;
    }
    
    input#upload-cv::-webkit-file-upload-button {
      visibility: hidden;
    }

    If you don't know, you should always avoid change the original CSS files, in order to don't lose it all when you make an update. So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    or the default option from WordPress: Appearance -> Customize, and then, "Additional CSS".

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís

    Hi Sander ,

    Hope you're doing well today and thanks for your patience here!

    Could you please check 1 more time? I've added the final buttons now. Can you allign
    them in center too?

    Firstly, to change the style of this new button created, give a look on the code added and replace where it's used:

    #upload-andere-bestanden

    by

    #upload-motivatiebrief

    To center these buttons, please add this CSS code:

    .job-manager-form fieldset .field {
        text-align: center;
    }

    Also I cannot find the text "your cover letter/message sent to the employer". Could you please remove this text?

    This is a placeholder, not sure how the form was built but there should be some option to remove it. Using CSS, what we can do is, set the placeholder to have the same color as the background, so, it will not be visible:

    textarea#bericht::-webkit-input-placeholder {
        color: #fff;
    }
    textarea#bericht:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
       color:    #fff;
       opacity:  1;
    }
    textarea#bericht::-moz-placeholder {
    /* Mozilla Firefox 19+ */
       color:    #fff;
       opacity:  1;
    }
    textarea#bericht:-ms-input-placeholder {
    /* Internet Explorer 10+ */
       color:    #fff;
    }

    And one more small thing; could you please put a little less padding between those items?

    I am not sure if the following code can interfere with other pages, so, the code is to target just the single "job" pages. If you want to apply the code for the entire site remove this from the code: ".single-job_listing"

    .single-job_listing .uk-section {
        padding-top: 40px !important;
    }
    
    .uk-margin-medium-bottom {
        margin-bottom: 40px!important;
    }

    If the codes given doesn't worked as expected, please re-enable the Support Access so we can give a look and test other options. If you don't already know, please, follow the link below, to see how enable the staff login:

    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    When you enable this option, please post again!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.