adding logo to header

  • Hi,

    I want to change the settings of the header so it doesn′t display the blog title but a logo instead. Anyone who can help me?

    The code looks like this :

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

    <head>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
    <meta http-equiv=”Content-Style-Type” content=”text/css” />
    <meta http-equiv=”Content-Script-Type” content=”text/javascript” />
    <title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>
    <meta name=”keywords” content=”” />
    <meta name=”description” content=”” />

    <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
    <link rel=”alternate” type=”application/atom+xml” title=”Atom 1.0″ href=”<?php bloginfo(‘atom_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <link rel=”Shortcut Icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>/favicon.ico” type=”image/x-icon” />

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8221; type=”text/javascript” charset=”UTF-8″></script>
    <script src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.easing.1.3.js” type=”text/javascript” charset=”UTF-8″></script>
    <script src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.vgrid.0.1.2-mod.js” type=”text/javascript” charset=”UTF-8″></script>
    <script type=”text/javascript”>
    //<![CDATA[
    if (! window.console) window.console = { log: function(){} }; //avoid error

    $(function(){
    var vg = $(“#grid-wrapper”).vgrid({
    easeing: “easeOutQuint”,
    time: 800,
    delay: 60,
    selRefGrid: “#grid-wrapper div.x1”,
    selFitWidth: [“#container”, “#footer”],
    gridDefWidth: 290 + 15 + 15 + 5,
    forceAnim: <?php echo (is_singular()) ? 0 : 1; ?>
    });

    $(window).load(function(e){
    setTimeout(function(){
    // prevent flicker in grid area – see also style.css
    $(“#grid-wrapper”).css(“paddingTop”, “0px”);
    }, 1000);
    });

    <?php if (is_singular()) : ?>
    $(“#single-wrapper”).css(“paddingTop”, “0px”).hide().slideDown(1000);
    <?php endif;?>

    });
    //]]>
    </script>

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

    <body <?php body_class();?>>

    <noscript><p class=”caution aligncenter”>Enable Javascript to browse this site, please.</p></noscript>

    <div id=”container”>
    <div id=”header”>
    <h1>“><?php bloginfo(‘name’); ?></h1>
    <p><?php bloginfo(‘description’); ?></p>
    </div>

    In advance – Thanks a lot!!! =)

Viewing 5 replies - 1 through 5 (of 5 total)

  • https://codex.www.ads-software.com/Designing_Headers

    hi magnusnordstrand,

    <div id=”header”> look for #header in the stylesheet.css of your theme.. you will find the default image of the theme header background image. Also add the new header image in image folder of your theme…rest follow the above link.

    Alright, here is what I use to change my H1 to an image on my site Blondish.net, some of my clients, and even WPAddict.net

    <?php if  ( file_exists( TEMPLATEPATH . '/images/YOURIMAGEFILEHERE' ) ) { ?>
  <a href="<?php echo get_settings('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/YOURIMAGEFILEHERE" alt="<?php bloginfo('name'); ?>" /></a>
  <?php } else { ?>
  <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<? } ?>

    Replace YOURIMAGEFILEHERE with the name of the file. I usually upload the image to the images folder of the theme, hence if you noted the URL path, it will go to there.

    Thread Starter magnusnordstrand

    (@magnusnordstrand)

    Thanks guys!!

    Much obliged =)

    I am having a similar problem on

    https://www.musicianstelevision.com/wordpress

    I tried a few different variations to get the logo to show up, with no luck. Anyone with any suggestions?

    current code for header in css.style is as follows:

    /* Header */

#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 900px;
	height: 159px;
}

#headerimg {
        padding: 17px 0 0 14px;
        height:140px;
        background-image: url('images/mtn_mulitco_logo.png') 500px 0px no-repeat;
}

#header h1 {
	width: 590px;
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#header h1 a {
	width: 590px;
	height: 100px;
	display: block;
	text-decoration: none;
}
#header h1 a .blogName {
	/*display: none;*/
	font-size: 24px;
	color: #FFFFFF;
	font-weight: light;
	display: block;
}

#header a .blogDescription {
	font-size: 36px;
	color: #cccfd1;
	font-weight: normal;
	display: block;
}

/* Header auxiliary box */

#auxBox {
	width: 310px;
	height: 118px;
	position: absolute;
	bottom: 0;
	right: 0;
}

#siteFeeds {
	margin-left: 15px;
	margin-top: 15px;
}

#siteFeeds li {
	list-style: none;
	background-image: url('images/rss-icon.png');
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 20px;
	margin-bottom: 0.5em;
}

#siteFeeds li a {
	color: #FFFFFF;
}

#searchForm {
	width: 266px;
	height: 31px;
	background-image: url('images/search-background.png');
	background-repeat: no-repeat;
	background-position: left top;
	position: relative;
	margin-left: 15px;
	margin-top: 15px;
}

#searchForm #s {
	width: 198px;
	height: 22px;
	position: absolute;
	left: 7px;
	top: 2px;
	border: none;
	background-color: transparent;
	line-height: 27px;
	color: #FFFFFF;
	padding-top: 5px;
}

#searchForm #searchsubmit {
	position: absolute;
	right: 0;
	top: 0;
}

/* Enable/Disable animation button */

#enableDisableAnimation {
	top: 6px;
	right: 8px;
	position: absolute;
}

#enableDisableAnimation img {
	border: none;
	display: none;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘adding logo to header’ is closed to new replies.