WordPress.org

Support

Support » Themes and Templates » [Resolved] Add image to header beside Blog Title Text

[Resolved] Add image to header beside Blog Title Text

  • Hi,

    I was wondering if someone could help me out with this, Someone who knows CSS will hopefully find it easy

    Basically my header at http://bigmentaldisease.com/ contains the name of the blog, along with a line of description text. I want to keep this but add a little image right before the text. I don’t know how to get the spacing right

    Here is how my header currently looks:

    Here is how I want it to look:

    The dimensions of this little man image are 41x79px

    Style CSS
    
    /* HEADER */
    
    #header { width: 965px; height: 85px; border-bottom: 1px dotted #333333; clear: both; }
    
    #header a, #header a:visited { text-decoration: none; color: #333333; }
    
    #header a:hover { text-decoration:none; color: #000000; }
    
    #header h1 { float: left; font-size: 80px; letter-spacing: -0.1em; font-weight: bold;  margin: 0; padding-right: 10px; }
    
    h2.description { color: #999999; font-size: 25px; margin: 0 0 46px 0; text-align: left; }
    
    #menu-header { position: relative; top: 54px; list-style-type: none; float: right; font-size: 18px; font-weight: bold; margin: 0; padding: 0; }
    
    #menu-header li { float: left; display: block; height: 32px; padding: 0; margin-left: 20px; }
    
    #menu-header li a, #menu-header li a:visited { display: block; height: 32px; padding-bottom: 11px; color: #666666; }
    
    #menu-header li a:hover, #menu-header li a:active { display: block;  color: #FF3300; }
    
    #menu-header li.current_page_item a { color: #FF3300; }
    Header.php:
    
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    I know it’s annoying when people ask for help with CSS but it really would be brilliant if someone knows what to do.

    I want to keep the text but just move it over that little bit and fit the man in there.

    Thanks a million!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi

    To approximate what you need: find this (line 45)

    #header h1 {
    float:left;
    font-size:80px;
    font-weight:bold;
    letter-spacing:-0.1em;
    margin:0;
    padding-right:10px;
    }

    put the image you want as background in the theme’s images folder and add this to #header h1

    background: url(images/myimage.jpg) no-repeat; /* user your filename */
    padding-left:100px; /* use trial &amp; error on the value to get it right */

    You will also need to add some left padding to h2.description on line 47.

    If the full background image is not displaying, add height: 79px;to the #header h1 block

    Hi,

    thanks a million for this!!!!

    Hello to all,

    I am a new comer to WordPress and find it amazing in many ways.

    Watching various tutorials I was able to more or less edit the website I was imagining.
    One thing I was not able to do ’til now: to put the title of my site in bold.
    I am using the theme “Ocean Mist” by Ed Merritt. I checked out the style.css file and added “font-weight:bold” but this did not change the format of my title.

    Could anyone tell me how exactly to proceed or maybe redirect me to a complete tutorial for this problem?

    Thanks to all the helpers in advance.
    And longlive WordPress.
    Cheers,
    Catherine Zimmermann

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Add image to header beside Blog Title Text’ is closed to new replies.
Skip to toolbar