[Jobs & Experts] Jobs & Experts icons colors.

Is there possibility to change color icons in Jobs & Experts. Can you provide any custom css solution for those SVG icons.

Thank you

  • Predrag Dubajic

    Hi PDQ Digital Media,

    Hope you're doing well :slight_smile:

    I'm afraid that the only way this could be changed is to get the original images, edit them to change the color and then use those new images.

    So the first thing to do is to get the images, they are located inside /wp-content/plugins/jobs-plus/assets/image/icons/ folder.

    You can now use any SVG image editor and I found this online tool that does the trick quite nicely:

    After you have changed the images you will need to upload the new ones to your server, you can create new folder in your Uploads folder, name it JEicons for example, and put your edited icons in that folder.

    Now we need to add new CSS to call those new images, here's the code that should do the trick, all you need to do is to change the URL of the images so it points to right location:

    /* Browse Jobs */
    .jbp-shortcode-button.jbp-browse-job.dark:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Browse_Jobs_Dark.svg) no-repeat;
    /* Browse Jobs Hover */
    .jbp-browse-job.bright:hover:before, .jbp-browse-job.dark:hover:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Browse_Jobs_Hover.svg) no-repeat;
    /* Browse Experts */
    .jbp-browse-pro.dark:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Browse_Experts_Dark.svg) no-repeat;
    /* Browse Experts Hover */
    .jbp-browse-pro.bright:hover:before, .jbp-browse-pro.dark:hover:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Browse_Experts_Hover.svg) no-repeat;
    /* Post a Job */
    .jbp-add-job.dark:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Post_a_Job_Dark.svg) no-repeat;
    /* Post a Job Hover */
    .jbp-add-job.bright:hover:before, .jbp-add-job.dark:hover:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Post_a_Job_Hover.svg) no-repeat;
    /* Add an Expert */
    .jbp-add-pro.dark:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Add_an_Experts_Dark.svg) no-repeat;
    /* Add an Expert Hover */
    .jbp-add-pro.bright:hover:before, .jbp-add-pro.dark:hover:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/Add_an_Expert_Hover.svg) no-repeat;
    /* My Profile */
    .jbp-profile-pro.dark:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/My_Profile_Dark.svg) no-repeat;
    /* My Profile Hover */
    .jbp-browse-pro.bright:hover:before, .jbp-profile-pro.dark:hover:before {
        background: url(//YOURDOMAIN/wp-content/uploads/JEicons/My_Profile_Hover.svg) no-repeat;

    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn't have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.