Add image to header beside Blog Title Text

  • Resolved bigmentaldisease

    (@bigmentaldisease)


    15 years, 9 months 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 https://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

    Thread Starter bigmentaldisease

    (@bigmentaldisease)

    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 ‘Add image to header beside Blog Title Text’ is closed to new replies.