Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Adding images (aside from logo) in the header

Home Forums Support Adding images (aside from logo) in the header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #184592
    avraham

    Hi Tom,

    I know this has been addressed before, but I can’t seen to find it with a search.

    I would like to have in my header area:
    background color
    logo
    site name
    tagline

    all flush left

    plus

    images to include in the center or flush right side of the header. Not as a background, but sitting atop the background. And not as a logo either.

    Do I do this in the hooks section? What is the process for doing this?

    If you want to take a look, this is the website so far:
    http://thejwws.com/

    Thanks so much,
    Dina

    #184709
    Tom
    Lead Developer
    Lead Developer

    Hi Dina,

    If you want content in the left, center and right of the header, then you need to use GP Hooks.

    For example, you would add this into the Before Header Content area:

    <div class="grid-33">
        Content for the left side
    </div>
    <div class="grid-33">
        Content for the center
    </div>
    <div class="grid-33">
        Content for the right side
    </div>
    #184770
    avraham

    Thanks so much Tom!

    This is the code I put in the before header hook:

    Without anything in the hook section, only using the header add-on, the header looks like this:
    regular header

    Adding the above code to the before header hook section, the header then look like this:
    header out of wack

    Not quite sure where i messed up? The alignment is wrong for the logo, site name, tagline. The float right image is missing.

    Guidance is much appreciated!

    Thanks for your help Tom.

    All the best,
    Dina

    #184772
    avraham

    Wait, the code didn’t all show up.

    <div class="grid-10">
        <a href="http://thejwws.com/"><img src="http://thejwws.com/wp-content/uploads/2016/03/logo-no-date-50-px.png"></a></div>
    <div class="grid-40"><a href="http://thejwws.com/"><p style="font-color: black; font-size: 22px; font-family: Great Vibes;"><strong>Jerusalem Women's Writers Seminar</strong></p>
    <p style="font-color: black; font-size: 15px; font-family: Prata;">Stretch. Explore. Write!</a>
    </div>
    <div class="grid-50">
        <img style="float: right;" src="http://thejwws.com/wp-content/uploads/2016/04/bookshelf-100px.png">
    </div>

    Okay maybe that is better.

    #184773
    avraham

    And my images didn’t show up either. Hmm.
    I took the code out because people are looking at the site now and I don’t want it showing up all funny.

    Is there a way for me to attach the images so you can see what I mean?

    #184841
    Tom
    Lead Developer
    Lead Developer

    You can upload them to your media library in your Dashboard and then just link to them here 🙂

    #184860
    avraham

    It worked this time! Just the tagline is hanging out too low. I would like both site name and tagline to be directly to the right of the medallion that is the logo.

    Here’s my code”

    <div class="grid-10">
        <a href="http://thejwws.com/"><img src="http://thejwws.com/wp-content/uploads/2016/03/logo-no-date-50-px.png"></a></div>
    <div class="grid-35"><a href="http://thejwws.com/"><p style="font-color: black; font-size: 22px; font-family: Great Vibes;"><strong>Jerusalem Women's Writers Seminar</strong></p>
    <p style="font-color: black; font-size: 15px; font-family: Prata;">Stretch. Explore. Write!</p></a>
    </div>
    <div class="grid-55">
        <img style="float: right;" src="http://thejwws.com/wp-content/uploads/2016/04/flowers-and-books.png">
    </div>

    So I need to do anything specific to the line Stretch. Explore. Write! In order for both of them to be beside the logo?

    Thank you so much Tom, you have saved my website many times!

    #184861
    avraham

    Oh, sorry I forgot the URL:

    http://thejwws.com/

    #184863
    avraham

    If I want to adjust the padding, and maybe have the image of books and flowers sit right above the top of the nav bar, what do I do for that?

    Thanks!

    #184939
    avraham

    Can I use a header widget for the image?

    I tried to put the image in the header widget area in Customize, and i got this little square in the corner, but no image.

    This is what I put in the widget box:

    Am I doing it incorrectly? Is the header widget a viable option for this situation?

    Thanks!

    #185073
    avraham

    Hi Tom,

    I played around and did get the header widget to work. And the grids in the hooks also worked. Thank you so much! I couldn’t figure out the padding though, so I am shelving this idea for now.

    #185079
    Tom
    Lead Developer
    Lead Developer

    Glad you got it all working. Let me know if you want to revisit the padding issue 🙂

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