WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add image to header beside Blog Title Text (4 posts)

  1. bigmentaldisease
    Member
    Posted 5 years ago #

    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!

  2. stvwlf
    Member
    Posted 5 years ago #

    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

  3. bigmentaldisease
    Member
    Posted 5 years ago #

    Hi,

    thanks a million for this!!!!

  4. Les Radicales
    Member
    Posted 4 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic