Archived topic

Page-header add-on: Text next to image

9 replies · Started by Are Martin on May 15, 2015

Viewing posts 1–10 of 10

May 15, 2015 at 8:17 am #108077

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

May 15, 2015 at 9:10 am #108104

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 :)

May 15, 2015 at 10:09 am #108124

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...

May 15, 2015 at 11:03 am #108138

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 :)

May 15, 2015 at 2:00 pm #108172

Thanks a lot! That worked perfect! :)

May 15, 2015 at 11:58 pm #108221

No problem! :)

May 2, 2017 at 2:12 pm #313145

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):

May 2, 2017 at 8:35 pm #313215

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.

May 4, 2017 at 5:33 am #313828

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

May 4, 2017 at 9:45 am #313919

No problem! I'm glad I could help :)

This archived topic is closed to new replies.

Start building better websites today.