Add External Link to Header Img
-
Hi there,
I’m looking to add an external link to the header image on my Twenty Eleven theme. I am new to CSS and so I am not exactly sure where to start. Any suggestions or help would be much appreciated.
Thanks!The blog I need help with is: (visible only to logged in users)
-
Just something to consider, but most people do not expect a header image on a site they are visiting to take them off of that site, and it sometimes makes them cranky.They expect it to take them back to the home page of the site they are on. Generally it is better to have the off-site link as a tab in the main navigation or perhaps as a linked image at the top of the sidebar.
[/opinion]What you need to do is to create a blank PNG image with no background color that is the exact same size as the header image, upload it to the media library and then put that image into a text widget linked to wherever you want people to go. After you have that completed, post back here and we can help you move it up and over the top of the header image so it leads off-site.
-
Thanks sacredpath for your help. I agree that most don’t like when the header directs them off site, but our banner image is a Facebook Page add, directing people off site. So that’s what we need it for. The blog is not public so I can’t show you what I mean.
As for the blank png image, I’ve done what you suggested. Now what?
-
If I experience any blog where there is a header redirects me off the site to another one then I leave never to return again.
-
What is the URL of the site you are talking about? The site linked to your username has no text widget with a linked image in the sidebar.
-
Sorry, the blog I’m talking about has not been made public. I created the same senario on my home blog. http://veenstraventures.wordpress.com/
-
-
There should be now. Sorry about that. I’m still trying to learn code. Thanks for your patience and your help. I really appreciate it.
-
FF is claiming that the image you uploaded contains errors. You will need to re-save a new one with a new name and then upload that one and replace the URL in the text widget.
-
Alright. I apologize for the delays and the frustrations. I fixed the image and everything should be up and running. Next steps?
-
This took far more tweaking than normal due to margins and the fact that the clickable area of the header image was larger than the image itself. Give this a try and see what happens.
#container { position: relative; } #menu img { margin-bottom: 0; padding-bottom: 10px; } #header-image { height: 139px !important; overflow: hidden !important; } .menu-custom-container { margin-top: 10px; } #text-3 { height: 142px; left: 10px; margin-bottom: 0; padding: 0 !important; position: absolute; top: 390px; width: 800px !important; } #text-3 .widget-title { display: none; } -
One thing I might suggest is that you somehow identify that that image will take people to your Etsy shop. Perhaps some text in the image to the left top, or the right. You can add that to the image. You might have to play around with sizing and placement so that it looks good, and that might take uploading and trying several images before you get where you want to be.
-
It doesn’t seem to be working. For the actual blog that I am using this for, my banner will be an image directing people to another site so it will be very clear where they will be directed. Unfortunately it wasn’t able to work though. Thanks for the effort.
-
@suzanneyvette
Just in case you are interested, if you have an Etsy shop, you can display clickable thumbnails of items from your shop (or your favorites) in your sidebar. Adding an Etsy widget -
What blog are you using it for? I need to see THAT blog and work on THAT blog. CSS is theme specific. Text widgets will not always have the same ID number.
I’ve now reread your original post and there you talk about twenty eleven.
Gaaaahhhhhh!
-
-
@thesacredpath
No wonder you are confused. This on is wearing Chunk>Sorry, the blog I’m talking about has not been made public. I created the same senario on my home blog. http://veenstraventures.wordpress.com/ https://en.forums.wordpress.com/topic/add-external-link-to-header-img?replies=16#post-789539
-
-
Thanks to everyone, I think I’ve figured some things out. Using Sacredpath’s suggestion of relative positioning, I’m able to do exactly what I wanted. Thanks so much for all your help. Timethief, thanks for the etsy suggestion. I’ll look into it.
Thanks again and I apologize for all the confusion.
Over and out.
- The topic ‘Add External Link to Header Img’ is closed to new replies.
WordPress.com Forums 