Need help? Check out our Support site, then


I want to replace my Header text with an image logo..

  1. I've just complete the payment to buy a custom design for my 20-11 blog.
    And it's ok.
    Actually I need to insert a jpg of my omw logo in the header in place of the name blog.
    But I'm totally unable to hand the CSS.
    Please help me.

    The blog I need help with is iuslab.it.

  2. @luslab, can you upload your logo image to the media library and then give us the URL of that image? It is easier for me to work things out if I have the actual image as it may require some adjustments to the padding and margins.

    Your logo image can be about 450px x 115px and fit in the area above the header image (if the tagline and header text are hidden). If you want to keep the tagline and just replace the header text, then the image should be around 100px in height. We can though adjust things.

  3. Thank you for the reply.

    I've uploaded just now le logo gif in the media library and the shortcutted link I obtained is: http://wp.me/a1h23p-3D.

    Take into account that the smaller size I get off line is 500 x 302 and that on line (in case the above url would be useless) the logo is on my professional site (home page) : http://www.adlpstudio.it.

  4. Is it the red adlp logo at the top of your pro home page?

  5. NO, it is not!

    Iuslab log stands on the body, just under the section titeld news from blog Iuslab (notizie dal blog iuslab)...

  6. Ah, found it. That image is 116 x 51. We can use that one if you wish. The one you uploaded is too large to be used in your theme here, and if I size it down via CSS, it will become fuzzy. It needs to be resized prior to uploading it in an image editing program so that it will be clear and sharp.

  7. Hmmm, I guess it had been resized in the HTML as it is the same size as the one you uploaded. I've downloaded your logo and resized it for 300px width and uploaded it to my test blog. Add the following to your custom CSS and see what you think. We can adjust margins and padding if you desire.

    If this logo size will work for you, you need to download it from my test blog and upload it to your media library and then replace the URL in the background declaration below.

    Image: http://flippintestblog.files.wordpress.com/2013/04/iuslab-300w.jpg

    #site-title {
    background: url("http://flippintestblog.files.wordpress.com/2013/04/iuslab-300w.jpg") no-repeat scroll -90px 35px transparent;
    height: 110px;
    text-indent: -9999px;
    width: 300px;
    }
  8. Oops, use this instead. I forgot to adjust the text link so it would cover the logo and act as a link back to the home page of your blog.

    #site-title {
        background: url("http://flippintestblog.files.wordpress.com/2013/04/iuslab-300w.jpg") no-repeat scroll -90px 35px transparent;
        height: 110px;
        padding-bottom: 0.5em;
        padding-top: 3em;
        text-indent: -9999px;
        width: 300px;
    }
    
    #site-title a {
        display: block;
        line-height: 110px;
    }
  9. AHHH ;-(

    I've copied&pasted the code in my Dashboard/aspect/personalize/CSS.

    I've used the box, deleting before the "welcome"massage in and soon after pasting your code....and

    I saved correctly but nothing's happen

  10. I don't see anything saved in your custom CSS using Firebug to view your site. Did the code disappear from the CSS edit window?

  11. Oh God, I have to download firebug..for firefox!!!! I will die, as long with my poor pc, I know.

    But if I give you, in direct e-mail, the admin entrance....into the dashboard, for istance

  12. please ;-)*****************

  13. Never give your admin stuff to anyone, not even to one of us volunteers in the forums.

    You do not have to download or install Firebug. That is just what I use for working with CSS and answering questions in these forums.

    Give me a bit of time and let me work through it again for you.

  14. Did you by chance download and upload the image I created for you to your media library? If so, can I have the URL of that image?

    And relax, take deep breaths, we'll get through this. :)

  15. Ok...You're fully right!

    But I don't succeed in handing CSS, I'm only a poor lawyer with no expertise in css coding or htlm

    Anyway, I've saved just now your risized pic in pc, and dowloades in the media library of the dashboard.

    The shortcut url is: http://wp.me/a1h23p-3G.

    Meanwhile I'll calm down ....

    (if you are a mere blogger volunteer, and not a WP worker, you will have all of mine respect for ever)

  16. Ok, all the below works for me. Copy the below and paste it into the custom CSS window and then save.

    #site-title {
        background: url("http://iuslab.files.wordpress.com/2013/04/iuslab-300w.jpg") no-repeat scroll -90px 35px transparent;
        height: 110px;
        padding-bottom: 0.5em;
        padding-top: 3em;
        text-indent: -9999px;
        width: 300px;
    }
    
    #site-title a {
        display: block;
        line-height: 110px;
    }
  17. Nothing ;-(
    In the big box on the left has disapperad also the "welcome"message and with right click It's impossibile to insert nothing to be pasted.

    It is only availabe the small box below (content width). But I triy to copy and save and I get nothing.

    But is it correct to use http://iuslab.wordpress.com/wp-admin/customize.php#css ?

    Anyway do not worry about. Feel free to stop your efforts for me....;-(((((((( And have a nice w.e.

  18. Ok, this might be an issue with the new custom design page because the code works.

    Go here and paste the stuff into the old CSS editor page instead:

    http://iuslab.wordpress.com/wp-admin/themes.php?page=editcss

    And just to confirm, this is the site you are talking about, correct: http://iuslab.it/ ?

  19. Your're great, sir! ;-) Thank you

    It works: I've got a new beatuful blog with a splendid 20.11 WP theme.

    Have a nice, long and relaxed week end and be proud of you Mr sacredpath (nomen omen?), your're the best web volunteer I had the pleasure to meet!.

    Kind & kindest regards

    PS I've never seen before the separate css custom page you send with link.

  20. You are welcome, and sorry for the problems with the new CSS editor. It still has some bugs in it, but staff will eventually get them all sorted out. Bookmark that link to the old editor for now so that you can get back to it easily.

  21. And thank you for the kind words.

  22. Hello Sacredpath,

    I'm hoping you can help me too? I'm actually experiencing a similar & have new to the whole CSS code writing thing. At the moment I've hidden my header text, however I'd actually like to have my logo at the top of my page instead. Do I need to save my logo image as a similar size to the above? Am I limited to the amount of space my logo can take? my website is http://www.foodiesagenda.com

    Your help would be HUGELY appreciated

  23. At the moment I've hidden my header text, however I'd actually like to have my logo at the top of my page instead.

    Top of the page as in the top of the entire content area?

    In any case, you can attach a background image to most anything. Here's a basic example showing how to add an image to the top left as a background in the header:

    #branding {
    	background: url("http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png") top left no-repeat;
    }

    I used the WordPress logo as an example—you can change out the url() value to use your own image instead.

    Aside: just a quick note to say that replies on old threads might not always get seen, so it's often a good idea to create a new help request and just link back to a previous conversation if needed.

Topic Closed

This topic has been closed to new replies.

About this Topic