Linked Logo
-
Hello,
Per the guidelines of my university, I need to add a logo to the upper right-hand corner of my webpage and it needs to be linked to my university. I see that I can add a logo, there are two issues:
1. I do not have the option to place the logo in the location I need
2. I do not see an option to add a hyperlink to the logoAny information or guidance would be greatly appreciated.
The blog I need help with is: (visible only to logged in users)
-
Hello there,
Can you please confirm the URL of the site you require help with?
I am asking because when I try to access your site http://armstrongresearch.wordpress.com/, I encounter an error saying that this site is no longer available.
Please let me know if you still require help with your WordPress.com hosted site and I will be happy to help :) Thanks
-
Hi,
Thank you!
Yes, the URL is https://armstrongresearch.wordpress.com/
I’m showing that it is public and I was able to see it when using various browsers.I am definitely still interested in help if you can. Seems like I may have a separate issue though if you can’t see the site!
-
Your site is loading OK for me. Do you have specifications on where the linked logo has to be, or is the general upper right-hand corner area acceptable?
I think you might be butting up against design limitations of the theme you’re using, but we’ll see if we can figure out a way to make the site look the way you need it to.
-
Hi!
The Logo area that is built into a theme is, by default, linked to the home page of the site. What you could do is add an image that links back to your school and have that image appear on every page of the site.
One possibility would be to add the linked logo image to the sidebar as an Image Widget and then use CSS to position it in the upper right hand corner. You would need have the Premium plan to be able to make CSS customizations.
You could also try to find a theme that has widget areas in the right side of the header. If you search the Themes page for “widget” and “header”, you might find a possibility there. Then you would add an Image Widget to that widget area.
I hope this helps — please reply to this thread if you’d like more clarification or help implementing any of these ideas!
-
Hi @aprilarmstrongblog, as @jesscga says, to make the change would require the Premium Plan upgrade. I did take a look at your site, and the following screenshot will give you an idea of what is possible. Additional adjustments can be made as necessary.
Screenshot: https://cldup.com/K4nWa1i-Bz.png
This is the Custom CSS for the above.
.site-branding.has-header { text-align: right; margin-right: 40px; margin-top: 30px; margin-bottom: 70px; } .site-branding.has-header img { max-width: 360px } .site-branding.has-header .site-title { margin-right: 0 } -
Thank you both so much for your replies. I was just granted permission to purchase the premium package. I inserted the Custom CSS @thesacredpath very kindly provided above and it worked – it now looks like the screenshot provided.
The final touch is to make the logo link to usc.edu. Not to wear out your kindness, but any thoughts on how to make the image a hyperlink?
Thank you very much for your help!!
-
Hi! Great news about the ability customize with CSS. :)
Since the logo links, by default, to the home page of the site, one solution would be to do a similar CSS positioning trick with an image you place in the sidebar instead of the logo image.
If you’d like to try this, please add the USC logo to the sidebar using the Image Widget. Here’s our how-to on using the Image Widget: https://en.support.wordpress.com/widgets/image-widget/.
When you get to the part where you select the image, note the Attachment Display Settings on the right sidebar. Under “Link To”, select “Custom URL”, and paste the USC web address in the box. That will link the image to their website.
Once you’ve done that, please reply to this thread and we’ll help you with the CSS to put it where you need it to go.
You can then add a different image to the logo section of the Customizer (or remove it completely, if you don’t want a logo image).
-
@, just to avoid any possible confusion, replace all the custom CSS you have now with this.
.site-branding.has-header { text-align:right; margin-right:40px; margin-top:30px; margin-bottom:70px } .site-branding.has-header img { max-width:360px; visibility: hidden; } .site-branding.has-header .site-title { margin-right:0 } #media_image-3 { position: absolute; top: 25px; right: 0; margin-right: 40px; width: 360px; padding: 0; background-color: transparent; text-align: right; } #media_image-3 img { width: 100%; } #page { position: relative; } -
Thank you so much everyone! Everything works perfectly and the University approved the page. I really appreciate your help @thesacredpath and @jesscga!
-
- The topic ‘Linked Logo’ is closed to new replies.
WordPress.com Forums 
