Centering Header Image
-
I guess this is the right forum for this. I’mm using a widget that displays my header image. I’m looking toi center the image and name of my blog Blogging Perspectives Daily. I’ve searched for the code to center the image, and tried some code I already knew of, but to no avail. Can someone tell me how to center my image? or point me to the code to do so? Thanks.
The blog I need help with is: (visible only to logged in users)
-
I’m supposed to be at work, but you might read this article about the Inuit Theme.
http://wpbtips.wordpress.com/2010/04/26/featured-postsimages-in-inuit-types/Or perhaps another volunteer can give you more precise information.
-
Widget titles can’t be centered. Delete the widget title and paste this in the widget:
<div style="text-align:center;"> <h1>Blogging Perspectives Daily</h1> <img src="http://www.globaldevelopmentcommons.net/files/imagecache/site_post_full/files/Light%20Bulb%20innovate.JPG" /> </div>If you don’t like the divider lines that will show up, write h5 instead of h1.
But:
a) I don’t see why you want the blog title twice;
b) better upload the image to your blog via Media > Add New and use the URL you’ll get, instead of linking to an image hosted elsewhere. -
Panos
Thanks for the help ….much appreciated. I see the points you’re making. It is redundant to have the blog title twice. I would like to display it once. As you can see the first title will not fit on one line which is what I’d prefer. Then I could lose the title above the header image. How would it be if I did away with the first listing? leaving the title above the header? I guess it may be a matter of aesthetics, but the title above the header would be too small …How would you approach it Panos?
-
Deleting the actual blog title is very bad for search engines. I would approach it this way:
-
Panos …
After some trial and error I came up with this ….
<div style=”text-align:center;”>
<h2> </h2>
<img src=”http://joer223.files.wordpress.com/2010/07/blogging-perspectives-daily-blogging-news-tips-and-views-modified.jpeg” />
</div>Man I just wish I could get my blog title onto one line, bit I can live with the way it is now ….
if you or someone could take a look and see what you think …that would be great!
-
Now put this in the widget to see what the post I linked to means:
<img style="margin-top:-170px;" src="http://joer223.files.wordpress.com/2010/07/blogging-perspectives-daily-blogging-news-tips-and-views-modified.jpeg" width="610" />
Create a version of your image with the title and tagline on it and you’re done. -
I appreciate very much the time you’ve spent trying get me up and running with this.
I followed your instructs, but at margin-top 170px and width 610 the image becomes a bit choppy and the tag I created is not visible …I bumped margin-top down to like 40
to get the entire tag to show. It’s not working out quite like I thought it would. If you look at my blog you seeBlogging Perspectives Daily
Blogging New Tips and ViewsWhere Blogging New Tips and Views is the tag in much smaller type. I think I would like to keep the original title I have and somehow fit the image in the margin there.
I don’t know if that entails doing something with CSS or in HTML, I don’t have a paid CSS style sheet so don’t know if what I’m asking is impossible to do,
So again, Panos thank you for all the help you’ve given me thus far ….Joe
-
I didn’t suggest the code above as the final solution, I only suggested it so you could see “what the post I linked to means”, i.e. where an appropriate image would be positioned. You didn’t like the huge title, so the idea is:
a) Use an image editing application to create a 610px wide image “with the title and tagline on it” – something like this:
http://wpbtips.files.wordpress.com/2010/07/lightbulbs.jpg
b) Upload it via Media > Add New and copy its URL.
c) Use the negative margin trick so that the image will mask the original blog title and tagline:
<img style="margin-top:-170px;" src="IMAGE URL HERE" /> -
Panos
Man I can’t thank you enough …I don’t know what to say …thank you so very much …
You certainly not only made my day ….but you’ve made a great contribution to my blog!Sincere thanks ….
-
Panos ….maybe I misunderstood, do I have your permission to use that image? I’m using Ubuntu Linux, and don’t really know of an image editor that could perform what you’ve created ….
-
I’m not Panos, but knowing him, he would not have posted it if he didn’t want you to use it (if it is what you want). Why do the work again, like: no need to re-invent the wheel.
Just give him your first-born child.
(that is a joke of course) -
Of course you can use the image. But that image was just a quick example – it isn’t perfect, plus you might prefer a different height or a different color for the title etc.
I used an image editing application, but you can edit your images here (text tool is included):
http://www.picnik.com/ -
@both,
I might have been presumptuous to nose in, but with the best of intentions. It’s the middle of the night in Greece, so in aid of a (possibly) quicker response I jumped in. Sorry, I was trying to think of the online image editing program I have looked at a couple of times, but my brain froze (Gimp).
Now, I’ll volunteer to broker the exchange of thin energetic 19 yr. old first-born…
-
Oh, my. I even gunked the Gimp up—
it is a downloadable program, not on-line (I’d been looking at it for people at work but is too complicated… not linux i think
-
@1Tess ….
I downloaded and installed Gimp with just a call from the command line….just one of the beauties of Linux, and more specifically Ubuntu …Still trying to figure out how to use it … :)
LOL ….love your sense of humor …I’d be happy to pack him up and send him to Greece for a month ;)
-
Good to know then: I don’t know anything about linux.
Gimp was far too complicated for my co-workers who have trouble opening more than one browser window at a time. Oh, and then some of them refuse to use files to store documents—if they are not on the desktop they will be lost…
On second thought, Greece for a month doesn’t sound bad!
- The topic ‘Centering Header Image’ is closed to new replies.
WordPress.com Forums 
