Styling the staff page

Hi,

I’m using the west theme and trying to style the individual staff pages (after you click on the thumbnail). I’ve made a template with live composer and this works fine for the bottom part of the page, but in the upper part every page shows the standard image and the title. I cannot style these the way I want to with live composer. Is there a workaround? or can I just not show them?

http://www.tindrum.be/vintageriders/#bikes (bikes = staff)
click through on one of the bikes eg: http://www.tindrum.be/vintageriders/staff-view/gianni-vespa-sportique-125/

My ideal situation would be: the header image would be the standard image of the staff with the title on it. possible?

tx

bert

Hello Bert,

You can set different header image on each post type entries like Staff by using the Unique Headers plugin. Once this plugin is active, edit your desired staff, and upload your image in the Custom header box.

To replace the default header text with the staff title, do these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){
      
    "use strict"

    if( $('.single-dslc_staff').length ) {

        var title = $('.entry-header .entry-title').text();

        $('.header-image .header-text').text(title);
    
    }

})(jQuery);

  1. Update

I hope this reply helps.

Feel free to open a new topic if you have anything else to ask.

Regards,
Kharis

wow Kharis,
what a swift and helpsome answer! it works!

extra question: I want to do the same for my projects pages. I tried, with no luck:
(function($){

"use strict"

if( $('.single-dslc_projects').length ) {

    var title = $('.entry-header .entry-title').text();

    $('.header-image .header-text').text(title);

}

})(jQuery);

Hi Kharis,
I see now that if i look at the pages on tablet or iphone it returns the original header image. any solutions?

tx a million
bert

Hello there,

Try to use this code:


(function($){
      
    "use strict"

    if( $('.single-dslc_projects').length ) {

        var title = $('.entry-header .entry-title').text();

        $('.header-image .header-text').text(title);
    
    }

})(jQuery);

So your custom jQuery code will look like this:


(function($){
      
    "use strict"

    if( $('.single-dslc_staff').length ) {

        var title = $('.entry-header .entry-title').text();

        $('.header-image .header-text').text(title);
    
    }

})(jQuery);

(function($){
      
    "use strict"

    if( $('.single-dslc_projects').length ) {

        var title = $('.entry-header .entry-title').text();

        $('.header-image .header-text').text(title);
    
    }

})(jQuery);

> I see now that if i look at the pages on tablet or iphone it returns the original header image. any solutions?

To fix this, add the below CSS code into Appearance > Customize > Additional CSS.


@media only screen and (max-width:1024px) {
  
  .single-dslc_staff .large-header,
  .single-dslc_projects .large-header {
    display: block !important;
  }
  
  .single-dslc_staff .small-header,
  .single-dslc_projects .small-header {
    display: none !important;
  }  
  
} 

Regards,
Kharis

another question about this Kharis,

the title still does not appear on the projects page. it works on the staff page.
copied it as you told me to.
(if i remove the second java function, it gives the main title, so it does something, but does not show the title).

Hello there,

Please keep the code remains there and share the link to one of your projects, so I can debug the trouble.

Regards,
Kharis

hi Kharis,
sorry about that. did a migration to our permanent hosting and did not update the links here!

main site: http://www.vintageriders.be
project page : http://www.vintageriders.be/project-view/natural-swimming-pond/

thanks

bert

Hi Bert,

To fix it, try one of the below plugins:

Regards,
Kharis

Hi Kharis,

I do not see a result after using the plugins…

gr
bert

Hi Bert,

Maybe I couldn’t catch the problem clearly. Doesn’t this project item (http://www.vintageriders.be/project-view/natural-swimming-pond/) present in the “Stories and Hotspots” section on your homepage? Please advise.

Regards,
Kharis

Hi Kharis,

what i would like is that all project pages (eg http://www.vintageriders.be/project-view/natural-swimming-pond/) show the title on the header image.
for some strange reason it doesn’t (if you first load it it shows it for 1 second and then it disappears).

gr
bert

Hi Bert,

The custom jQuery code I suggested to display the project title on the header image doesn’t seem to work due to the below JS error message found my Firefox’ console tool.


ReferenceError: event is not defined

Cloudup

This comes from your Google Analytics for WordPress plugin. What will happen if you temporarily disable it?

Regards,
Kharis

no change when I disable it…

Please try to clear your web browser’s cache and then reload your page. If you have a site caching feature enabled from certain plugin like W3 Total Cache, you’d need to flush cache.

Regards,
Kharis