WordPress.org

Ready to get started?Download WordPress

Forums

How to add my own logo to pilcrow theme header (6 posts)

  1. Mark Chang
    Member
    Posted 2 years ago #

    Hi,

    I am new to WordPress and I use pilcrow theme. I would like to replace the title of my site from text to an image logo. How do I do that?

    I just started the website at http://indigocentre.com.

    Help much appreciated.

  2. flashbuddy
    Member
    Posted 2 years ago #

    Open header.php in the themes folder and replace:

    <h1 id="site-title">
    <span>
    <a href="http://www.indigocentre.com/" title="Indigo Centre" rel="home">Indigo Centre</a>
    </span>
    </h1>

    with

    <h1 style="display: none;">
    <a href="" title="Indigo Centre" rel="home">Indigo Centre</a>
    </h1>
    <img id="siteLogo-grapic" src="pathtoyourimage.jpg" title="Indigo Centre" />

    add to your style.css in the theme folder:

    img#siteLogo-graphic{
    margin: 1px 1px 1px 1px; /* adjust to position your logo */
    position: absolute;
    border: none;
    /* adjust below to match your image dimensions */
    height: 30px;
    width: 150px;
    display: block;
    }
  3. Mark Chang
    Member
    Posted 2 years ago #

    Thanks a lot flashbuddy. Managed to insert the logo on top right.

    I could put the logo on the top right by editing the px as below to move it to the right. Else it got blocked by the menu:

    margin: 1px 1px 1px 600px; /* adjust to position your logo */

    Is it possible to position the logo on top of the menu bar rather than at the same level as the menu bar?

    I am really not conversant with those coding in the header.php or the style.css here.

  4. Mark Chang
    Member
    Posted 2 years ago #

    That's because my logo is a bit bigger than the menu and it eats into the header picture. See http://www.indigocentre.com now.

  5. flashbuddy
    Member
    Posted 2 years ago #

    Add z-index: 99;

    Would look something like this:

    img#siteLogo-graphic {
        border: medium none;
        display: block;
        height: 80px;
        margin: 1px 1px 1px 550px;
        position: absolute;
        width: 240px;
        z-index: 99;
    }

    Now google css z-index to get an understanding.

    Next, run your logo through Photoshop, or some other image editor to resize it to fit. Or resize /re-arrange your header to make it graphically appealing with your logo at its current size.

    Why is your site so narrow, under 800 pixels wide? Using your design as a starting point, I might consider:
    http://uploadingit.com/file/j80pla4fak0e2tmr/Indigo.jpg

  6. Mark Chang
    Member
    Posted 2 years ago #

    Will try. Your jpg on indigo is very nice. Thks. .

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags