Changing Header Text to An Actual Image.
-
Hello,
I have been trying to change the Header Text on my blog and replace it with an image instead. I’m not sure how to go about doing this and if this is even capable of being done with CSS. Can someone help?
The blog I need help with is: (visible only to logged in users)
-
Hi there, first off, you need to upload the image to your media library. The existing area where the text title is is about 240px wide by 45px high. If your image is larger than that, then adjustments will need to be made to the header area to accommodate it.
If you can upload it to your media library and then post a link to it here, we can help you get it into the header area.
-
Hello,
thank you for replying to me, I greatly appreciate the help. Per your request (and I do hope this is the correct link) I have included the image that I wish to replace my text title with. I sized it to be 78×59 I believe.
Here is the link: http://nonsensicalover.com/?attachment_id=1724
-
Is there any way I could get the same help? I am very new to this site and i cannot write code. Any help would be appreciated
-
Hi @milfordpolice, since you are using a different theme, and since CSS is theme specific, can I ask you to create a new thread in the CSS Forum and I’ll watch for it and help you out. Many thanks in advance.
-
@nonsensicalover, you will need to purchase the Custom Design upgrade before you can apply these changes to your site. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
#branding { background: url("http://nonsensicalover.files.wordpress.com/2014/11/little-york-actual-logo-completed.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 75px; } #branding #site-title a { color: rgba(0, 0, 0, 0); display: block; } #branding #site-title { line-height: 60px; margin-bottom: 0; }The first rule above adds the image, the second makes the existing site title transparent and the third adjusts things so that your logo is clickable as a return to your home page.
Given the nature of your logo image at the small size it is, it is very hard to read. You can make it larger and then replace the URL in the first rule above with the URL of that new image and then adjust the 75px height as necessary for the new logo height.
-
I can’t thank you enough for this! You are so incredibly helpful and this is exactly what I was looking for! I was reluctant to purchase the upgrade but with this I definitely will. I recently uploaded better graphic that I wanted to use which is this one: https://nonsensicalover.files.wordpress.com/2014/11/little-york-2nd-logo1.jpg?w=113
But my only problem with this one when using your solution is that the pages in the navigation pane are off center. Is there a way that I can fix that as well or is this going to have to stay that way?
And again, thank you so much for all of your help I really can’t thank you enough for all of this :)
-
On the menu, are you talking about vertically? If so, you can increase the top margin on the navigation to move it down. Give this a try and then you can adjust the top margin to place the menu where you wish it to be.
#menu-primary { margin-top: 40px; } -
You are just amazing, thank you so much again. I wish I could do more to repay you. You have been of huge help thank you so much. Is there anything I can do that would be of use to you? I mean this sincerely.
-
Great and glad we got things the way you want them. Thanks, and your thanks are good enough. :)
- The topic ‘Changing Header Text to An Actual Image.’ is closed to new replies.
WordPress.com Forums 
