• Plans & Pricing
  • Log in
  • Get started
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Newsletter
  • Professional Email
  • Website Design Services
  • Commerce
  • WordPress Studio
  • Enterprise WordPress 
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
  • Support Center
  • WordPress News
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
Get started
  • Sign up
  • Log in
About
  • Plans & Pricing
Products
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Newsletter
  • Professional Email
  • Website Design Services
  • Commerce
  • WordPress Studio
  • Enterprise WordPress  
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
Resources
  • Support Center
  • WordPress News
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
Jetpack App
  • Learn more
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
Search
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
Forums / I want to replace my Header text with an image logo..

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

  • Unknown's avatar
    iuslab · Member · Apr 18, 2013 at 11:00 pm
    • Copy link Copy link
    • Add topic to favorites Add topic to favorites

    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: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 3:57 pm
    • Copy link Copy link

    @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.

  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 4:21 pm
    • Copy link Copy link

    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.

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 4:25 pm
    • Copy link Copy link

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

  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 4:28 pm
    • Copy link Copy link

    NO, it is not!

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

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 4:48 pm
    • Copy link Copy link

    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.

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 5:12 pm
    • Copy link Copy link

    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;
    }
  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 5:16 pm
    • Copy link Copy link

    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;
    }
  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 6:00 pm
    • Copy link Copy link

    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

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 6:05 pm
    • Copy link Copy link

    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?

  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 6:11 pm
    • Copy link Copy link

    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

  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 6:11 pm
    • Copy link Copy link

    please ;-)*****************

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 6:19 pm
    • Copy link Copy link

    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.

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 6:20 pm
    • Copy link Copy link

    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. :)

  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 6:35 pm
    • Copy link Copy link

    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)

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 6:42 pm
    • Copy link Copy link

    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;
    }
  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 7:03 pm
    • Copy link Copy link

    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.

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 7:08 pm
    • Copy link Copy link

    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/ ?

  • Unknown's avatar
    iuslab · Member · Apr 19, 2013 at 7:27 pm
    • Copy link Copy link

    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.

  • Unknown's avatar
    thesacredpath · Member · Apr 19, 2013 at 7:37 pm
    • Copy link Copy link

    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.

1 2
  • The topic ‘I want to replace my Header text with an image logo..’ is closed to new replies.

Tags

  • customize background
  • logo
  • new to css
  • Twenty Eleven

About this topic

  • In: CSS Customization
  • 4 participants
  • 22 replies
  • Last activity 13 years
  • Latest reply from iuslab

Couldn't find what you needed?

Contact us

Contact us

Get answers from our AI assistant, with access to 24/7 expert human support on paid plans.

Browse our guides

Browse our guides

Find step-by-step solutions to common questions in our comprehensive guides.

WordPress.com

Products
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Professional Email
  • Website Design Services
  • WordPress Studio
  • Enterprise WordPress
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
Resources
  • WordPress.com Blog
  • Business Name Generator
  • Logo Maker
  • WordPress.com Reader
  • Accessibility
  • Remove Subscriptions
Help
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
  • Developer Resources
Company
  • About
  • Press
  • Terms of Service
  • Privacy Policy
  • Do Not Sell or Share My Personal Information
  • Privacy Notice for California Users
DeutschEspañolFrançaisBahasa IndonesiaItalianoNederlandsPortuguês do BrasilSvenskaTürkçeРусскийالعربيةעִבְרִית日本語한국어简体中文繁體中文English

Mobile Apps

  • Download on the App Store
  • Get it on Google Play

Social Media

  • WordPress.com on Facebook
  • WordPress.com on X (Twitter)
  • WordPress.com on Instagram
  • WordPress.com on YouTube

Automattic

Automattic
Work With Us
    • WordPress.com Forums
    • Sign up
    • Log in
    • Copy shortlink
    • Report this content
    • Manage subscriptions