WordPress.org

Ready to get started?Download WordPress

Forums

adding logo to header (6 posts)

  1. magnusnordstrand
    Member
    Posted 4 years ago #

    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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 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!!! =)

  2. Roy
    Member
    Posted 4 years ago #

  3. magickman5
    Member
    Posted 4 years ago #

    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.

  4. Nile Flores
    Member
    Posted 4 years ago #

    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.

  5. magnusnordstrand
    Member
    Posted 4 years ago #

    Thanks guys!!

    Much obliged =)

  6. baymediaarts
    Member
    Posted 4 years ago #

    I am having a similar problem on

    http://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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags