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

[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

[Tom]

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>

[avraham]

Thanks so much Tom!

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

<p style=”font-color: black; font-size: 22px; font-family: Great Vibes;”>Jerusalem Women’s Writers Seminar</p>
<p style=”font-color: black; font-size: 15px; font-family: Prata;”>Stretch. Explore. Write!</p>

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

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

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

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

[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?

[Tom]

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

[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!

[avraham]

Oh, sorry I forgot the URL:

http://thejwws.com/

[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!

[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!

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

[Tom]

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

[Author]

Posts