• Resolved jp-savage

    (@jp-savage)


    I’ve been working on this on and off for 2 months. I do not know if it is a function of the template I am using (this just in) but I am unable to post a floating background image of my logo on the header, to the left of the masthead (see theroundriver.com). I’ve tried everything I can find in the forums, blogs and codex, all to no avail. Any help would be most appreciated, and will earn you great karmic energy that will likely save your life one day from out of nowhere. B^)

    Best regards,

    JP

Viewing 8 replies - 1 through 8 (of 8 total)
  • depends a bit on the size of the logo, but this is a first try:
    in style.css:

    #masthead_wrapper {
    	margin: 0 35px;
    background: url(images/logo.jpg) left top no-repeat;
    	width: auto;
            padding: 0;
    	text-align: center;
    }

    assuming that your logo file is called ‘logo.jpg’ and is in the /images folder of the theme.
    instead of ‘left’ and ‘top’ you could use pixel values, for instance background: url(images/logo.jpg) 20px 10px no-repeat; to position the background image exactly as you like.

    Thread Starter jp-savage

    (@jp-savage)

    Thanks alchymyth!

    I had tried variants of that and just used your code verbatim, nothing. Logo.jpg is 200 x 200 so I reduced it to 100 x 100 and finally 35 x 35, and still nothing.

    Here is that section of style.css

    /*====: [CORE LAYOUT ELEMENTS] :================================*/
    #container {
    width: 920px;
    text-align: left; /*Reset center align inheretence from body*/
    margin: 0 auto; /*Center site on page in Mozilla*/
    }
    h1#masthead {
    color: #446592;
    font-size: 4.8em;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    padding: 0;
    display: inline-block;
    margin-right: 10px;
    }
    #masthead_wrapper {
    margin: 0 35px;
    background: url(images/logo.jpg) left top no-repeat;
    width: auto;
    padding: 0;
    text-align: center;
    }

    h2#tagline {
    font-size: 1.7em;
    font-style: italic;
    text-align: center;
    display: inline-block;
    }
    #wrapper {
    width: 100%;
    background: #FFF;
    margin: 0;
    padding: 10;
    }
    #header {
    width: 100%;
    text-align: center; /*Center child #headerimg in IE*/
    position: relative;
    margin: 0;
    }
    #headerimg {
    margin: 0 auto; /*Center in Mozilla*/
    clear: both;
    }
    #content {
    margin: 5px 35px 0;
    font-size: 1.2em;
    width: 575px;
    float: left;
    display: inline;
    }
    #footer {
    clear: both;
    margin: 0 35px;
    text-align: right;
    padding: 5px 0;
    border-top: 1px solid #CCC;
    }

    Thread Starter jp-savage

    (@jp-savage)

    And because I don’t know what might be in conflict, here is header.php

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
    <html xmlns=”https://www.w3.org/1999/xhtml&#8221; dir=”ltr” <?php language_attributes(); ?>>

    <head>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <link rel=”shortcut icon” href=”<?php bloginfo(‘template_url’); ?>/favicon.ico” />

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <!–[if IE 6]>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie6.css” />
    <![endif]–>
    <!–[if IE]>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie.css” />
    <![endif]–>
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <SCRIPT SRC=”<?php bloginfo(‘template_url’); ?>/js/ThemeJS.js”></SCRIPT>

    <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

    <!–This is a plugin hook–>
    <?php wp_head(); ?>

    </head>
    <body <?php if(is_page() || is_single()) echo ‘onload=”hideTags();”‘; ?>>

    <div id=”container”>
    <div id=”nav_menu”>
    <!–Main navigation menu–>

    </div><!–close nav_menu id–>
    <div id=”wrapper”>
      <!–Mozilla hack to show background–>
    <div id=”header”>

    <!–UNCOMMENT THE FOLLOWING SECTION OF CODE FOR RSS AND RSS VIA EMAIL
    SUBSCRIPTION BUTTONS
    <div id=”tji_subscribe”>
    <div id=”feedbubble”><div id=”feedbubble_inner1″><div id=”feedbubble_inner2″>Click here to subscribe to the RSS Feed in your favorite feed reader</div><div id=”feedbubble_pointer”> </div></div></div>
    <div id=”emailbubble”><div id=”emailbubble_inner1″><div id=”emailbubble_pointer”> </div><div id=”spacer”> </div><div id=”emailbubble_inner2″>Click here to have new posts sent straight to your email</div></div></div>

    ” title=””><img src=”<?php bloginfo(‘template_url’); ?>/images/rss_icon.gif” alt=”” onmouseover=”showRSS();” onmouseout=”hideRSS();” />

    <img src=”<?php bloginfo(‘template_url’); ?>/images/email_icon.gif” alt=”” onmouseover=”showEmail();” onmouseout=”hideEmail();” />
    </div>
    –>

    <div id=”masthead_wrapper”>
    <h1 id=”masthead”>“><?php bloginfo(‘name’); ?></h1><h2 id=”tagline”><?php bloginfo(‘description’); ?></h2>
    </div>

    <div id=”headerimg”>
    <?php randomHeader(); ?>
    </div>
    </div><!–close header id–>

    so, where exactly is your logo.jpg?
    it does not seem to be in:
    https://theroundriver.com/wordpress/wp-content/themes/this-just-in/images/logo.jpg
    (where it should be)

    the code looks alright, the logo is just not in the right folder ??

    Thread Starter jp-savage

    (@jp-savage)

    It’s in uploads.

    can you load it with ftp into the /images folder of the theme?
    or provide the full path to the logo image?

    Thread Starter jp-savage

    (@jp-savage)

    WOOT!!

    Amazing things happen when you pay attention to the little details! It would be so much easier if I wasn’t a complete IDIOT!

    Now I can mess with the spaces & layout a bit. Thanks for the assist!

    JP

    well done !!!!!

    ‘a little practice does a lot of good’

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Add logo to masthead’ is closed to new replies.