Adding header div for background image with overlay

  • Resolved Stefan

    (@joamp)


    7 years ago

    Hey Tom, first of all, you’ve made a great theme, thanks for that.
    Now, I try to make some custom changes to the header using a child-theme. Basically, I want to add a background-image with a transparent color overlay in the header of the front-page. Therefore I thought of adding a <div> element above the <inside-header> class so that it is inside of the parent <header> class. With pure html and css it is pretty easy, but I’m just started to learn php, so it’s a bit more difficult to get this right without messing up the code.

    I’ve searched the forum and the Internet but couldn’t find a working solution. I’ve tried every hook from the header.php, but they don’t support the right spot I’m looking for. Then I’ve found another header.php file in the directory inc/structure/header.php with a do_action(‘generate_header’) hook, but I can’t use it I think. I’ve tried to copy and edit the file, but this doesn’t work since WordPress probably doesn’t know that I’m using it and I don’t know how to change this.
    But when I add the <div> in the original header.php in the structure directory it worked. But this is not a proper solution I guess. So finally how can I add the div to structure/header.php without hardcoding it into the existing file? What is the best practice to achieve what I’m looking for?

    Hopefully, it makes sense what I’ve tried to convey.

    Best regards

    • This topic was modified 7 years ago by Stefan.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    Glad you’re enjoying the theme!

    Have you tried using multiple backgrounds to tint the background image? You can find examples here: https://css-tricks.com/tinted-images-multiple-backgrounds/

    Let me know ??

    Thread Starter Stefan

    (@joamp)

    haha, how easy was that? That works like a charm thanks Tom. Learning never stops. Could you give me a hint, how I could add a div or any other element into places in the theme files where are no hooks included? I mean beside hardcoding a do_action. Are there possibilities using function.php? Sorry for that noob question, but I really try to dig into PHP.

    Have a nice weekend!

    Theme Author Tom

    (@edge22)

    Without altering core theme code (not recommended at all), you would have to use hooks or filters. What area are you trying to target?

    Thread Starter Stefan

    (@joamp)

    It was a general question. I work with a child theme. Of course, I don’t want to change core files and by the next update, everything is gone. I don’t want to occupy so much of your time here. I think I just have to dig deeper into coding.

    Anyway, I will buy your premium package soon. Maybe I specify my question in the Genratepress forum then.

    Theme Author Tom

    (@edge22)

    No problem! Let me know if you have any other questions ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding header div for background image with overlay’ is closed to new replies.