Logo instead of text heading – Coraline by Automattic theme

bunnyandsailor · Member · Mar 3, 2011 at 4:54 am
Copy link

Add topic to favorites
url: http://bunnyandsailor.wordpress.com

hello!

need some help for some not very technical girls :)

we’ve just had our company logo designed and we’d like to have this sit where the blog title currently is.

we are using the coraline theme.

can anyone help? will need instructions in laymans terms if possible!

many thanks,
bunny&sailor

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 3, 2011 at 8:53 am
Copy link
To do this it would require the CSS upgrade. Do you have the CSS upgrade?
thesacredpath · Member · Mar 3, 2011 at 9:30 am
Copy link
Actually, this could be done using a text widget and then repositioning it up and into the site title area.

What you would want to do is to put the logo into a text widget, put that text widget at the top of the sidebar and then let us know, and there are at least three people here who could help you reposition it.
bunnyandsailor · Member · Mar 3, 2011 at 10:01 am
Copy link
i’m not sure if we have that upgrade – i’m not actually quite sure how to get it! does it cost money?

sorry, as i said, not v technical!
thesacredpath · Member · Mar 3, 2011 at 10:14 am
Copy link
Yes, the CSS upgrade costs $15 per year. Like I said though, we can reposition and text widget up into that area with your logo in it. If you have your logo uploaded to the wordpress media library, give us the URL of it and we can get the code to put in the text widget figured out.
bunnyandsailor · Member · Mar 4, 2011 at 4:02 am
Copy link
thanks! just waiting for the high res version of my logo to come from my designer and I will post the link here once it’s uploaded :)
thesacredpath · Member · Mar 4, 2011 at 4:04 am
Copy link
Make sure and optimize the image for the web before uploading it. It should not be anymore than 50 or 75k in file size.
bunnyandsailor · Member · Mar 9, 2011 at 1:35 am
Copy link
is this ok?
jwdazzle · Member · Mar 9, 2011 at 1:44 am
Copy link
I’d like to know how this is done as well. Thanks.
thesacredpath · Member · Mar 9, 2011 at 3:21 am
Copy link
@bunnyandsailor, I’ve actually taken your image and optimized it for the web and saved it as a PNG instead of a JPG. PNG is better for images such as this. JPG is better for photographic images.

Your image: 594k
The optimized PNG: 16k

Open the following link and then drag it to your desktop and upload and insert that one into the text widget and then let us know and we can get the code done to move it up there for you.
bunnyandsailor · Member · Mar 9, 2011 at 4:04 am
Copy link
thanks!

sorry, not sure about this bit:

“upload and insert that one into the text widget”

do you mean upload this version to my media library or am I putting it somewhere else?
I noticed there is something called a “text widget” but i can’t see where I can upload the image here.

Sorry for being such a technotard!
thesacredpath · Member · Mar 9, 2011 at 4:11 am
Copy link
Yes, upload it to the media library, and the get the URL of that image (toward the bottom of the upload page, and then put that image into a text widget. It is easiest to use the procedure outlined here if you do not have a lot of HTML experience.

http://en.support.wordpress.com/links/text-widget-links/
thesacredpath · Member · Mar 9, 2011 at 4:12 am
Copy link
Oh, and put the text widget at the very top of the sidebar. It is a little less problematic to reposition that way.
bunnyandsailor · Member · Mar 9, 2011 at 5:23 am
Copy link
done! wow, i am feeling really smart now..
thesacredpath · Member · Mar 9, 2011 at 6:04 am
Copy link
First off, copy all the stuff you have in the text widget out and put it into a plain text file for safe keeping (textedit – mac or notepad – windows).

Delete the contents in the text widget and replace it with the following.

<div style="position:absolute; top:20px; left:385px; width:300px;background-color:#FFFFFF;"<a href="http://bunnyandsailor.files.wordpress.com/2011/03/bunnyandsailorlogoscreenres.png"><img width="150" height="80" alt="" src="http://bunnyandsailor.files.wordpress.com/2011/03/bunnyandsailorlogoscreenres.png?w=150" title="bunnyandsailorlogoscreenres" class="aligncenter size-thumbnail wp-image-684"></a></div>
thesacredpath · Member · Mar 9, 2011 at 6:06 am
Copy link
Oops, I forgot one minor change. Use the following instead. It links the image back to your main blog page as the title text used to do.

<div style="position:absolute; top:20px; left:385px; width:300px;background-color:#FFFFFF;"<a href="http://bunnyandsailor.wordpress.com/"><img width="150" height="80" alt="" src="http://bunnyandsailor.files.wordpress.com/2011/03/bunnyandsailorlogoscreenres.png?w=150" title="bunnyandsailorlogoscreenres" class="aligncenter size-thumbnail wp-image-684"></a></div>
bunnyandsailor · Member · Mar 28, 2011 at 5:56 am
Copy link
hmmm that doesn’t seem to work :(
thesacredpath · Member · Mar 28, 2011 at 6:10 am
Copy link
I’m sorry, I messed up and forget an ending >. Give this a try and make sure the “keep paragraph formatting” check box at the bottom is not selected.

<div style="position:absolute;top:20px;left:385px;width:350px;background-color:#FFFFFF;"><a href="http://bunnyandsailor.wordpress.com/"><img width="150" height="80" alt="" src="http://bunnyandsailor.files.wordpress.com/2011/03/bunnyandsailorlogoscreenres.png?w=150" title="bunnyandsailorlogoscreenres" class="aligncenter size-thumbnail wp-image-684"></a></div>
theinfluenceofteachers · Member · Mar 29, 2011 at 6:15 pm
Copy link
What’s next after this? How do you make it the site title?
thesacredpath · Member · Mar 29, 2011 at 6:45 pm
Copy link
In this particular case, that does make the image the site title.

No items found.