WordPress.org

Ready to get started?Download WordPress

Forums

adding logo to header (19 posts)

  1. kakivik
    Member
    Posted 5 years ago #

    how do I add a logo to the Header

  2. carterx
    Member
    Posted 5 years ago #

    Can anyone help with this.

  3. esmi
    Forum Moderator
    Posted 5 years ago #

    A link to your site would help.

  4. figaro
    Member
    Posted 5 years ago #

    If you are using the default theme, see the following videos.

    http://educhalk.org/blog/?p=137

  5. elie-palima
    Member
    Posted 4 years ago #

    Hi guys, I've been trying to add my logo to my site..

    http://www.elie-palima.com

    but unfortunately, I can't! please help me out..

    I'm trying to Replace my Blog title For a Logo title which gives a link to the homepage of my blog.. i've search everywhere but I still can't figure it out..

    here's my headercode btw..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title>
    
    <?php bloginfo('name'); ?>
    <?php if(is_home()) { ?>
     - <?php bloginfo('description'); ?>
    <?php } ?>
    <?php if(is_single()) { ?>
    <?php wp_title(); ?>
    <?php } ?>
    <?php if(is_404()) { ?>
     - Page Not Found
    <?php } ?>
    <?php if(is_search()) { ?>
     - Search Results for: <?php echo wp_specialchars($s, 1); ?>
    <?php } ?>
    
    </title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <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_directory'); ?>/js/tabcontent.js" type="text/javascript"></script>
    
    <?php wp_head(); ?>
    
    <meta name="verify-v1" content="wSM5djJ25xgmaomggosxkskju1nrzSIS1uaEfQBXhJA=" />
    
    <link rel="shortcut icon" href="favicon.ico" >
    </head>
    <body>
    
    <!-- Start of StatCounter Code -->
    <script type="text/javascript">
    var sc_project=5137656;
    var sc_invisible=1;
    var sc_partition=58;
    var sc_click_stat=1;
    var sc_security="b2e0bb50";
    </script>
    
    <script type="text/javascript"
    src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
    class="statcounter"><a title="wordpress analytics"
    href="http://www.statcounter.com/wordpress.org/"
    target="_blank"><img class="statcounter"
    src="http://c.statcounter.com/5137656/0/b2e0bb50/1/"
    alt="wordpress analytics" ></a></div></noscript>
    <!-- End of StatCounter Code -->
    
    <div id="container">
    
    <!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
    
    <div id="header">
    
    	<div id="pagenav">
    	<ul>
    	<li<?php if(!is_page() ) { ?> class="current_page_item"<?php } ?>><a href="<?php bloginfo('home'); ?>">Home</a></li>
    	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    	</ul>
    	</div>
    
    	<div id="searchform">
    	<form method="get" action="<?php bloginfo('url'); ?>/">
    	<fieldset>
    	<label><?php _e('Blog Search'); ?></label>
    	<input type="text" value="<?php the_search_query(); ?>" name="s" id="searchinput" />
    	<input type="submit" value="GO" id="searchbutton" />
    	</fieldset>
    	</form>
    	</div>
    
    	<div id="logo">
    	<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
    	<div class="description"><?php bloginfo('description'); ?></div>
    	</div>
    
    	<?php include('about.php'); ?>
    
    </div>
    <div class="clear"></div>
    <!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
  6. jessn
    Member
    Posted 4 years ago #

    Inside of the <div id="logo"> replace the <h1> and the <div class="description" with this:

    <a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" title="<?php bloginfo('name'); ?>" alt="" /></a>

    Upload your logo to the images folder in your theme and it should find it.

  7. elie-palima
    Member
    Posted 4 years ago #

    hi, thanks for the instructions..

    but I'm still having problems.. the title was gone but my logo is "not showing up" please help..

    :)

    please be forgive as I am new to these kinds of stuff.

    elie-palima.com

  8. jessn
    Member
    Posted 4 years ago #

    Ok did you upload the logo to your wp-content/themes/yourtheme/images/ folder? Or is the images folder called something else? And what exactly is the logo named as? If it's not logo.png like in the example above it won't show. You'll have to change the image name and extension to match your own.

  9. elie-palima
    Member
    Posted 4 years ago #

    thanks jessn, I changed png to gif..

    but it's not "mixing up" to the header well.. what should i do next?

  10. elie-palima
    Member
    Posted 4 years ago #

    hi, jessn..

    thanks.. I already figured it out..

    thank you so much for the time!

    ;)

  11. jessn
    Member
    Posted 4 years ago #

    Good job! Ok in your stylesheet you have this:

    #logo {
    	float: left;
    	display: inline;
    	margin-top: 50px;
    	margin-left: 20px;
    	margin-right: 20px;
    	padding-right: 40px;
    	padding-left: 28px;
    	border-right: 1px dashed #ccc;
    	background-position: left 0px;

    I'd start with trying to shrink down the size of the top margin from 50 to maybe 20, or 0, depending on what the theme needs. Maybe taking off the left padding too to line it up with the menu buttons.

  12. elie-palima
    Member
    Posted 4 years ago #

    jessn, Last question.. (for today) ^_^

    how do I adjust these?

    I uploaded screenshots below:
    http://i132.photobucket.com/albums/q1/hani04/wasss.jpg

  13. jessn
    Member
    Posted 4 years ago #

    You want to get rid of the blue spacing? That looks like something that has to do with spacing between your header div, and the column/sidebar divs. The first thing that jumps out at me when looking at your source code is there's an empty div id="about" just after your header. That might be shoving the columns down a bit.

    <div id="about">
    <p></p>
    </div>

    I don't know if you use that space for anything elsewhere on your site...

    Other than that I can't really see any reason in your stylesheet for those to be moving down. What you can try to do is give the column and sidebar divs a negative top margin to pull them up;

    #column {
    	float: left;
    	width: 540px;
            margin-top:-30px; /* add this line in */
    	margin-right: 20px;
    	border-top: 5px solid #3f4c6b;
    }
    #sidebar {
    	float: left;
            margin-top:-30px; /* add this line in */
    	width: 420px;
    	border-top: 5px solid #3f4c6b;
    }
  14. elie-palima
    Member
    Posted 4 years ago #

    jessn, waaaaa.. I hope you receive this message..

    first of all THANK YOU VERY MUCH..
    the instructions you gave me was overall brilliant. and I can't believe someone like you actually exist... =D

    nweis,

    I am trying to add a Leaderboard ad unit beside the logo of my blog which
    I made screenshots of how I want it below:

    http://i132.photobucket.com/albums/q1/hani04/problem.jpg

    The problem is, I don't know how..!! waaa..
    please help me out..

    I would really appreciate it..
    Thanks!

  15. jessn
    Member
    Posted 4 years ago #

    You're welcome!

    K, I'd do it like this: In your header.php file add the "ads" div after the logo div.

    <div id="logo">
    	<a href="http://www.elie-palima.com/"><img src="http://www.elie-palima.com/wp-content/themes/freeblog/images/logo.gif" title="Make Money Online | I'm Pinoy and I make money online | elie-palima.com" alt="" /></a></div>
    <div id="ads">
    ad stuff here
    </div>

    Then in your stylesheet:

    #ads {
    	float: left;
    	display: inline;
    	margin-top: 8px;
    	margin-left: 20px;
            width:250px; /* or whatever the width should be */
    }

    If that doesn't align properly come back and let me know. You might need to wrap them both in a wrapper div...

  16. elie-palima
    Member
    Posted 4 years ago #

    wow. You did it! =D

    but yeah, it did not align properly and the ad is too big

    edit: it aligned properly, the ad is just too big to fit, Nwei,

    Jessn, your legend man, Thanks a bunch!

    where's your website btw?

  17. jessn
    Member
    Posted 4 years ago #

    Here's a link to my personal blog where I take notes on handy wordpress functions http://micromediawebsites.com/blog/?cat=12 :)

  18. elie-palima
    Member
    Posted 4 years ago #

    Cool.. your a web designer ^_^
    (I've never met one before)

    I visited your site and Book marked it.. it's very helpful. :)

  19. giggliepig
    Member
    Posted 4 years ago #

    Inside of the <div id="logo"> replace the <h1> and the <div class="description" with this:

    /"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" title="<?php bloginfo('name'); ?>" alt="" />

    Upload your logo to the images folder in your theme and it should find it.

    Thanks Jessn! Just what I was looking for :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.