Change the Background Colours of Jobs and Experts

Hi Superheros

I need to change the background and font size of Jobs and Experts. As you can see it looks out of style.

I have the Simple CSS plugin. Can you send me over the code so I can edit it accordingly please.

I need to change the link and background colours globally across the whole of Jobs and Experts - can you advise with taht please.

Thanks so very much

  • Tyler Postle

    Hey there J Zillart,

    Looks like you have a coming soon maintenance page up so I'm unable to view your actual site; however, I've included the styles that I think you're wanting to target below. I added a comment to describe what each style is targeting:

    /* Jobs background colour */
    
    .jbp_job_except.jbp-mint {
      background-color: #fff;
    }
    
    /* job title font */
    
    .jbp_job_except h4 a {
      color: #21759b;
      font-size: 14px;
      font-weight: 600;
    }
    
    /* job description font */
    
    .jbp_job_item .ellipsis {
      font-size: 14px;
      color: #1a1a1a;
    }
    
    /* Job category terms font */
    
    .jbp_job_bottom .jbp_terms {
      font-size: 13px;
      color: #1a1a1a;
    }
    
    /* Job meta font (due date and budget) */
    
    .jbp_job_bottom .jbp_meta {
      font-size: 11px;
      font-weight: 600;
      color: #1a1a1a;
    }

    The styles I've added are just the default so you will need to change those to suit your needs. If you're having any trouble getting the right style then just let us know what you are trying to change exactly and grant support access so we can go in for a closer look :slight_smile:

    You can grant support access via WPMU DEV > Support > Grant Support Access.

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

    Hope that helps! Have a great rest of your weekend.

    Cheers,
    Tyler

  • Zen

    Ah ha...

    As ever fabulous response. Thanks for that. I have glanced over it and it seems okay. I can change what I need to from there.

    The site is locked down whilst we finish the beta version. Then we will be launching it. I have to say all credit to WPMUDEV because you really have been probably 45% of the reason for success with this project. Breathtaking support. We will be sharing that message in an article in the site.

    Really appreciated.

  • Tyler Postle

    Glad to hear that! Thanks for the kind words :slight_smile: be sure to let us know when the article is posted, I'll pass it along to the whole team.

    As for your question above:

    And am I right in assuming to target 'experts' or 'expert'' items all I would have to do is add 'experts or expert' where it currently says 'jobs'?

    Almost, the classes are a little different though and there is no jbp-mint class. Try this:

    /* experts background color */

    .jbp_expert_item .jbp_pro_except {
      background-color: #fff;
    }

    If that doesn't change the right thing then could you provide a screenshot of the background you are wanting to change? Then I can take another look.

    Cheers,
    Tyler

  • Tyler Postle

    Hey J,

    Can you grant support access?

    You can grant support access via WPMU DEV > Support > Grant Support Access.

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

    Then I should be able to get by your maintenance page. Or if I'll need credentials for that then could you send them in privately via: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me.

    Send in:

    Subject: "Attn: Tyler Postle"
    -WordPress admin username
    -WordPress admin password
    -login url
    -link back to this thread for reference
    -any other relevant urls

    Once I have access to those pages then I'll be able to make sure that the styles apply correctly and if needed, make them more specific :slight_smile:

    From your screenshot here: https://premium.wpmudev.org/forums/topic/change-the-background-colours-of-jobs-and-experts#post-1176292

    What elements are you trying to change still?

    Talk to you soon!

    Cheers,
    Tyler

  • Zen

    Con't...

    Objective: change profile avatar background to black and know how to recolour the backgrounds of the 'like' and 'views' box.

    Objective: 'member profile breadcrumb trail'. Change to black where there is white.

    Lastly: Change any buttons such as 'edit' 'publsh' etc found in experts or jobs pages which are red or blue to the standard orange shade: #dd8500

    I am guessing most of this can be done in the custom css widget. I am more than happy to do it myself if I can just copy and paste it over if that is helpful in any way. Equally happy for you to 'make it so'.

    Once again - appreciated and thanks for the detail. Learning well now.

    Best wishes

  • Tyler Postle

    Hey Zen,

    Sorry for the delay! Was off the last couple days, just catching up now.

    I will mention the amount of CSS changes here are starting to get into custom development realm; however, I've done the above changes I think :slight_smile:

    I added the following CSS to your custom stylesheet:

    /* "my profile" background */
    
    .ig-container .table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #000;
    }
    
    /* edit profile box backgrounds */
    
    .ig-container .panel, .jobs-expert-form .expert-avatar, .jobs-expert-form .expert-avatar .panel, .jobs-expert-form .expert-avatar .panel-footer, .panel.panel-default, .expert-single .expert-avatar, .expert-single .expert-avatar .panel, .expert-avatar .panel.panel-default .panel-footer {
    background-color: #000 !important;
    }
    
    /* profile content area background */
    
    .ui-tabs.ui-widget.ui-widget-content.ui-corner-all, .ig-container .tab-content, .nav.nav-tabs.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all {
      background-color: #000;
    }
    
    /* button colour */
    
    .ig-container .btn-primary.disabled, .ig-container .btn-primary.disabled.active, .ig-container .btn-primary.disabled.focus, .ig-container .btn-primary.disabled:active, .ig-container .btn-primary.disabled:focus, .ig-container .btn-primary.disabled:hover, .ig-container .btn-primary[disabled], .ig-container .btn-primary.active[disabled], .ig-container .btn-primary.focus[disabled], .ig-container .btn-primary[disabled]:active, .ig-container .btn-primary[disabled]:focus, .ig-container .btn-primary[disabled]:hover, fieldset[disabled] .ig-container .btn-primary, fieldset[disabled] .ig-container .btn-primary.active, fieldset[disabled] .ig-container .btn-primary.focus, fieldset[disabled] .ig-container .btn-primary:active, fieldset[disabled] .ig-container .btn-primary:focus, fieldset[disabled] .ig-container .btn-primary:hover, .ig-container .btn-primary {
      background-color: #dd8500 !important;
      border-color: #dd8500;
    }
    
    /* breadcrumb background */
    
    .ig-container .jobs-contact ol {
      background-color: #000;
    }
    
    /* like box background colour */
    
    .hn-grey-alt {
    background: #595f66 none repeat scroll 0 0;
    }
    
    /* "views" box background colour */
    
    .hn-blue {
    background: #5bc0de none repeat scroll 0 0;
    }

    Let me know how that looks :slight_smile:

    Cheers,
    Tyler

  • Zen

    Hi James

    That worked quite well from what I can see. Thanks for all the input. I have looked over the code above to see why the experts descriptions are now showing in grey font whereas previously they were in white.

    Any ideas what happened there please?

    Access is still available. However could you please only add the requirements here as I need to remain methodical with the development log and be aware of all the changes, check effect logically.

    I will add separately any other glitches I pick up as I check all the details on each page. Don't think there are that many.

    Many thanks

  • Tyler Postle

    I have looked over the code above to see why the experts descriptions are now showing in grey font whereas previously they were in white.

    Any ideas what happened there please?

    Sorry Zen, looks like I missed the support access before seeing your above, could you regrant that? Then I'll have a look and let you know :slight_smile:

    However could you please only add the requirements here as I need to remain methodical with the development log and be aware of all the changes, check effect logically.

    Not a problem! I'll just post the proposed changes here for you and not actually add anything myself - sorry about that.

    Talk to you soon!

    Cheers,
    Tyler

  • Zen

    Seriously please do not be sorry. I really appreciated your help. Access granted.

    But for your reference and a problem the site seems to have experienced:

    - Both the jobs and experts individual user profiles/jobs is now missing and only vanished this past 3 hours. The slugs are there and it is pulling through the search box.

    Know anything about why it would do that?

    Also the magnifier glass on the search box for both jobs and experts is still squew wiff (it's sat below the search box).

    If there is a chance we could solve this it would be great.

  • Zen

    Also now the skills and social profiles text does not line up and there are glaring white lines there which look out of kilter. I thought the misalignment was because I was adjusting the margins but I was wrong.

    The Social profile/skills tabs did not take to the color changes and so are not apparent initially as they are black and white when hovered over. Please do tell me which bit this relates to in the css as I will change it if I know where please.

    The objective is just to make it all look professional and tidy.

    Gosh...sure we will be glad when we are at then end of this one.

  • Tyler Postle

    Hey Zen,

    Thanks for all the input. I have looked over the code above to see why the experts descriptions are now showing in grey font whereas previously they were in white.

    For that you can this CSS:

    .ig-container p {
        color: #fff;
    }
    
    .ig-container blockquote p {
    color: #dd8500;
    }

    The second part there is to keep the headings orange.

    - Both the jobs and experts individual user profiles/jobs is now missing and only vanished this past 3 hours. The slugs are there and it is pulling through the search box.

    I'm able to visit individual Jobs and Experts pages without any issues, are you still not seeing them? For example:

    Here the text is also in grey.

    /* section heading colour */
    
    .panel .panel-heading {
        color: #dd8500 !important;
    }
    
    /* content colour */
    
    .tab-content p {
        color: #fff;
    }

    That should change it :slight_smile:

    The links do not 'link'. I.e. if you click on name = no response.

    Not sure what you mean by this? When I click on "Your Name" it opens up a popup to input the first and last name. Is that not happening for you?

    Also now the skills and social profiles text does not line up and there are glaring white lines there which look out of kilter.

    /* remove white lines */
    
    .ig-container .panel-heading {
        border-bottom: none;
    }

    The Social profile/skills tabs did not take to the color changes and so are not apparent initially as they are black and white when hovered over.

    What colour do you want the tabs to be? text colour and background colour.