[Resolved] Page-header add-on: Text next to image

[Are Martin]

In the page-header add-on you can add text or other stuff with the page-header image set as a background. However, I was wondering if it is somehow possible to align text next to, above or below the image with a colored background for the text?

I also wonder if it is possible to remove the padding around the image so there´s no gap between the page-header image and the edge of the container when image appears inside content area (just like in the page-header video)?

Thanks for a great theme!

Kind regards

Are Martin

[Tom]

Hi Are,

You can do this inside the Content tab of the Page Header.

For example, an image on top:

<div class="my-custom-page-header">
      <img src="YOUR IMAGE URL" alt="" class="aligncenter" />
      <p>My text in here.</p>
      <p>One more paragraph.</p>
</div>

Image float left:

<div class="my-custom-page-header">
      <img src="YOUR IMAGE URL" alt="" class="alignleft" />
      <p>My text in here.</p>
      <p>One more paragraph.</p>
</div>

Image float right:

<div class="my-custom-page-header">
      <img src="YOUR IMAGE URL" alt="" class="alignright" />
      <p>My text in here.</p>
      <p>One more paragraph.</p>
</div>

Can you possibly take a screenshot of the moment in the page header video you’re trying to achieve?

Let me know 🙂

[Are Martin]

Thanks for quick reply! 🙂 I´ll try out your suggestions

This is the moment in the video I´m trying to achieve:

But when I set the image to display inside content area there is padding around the image…

[Tom]

Ah, in Exhibit and Forefront, there’s custom styling to push the image up against the content borders.

.separate-containers .post-image, .separate-containers .inside-article .page-header-image-single, .separate-containers .inside-article .page-header-image, .separate-containers .inside-article .page-header-content-single, .no-sidebar .inside-article .page-header-image-single, .no-sidebar .inside-article .page-header-image, article .inside-article .page-header-post-image {
    margin: -40px -40px 40px;
}

Adjust 40px to your content padding setting 🙂

[Are Martin]

Thanks a lot! That worked perfect! 🙂

[Tom]

No problem! 🙂

[BeeLady11]

Hi
I tried putting your suggested code in my child theme functions.php and now the whole site is blank. I can’t seem to get it back.
Help?
this is the code I put in (I was playing around, trying to put some text on the right of the header):

<p>My text in here.</p>
<p>One more paragraph.</p>

[Tom]

Hi there,

The code above goes into your Page Header Content area – not in your functions.php. You’ll need to access the functions.php file via File Manager in your hosting control panel or using FTP and remove the code you added. Your hosting support might be able to help you reach the file if you’re having trouble.

[BeeLady11]

Ah. Tx for that – what an idiot! (and tx for not pointing my stupidity out, too!)

[Tom]

No problem! I’m glad I could help 🙂

[Author]

Posts