Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Header logo

  1. magicandmedicine1
    Member

    Hi there

    I'm having difficulty with a logo that I have been asked to use in replacement of the 'Magic and Medicine' text in the header of my blog.
    The text for the logo wraps onto two lines, line 1) 'the magic' and line 2) 'of medicine' so I can't select a portion of it, as it requires. The logo (hope you are able to view it with this) is here:
    thackraymagicandmedicine.wordpress.com/wp-admin/post.php?post=8708action=edit.

    Also, I want the logo to sit in the header, but it sits underneath it when I upload it. I'm also having difficulty reducing the size of the header - have tried doing it before uploading it to the image library.

    I read in en.support.wordpress.com/themes/custom-header-image/ that to use images of different dimensions in the header (that don't have to be cropped in a certain way) you would need a theme that supports a flexible image option. Scrolling down I could see that twentytwelve doesn't support this, is there a way around this if I could make the image smaller? Or if not is there a theme that does support flexible header images that is very similar in terms of layout to twentytwelve?

    Thanks for your help. I'm really stumped on this one.

    The blog I need help with is thackraymagicandmedicine.wordpress.com.

  2. farrukhnawaz1122
    Member

    By some premium theme and get paid hosting and then try each logo or header and you will like your medicine site. see the design of http://stylespk.com/

  3. magicandmedicine1
    Member

    Hi farrukhnawaz1122

    Thanks for your response, however I can't spend any more money on putting together the blog. I have now got a logo for 'of magic and medicine' which all fits onto one line so is there a way of replacing the header text 'Magic and Medicine', with this logo?

    Thanks for your help.

  4. designsimply
    Staff

    I couldn't see the image you linked. To add an image, use this guide and then copy the link out of the Image URL field:
    http://en.support.wordpress.com/images/#upload-images-from-your-computer

    Here's how you can add a logo to the site title in the Twenty Twelve theme:

    .site-title a {
	background: url('http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png') -35px center no-repeat;
	height: 100px;
	padding-left: 120px;
}

    Replace the url() value with your own logo image. You will also need to adjust all of the pixel values to match what is needed for your image.

  5. magicandmedicine1
    Member

    Hi designsimply

    Thank you for response.

    I have followed your instructions, adding the code and url into CSS but unfortunately it still doesn't look right: .http://thackraymagicandmedicine.wordpress.com/
    I would like the 'of magic and medicine' logo to sit in line with (but on the left side) to the thackray and arts council logo, above the menu bar. In place of having a header title & tagline.

    Could you please take another look and see what I'm doing wrong?

    Many thanks for your help.

  6. designsimply
    Staff

    You've made additional changes since I posted the previous example above—and that's probably why it didn't work as you expected when you tried to test it.

    I checked http://thackraymagicandmedicine.wordpress.com/ just now, and you aren't displaying a site title at all now. If you want to add to or replace the site title, you'll need to turn the site title back on by checking the "Show header text with your image" option on your Appearance → Header page and then adding my original CSS example above (without any other custom CSS you've added later).

    However, it might be easier to start from the current iteration rather than trying to go back and undo the settings and CSS you added that makes the example above invalid. I see that you have added this image:
    http://thackraymagicandmedicine.files.wordpress.com/2013/01/thackray-ace-logos-cro-pped-2png-e1359370799571.png

    As a background image to the main header area (aka "#masthead) using this custom CSS:

    #masthead {
	height: 180px;
	position:relative;
	background:url('http://thackraymagicandmedicine.files.wordpress.com/2013/01/thackray-ace-logos-cro-pped-2png-e1359370799571.png') top right no-repeat;
	width:860px;
	margin-right:50px;
	margin-left:50px;
	margin-top:0;
	padding-bottom:0;
}

    Here is how it looks to me in Firefox right now: http://cl.ly/NKyP

    If you like the way that's working and you just want to add a little more space at the top so the main menu doesn't overlap the image, try adding this to the #masthead CSS block in your Appearance → Custom Design → CSS editor:

    padding-top: 80px;

  7. magicandmedicine1
    Member

    Hi designsimply

    Thanks for your reply, and apologies for the confusion over taking down and putting up the logo. It certainly looks a lot better with the padding, but what I really want to do is try to have the logo 'of magic and medicine' displayed where the site title was, in line with the thackray/arts council logo. Is this possible?

    Thanks again for your help.

  8. designsimply
    Staff

    That's absolutely possible. Use the first example I posted earlier in this thread:
    http://en.forums.wordpress.com/topic/header-logo-3?replies=7#post-1166437

    Make sure your site title is setup to display though! You can change that from the Appearance → Header page. Then you'll need to adjust the numbers after that to make everything line up. If you need help with the numbers, try getting the logo added in first and then post back here if you still need help. That way, we can make sure everyone's looking at the same thing and you're not changing it around in between requests for help. :)

  9. magicandmedicine1
    Member

    Hi designsimply,

    thanks so much for your patience with me! I've followed your instructions and this is what I have now: /Users/hazeljones/Desktop/Screen Shot 2013-03-06 at 09.05.08.png (hope you can view this, I couldn't seem to save it as a web file).
    So it's getting there - do you know how I can adjust the logo showing at the top and remove the one showing under the menu?

    Thanks again for your help

  10. designsimply
    Staff

    I can't see the file! The path you use is a local path that's just for your computer. You probably don't need to upload a screenshot though. Can you make the updates using your Appearance → Custom Design → CSS editor so I can see the logo on http://thackraymagicandmedicine.wordpress.com/ directly?

  11. magicandmedicine1
    Member

    Hi designsimply,

    thank you for your help. I have got the header logo under the horizontal menu now but would still like it to be above the menu and on the left hand side, in line with the other logos. I have to keep it looking neat for the client (so couldn't leave it half underneath and half above the menu as it was before, to get fixed unfortunately). but is there some code I could use the achieve this?

    Thanks again for your help. Sorry this query has been a bit tricky and bitty...

  12. magicandmedicine1
    Member

    Here is the blog again, http://thackraymagicandmedicine.wordpress.com

    thanks

  13. thesacredpath
    Member

    You are going to have to create a logo that is about 475px x 75px. Once you have done that, you can take advantage of the "flexible header" feature on twenty twelve. See this support document on how to upload it and not have it resized or cropped (using the "use as is" button. Once you have done that, we can help you move it up and into the area to the left of the existing images you have there.

  14. magicandmedicine1
    Member

    Hi thesacredpath

    thanks for your message. I have made the logo smaller, 800px by 94px. I tried making it smaller than this (475px by 75px) but it looked too small so I'm hoping we can still make it work, fingers crossed!

    Could you please let me know how to move it up into the area to the left of the existing logos now, many thanks for your help.

    Apols for the delay between messages.

  15. thesacredpath
    Member

    Make the existing "img.header-image" section in your CSS look like this by adding the position and top declarations I have. You can adjust the "top" value as you desire.

    img.header-image {
    box-shadow: none;
    position: absolute;
    top: 15px;
}

  16. magicandmedicine1
    Member

    Thanks so much thesacredpath, looks great now!

  17. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags