- This topic has 11 replies, 2 voices, and was last updated 8 years, 10 months ago by
Tom.
-
AuthorPosts
-
April 6, 2016 at 1:51 am #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
taglineall 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,
DinaApril 6, 2016 at 10:31 am #184709Tom
Lead DeveloperLead DeveloperHi 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>
April 6, 2016 at 1:16 pm #184770avraham
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:
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,
DinaApril 6, 2016 at 1:31 pm #184772avraham
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.
April 6, 2016 at 1:33 pm #184773avraham
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?
April 6, 2016 at 11:07 pm #184841Tom
Lead DeveloperLead DeveloperYou can upload them to your media library in your Dashboard and then just link to them here ๐
April 6, 2016 at 11:52 pm #184860avraham
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!
April 6, 2016 at 11:53 pm #184861avraham
Oh, sorry I forgot the URL:
April 6, 2016 at 11:55 pm #184863avraham
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!
April 7, 2016 at 3:09 am #184939avraham
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!
April 7, 2016 at 10:01 am #185073avraham
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.
April 7, 2016 at 10:27 am #185079Tom
Lead DeveloperLead DeveloperGlad you got it all working. Let me know if you want to revisit the padding issue ๐
-
AuthorPosts
- You must be logged in to reply to this topic.