Jobs Experts Looks distorted, also need to change icons.

I need to understand how to change the icons, and also i may want to use pngs instead of cvgs, but more so where do I go to change that. and of course i need to fix whatever looks distorted with the alignments of those markers next to those text fields

  • Adam Czajczyk
    • Support Gorilla

    Hello detroitexposure,

    I hope you're well today and thank you for your question!

    I need to understand how to change the icons, and also i may want to use pngs instead of cvgs, but more so where do I go to change that.

    You can change this icons with some additional CSS. To do this please follow these steps:

    - prepare you icons (it may be .png images if you wish)
    - upload them to your site
    - replace "icon.png" in the code below with URLs of your custom icons; lines are accordingly (from top to bottom): browse jobs, browse experts, post a job, add an expert, my jobs and my profile buttons.

    a.jbp-browse-job:before {background:url('icon.png') no-repeat;}
    a.jbp-browse-pro:before {background:url('icon.png') no-repeat;}
    a.jbp-add-job:before {background:url('icon.png') no-repeat;}
    a.jbp-add-pro:before {background:url('icon.png') no-repeat;}
    a.jbp-list-job:before {background:url('icon.png') no-repeat;}
    a.jbp-profile-pro:before {background:url('icon.png') no-repeat;}

    - add that CSS to your site; you may add it to the "style.css" file of your child theme (if you're using a child theme) or via a "Simple Custom CSS" plugin.

    In case it didn't affect the site, please replace the "no-repeat;" part in each line with "no-repeat!important;".

    i need to fix whatever looks distorted with the alignments of those markers next to those text fields

    The form styling comes mostly from the theme that you're currently using and sometimes a slight "distortions" may show up with some themes. I tried to check your site and examine its CSS style in order to provide you with a fix but unfortunately I cannot see the content that's available for registered users only. Would you mind granting me a support access to your site so I could take a closer look?

    To do this please follow this guide:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • Dimitris
    • Support Star

    Hey there detroitexposure,

    thanks for granting us access!

    I just inspected the "Add an Expert" page and I was able to resolve this (with dev tools) with the folowing CSS code

    #top .main_color .input-text,
    #top .main_color input[type='text'],
    #top .main_color input[type='input'],
    #top .main_color input[type='password'],
    #top .main_color input[type='email'],
    #top .main_color input[type='number'],
    #top .main_color input[type='url'],
    #top .main_color input[type='tel'],
    #top .main_color input[type='search'],
    #top .main_color textarea,
    #top .main_color select {
      margin-bottom: 0 !important;
    }

    Please feel free to use this code in your child-theme, or through a plugin like Adam stated. I'm looking forward for the results! :slight_smile:

    Warm regards,
    Dimitris

  • detroitexposure
    • Design Lord, Child of Thor

    So where do i copy this exact code to?

    #top .main_color .input-text,
    #top .main_color input[type='text'],
    #top .main_color input[type='input'],
    #top .main_color input[type='password'],
    #top .main_color input[type='email'],
    #top .main_color input[type='number'],
    #top .main_color input[type='url'],
    #top .main_color input[type='tel'],
    #top .main_color input[type='search'],
    #top .main_color textarea,
    #top .main_color select {
    margin-bottom: 0 !important;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.