Subheader in Pro

Support
#1

I’m testing the Pro version and am I’m wondering how to achieve a subheader of sorts with a background image? Ideally it would look like this screenshot which shows the page title in the masthead: http://take.ms/rR4DJ I achieved the look in this example in Safari’s Web Developer Console by removing <header class="entry-header"> <h1 class="entry-title">Kind Words</h1> </header>
and putting it in the masthead section of the header and then adding CSS to style the page title and masthead height. That all would work for me but i cant figure out how to edit the header.php or whatever needs to be edited for me to move the entry-header section into the masthead.

oh and then i need to NOT have these changes on the home page, just every non-home page. is that possible? my test site is: http://devx.tech4eleven.com

thanks!

#2

Hey there,

Please see this setup https://youtu.be/pKDR7skQxHo

If you want dynamic headline or getting the page title automatically, you need to modify template files. Regretfully, that would be custom development which is outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

#3

Hi there,

Thanks for posting in.

Not all pages have featured image, but yes, possible in single posts. BUT, that would be a lot of customization since the entire page is not just composed of a single template. BUT, you can do it with javascript, you may add this to your global custom javascript.

jQuery( function($) {

$('body.single .entry-featured img').each( function() {

$('<div class="header_cover" style="background: url(\''+$(this).attr('src')+'\')">').insertAfter('.x-masthead');

$('.entry-header').appendTo('.header_cover');

$(this).remove();

} );

} );

And this CSS to your global custom CSS

body.single .x-masthead {
    height: 0;
}
.header_cover {
    position: relative;
    height: 0px;
    padding-bottom: 60%;
    background-size: cover;
}
.header_cover .entry-header {
position: absolute;
    top: 45%;
    width: 80%;
    left: 10%;
}

Thanks!

#4

I added that code and then added a featured image to the page but this is what it gave me: http://devx.tech4eleven.com/kind-words/ just the image above the title and content area.

#5

i was able to achieve what i wanted by moving the page title code from content-page.php and putting it in masthead.php and adding some css, all in a child theme of course. no javascript needed. no foreseeable issues. thanks for the direction!

1 Like
#6

Glad you’ve sorted it out. That is the recommended way but please do note that parent template files might change or have changes in the future so you’ll need to update your child templates when that happens.

Thanks.

#7

Hi there,

Joining this discussion, and I hope that’s okay!

I had previously designed this exact type of post header in an X child theme, with a background image and meta data specific to each post in ‘x-header-landmark’.

I’ve since switched to Pro and added a custom header through the Pro interface, but when the custom header is applied to a post, the post’s individual header disappears (really, the entire ‘x-header-landmark’ class is missing).


vs.

Any ideas?

Thanks.

#8

Hi,

Yes, the entire x-header-landmark is removed when using PRO Header.

You can try adding your code in x_before_site_begin hook

ADD this in your child theme’s functions.php

function my_header() {
  // Add your custom header code here
}

add_action( 'x_before_site_begin', 'my_header', 10 );

For more information kindly refer to the link below

https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208

Hope that helps

#9

Thanks. I just added a new div called x-header-landmark to the a mastehead file in my child theme. No time to recreate all that work.

Everything is working now. Thanks!

#10

Glad that we could be of a help :slight_smile: