How to add an img on top of the blog

Thanks for choosing Tracks!

To add that code to the top of every page, you’ll want to include it in the header.php file either before or after the <header> element.

I would recommend using a child theme for this change, so you don’t lose it when updating to new versions of Tracks. You can click here to download a Tracks child theme if you don’t have one already.

P.S. Tracks Pro also has a header image feature.

Hi Ben,

I have the Pro version, but I’d like to place my logo over the header image. Should I also be adding that to the header.php file? I want to make sure I don’t mess up the code, but I’d love to float it there like a true hero image.

Let me know, thank you!

Thanks so much for upgrading! This can actually be done without editing any PHP files.

I think the easiest way would be to overlap the images with a graphics tool like Photoshop, and then upload that image as the header image. However, if you don’t think this would work well for the layout you have in mind, please share a link to your website, and I can come up with some CSS to make it happen.

Hey Ben,

Thanks so much for your reply – I’ll try going the Photoshop route, but I might play with how to add the CSS logo myself as well… would you just add a floating div with the logo inside it? Anything I have to do to override the plugin?

I’m newer to CSS, so this should be an interesting challenge.

Thank you! ??

Sure thing!

You could probably use absolute positioning to put the title over the header image without adding any new markup. Something like this for instance:

#title-info {
  position: absolute;
  top: 30px;
  z-index: 99;
  left: 5.55%;
}

^ That is just an example and will definitely need to be fine tuned, but the idea is that the site title is positioned near the top left part of the site and will overlap any elements behind it.

Hi Ben,

This CSS works for the headers in posts, but when I try to set a page to the homepage and add the Header through my Pro version, the whole page is just pushed down – how can I float my logo over the header I add through the Customize tab? That’s why I thought I needed to change the PHP files…

Any advice is welcomed, thank you thank you!

That CSS should work on every page of the site. Could you share a link, so I can check it out?

Thanks!

Hey,

I temporarily made the page my homepage so you can see: https://69.195.124.168/~onceweso/

My goal is to have the Once logo float over that top header!

Thank you so much Ben,

Katie

I’m also not sure why it’s showing up twice now – the larger one is the one I want, but it’s manifesting as the page logo and as a separate title…help!

Hello!
I am wondering, is there any way to add an full screen image under the primary menu and before the website content?
I’ve tried some plug-ins, but nothing there seems to be working..:v

Hi Ben,

I’ve been able to solve all my issues by editing the header.php how I want… but I was hoping you could help me with a little PHP still! (You’ve been so, so helpful so far).

I have the header on the homepage set up how I want, but how can I edit my blog posts to have their headers echo the featured image instead of still having that main header? I haven’t been able to find the .php file relating to posts.

thank you!!

Hey sorry for the delay!

This will require a more complex customization since the header image function will need to be filtered via a PHP function, rather than changing the markup or CSS.

I can help with this, but let me just make sure we’re on the same page. You have a header image displaying on all pages now and if viewing a post that has a Featured Image you want the Featured Image to replace the current image in the header image.

Do I have that correct? Let me know and we can get started on a solution.

Thanks!

Yes! I edited the header.php file, but I would love for that markup to only apply to the homepage.

Thank you!!

Okay cool, let’s actually try using a homepage check first.

What you can do is wrap the code you changed in a PHP conditional check to see if it’s the homepage, like this:

if ( is_front_page() ) {
  echo "homepage"
} else {
  echo "not homepage"
}

You can place the old code in the else statement, and put your update code in the is_front_page section only.

Hi Ben,

Thanks for this! I’m newer to using the .php files, so I want to make sure I don’t crash the site… where exactly would I put the old and new code?

This is where I’d guess to put it…

if ( is_front_page() ) {
echo “homepage”
**putting updated code here**
} else {
**put old code here**
}

… is that at all correct?