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

Home Forums Support Page-header add-on: Text next to image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #108077
    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

    #108104
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #108124
    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…

    #108138
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #108172
    Are Martin

    Thanks a lot! That worked perfect! ๐Ÿ™‚

    #108221
    Tom
    Lead Developer
    Lead Developer
    #313145
    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>
    #313215
    Tom
    Lead Developer
    Lead Developer

    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.

    #313828
    BeeLady11

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

    #313919
    Tom
    Lead Developer
    Lead Developer

    No problem! I’m glad I could help ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.