Use an image for Blog Title?
-
Anybody know of a way to change the title/tagline from text to an image? I’m looking to use a speficic png file I’ve uploaded to the media section as oppoosed to the fonts that come available with the site. I do have the custom package and am using the twenty-eleven template. Note that I am not looking to adust the header (I like the UI on that.) I’m looking to change the blog title / tagline to an image instead of text.
I’m not really familar with css, but if anyone knows where I could find a code snippet that I can add, I’d be willing to have a go. Thanks in advance!
The blog I need help with is: (visible only to logged in users)
-
-
Sure! here it is. (it’s a work in progress, so I’m sure the dimensions would need to be changed but we’re close to final design)
Thanks! That was fast!!
-
Leaving some whitespace above and below the image, it is going to have to be no more than 100px tall. I would suggest doing a pretty tight crop and then sizing what is left over for 100px tall. That is unless you want to increase the height of that white area at the top of the site, which might get a little overwhelming (not to mention push the content way down.
-
-
This is a little CSS slight of hand. What we are doing is indenting the existing title text way off to the left, outside of where any browser can display it instead of “hiding” it. The reason for that is that we want to retain the link operation. We then set the line-height to the height of the image we are inserting (100px as an example) and then declaring “display: block;” to turn the whole region into a clickable area.
After getting the image in, there may be some other adjustments that will be required such as paddings/margins and possibly a width may have to be declared in #site-title if the image goes outside of the #site-title a area.
Get your image prepared and uploaded to the media library, get the URL and replace URL OF IMAGE between the double quote marks with that URL.
#site-title a { background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent; display: block; line-height: 100px; text-indent: -999px; } -
-
You are welcome. I forgot to dispatch the site description/tagline to the middle of nowhere. Add the following as well to make it disappear.
#site-description { text-indent: -999px; } -
Awesome. that did it. Just need to play with the image itself so it looks right, but this is the css code I needed. Thanks a ton!
-
-
Hi. I also want to put an image in a blog title. I did what was instructed by thesacredpath but I did not get what I want. I am responding to this because I think that dimensionelevensies described exactly what I wanted. But to be more precise, plese checkt this link and see the logo/image that “replaced” the blog title:
http://www.sondersphotography.com/blog/
Thanks.
-
I forgot to mention that I copied the code that was provided by thesacredpath inSettings -> General – > Site Title
Should I be doing that inside Text widget instead?
For the meantime, I’ll further search on how to do this.
-
Sorry, sondersphotography.com/blog/ is self-hosted and you need to head over to the WordPress.org forums as that is where self-hosted wordpress blogs using the software from wordpress.ORG are supported.
These forums are for those hosted here on the wordpress.COM free hosting service and things here work differently.
If you are not familiar with the differences, see this support document.
-
Hi thesacredpath.
I am a wordpress.com user, not .org. I only cited sondersphotography.com/blog/ as an example and to clearly illustrate what I wanted to do and if it can be done in a wordpress.com blog.I would like to ask also that if ever there is a workaround on doing it (image as site title to replace text), can it still be done even without a CSS upgrade?
Thanks.
-
@ajfudgeology
Please post an active link to the WordPress.com free hosted blog that you purchased the annually renewable custom design upgrade for. -
Hi. My free hosted blog is http://ajfudgeology.wordpress.com
I’m fairly new to wordpress as I only migrated my contents from another blog, so I’m still learning what can be done with the basic/free/non-paid wordpress.com account.I didn’t upgrade for the custom design upgrade (basically because I’m not fluent in CSS and I’m such a cheapskate :p ). So, I’m going to change my question if I may. Can I “remove” my site title (not the header, just to be clear) which is in plain text and replace it with an image that I uploaded in my Media Library? If yes, do I have to purchase the custom design upgrade to be able to do this?
To give you a clear idea of what I’m talking about, you can check http://www.sondersphotography.com/blog/
Please bear in mind that this is just to provide a visual example of what I want to achieve in my free/basic/not upgarded wordpress.com account.Thanks.
PS: I’ve read A LOT of your articles, timethief and they provided me with a lot of clarity. Thanks for that. :)
-
There is a trick that can be done by putting a linked image into a text widget and then moving the text widget up and into the site-title area, but it is not an optimal solution in most cases since the logo will appear to shift up or down in relation to the content whether someone is logged into wordpress (admin bar present) or not logged in (no admin bar). When you have the Custom Design Upgrade, the shifting up or down behavior can be fixed.
The other thing is CSS is theme specific, so the solution for you would be different than for @dimensionelevensies.
-
@thesacredpath
I want to give it a try :) How do I put the text widget up into the site title area? Do I have to use a code or just paste my image URL? (btw, this is the image that I’ll be using http://ajfudgeology.files.wordpress.com/2011/12/title.jpg)I also have an idea but I’m not sure if it will work. Can I just include the image in my Custom Menu? Now the problem with that is I don’t know how to make the image appear.
I am using Modularity Lite theme.
-
First off, you are going to have to make the image much, much smaller since there is very little room to work with above the container area. The image is going to have to be about 40px tall since we have to account for the admin bar. Once you get the image done, upload it to your media library, and substitute the image URL for the IMAGE URL text between the double quote marks in the following and put this into the text widget and click save.
<a href="http://ajfudgeology.wordpress.com/"><img src="IMAGE URL" title="" alt="" /></a>Post back here when you get that done and I’ll see what I can do to get it moved up.
-
I followed your instructions. I put the text widget in the sidebar for now. It appeared. :)
- The topic ‘Use an image for Blog Title?’ is closed to new replies.
WordPress.com Forums 
