WordPress.org

Support

Support » Themes and Templates » Spine » [Resolved] Replacing Title with Logo in header area

[Resolved] Replacing Title with Logo in header area

  • Troy

    @troycruisingnwcom

    I would like to replace the text “Site Title” with our logo on our site.

    http://www.cruisingnw.com

    I tried this as advised by Paul, at first I could get the text to not appear, but no logo.

    #site-title{
    text-indent: -9999px;
    background: transparent url(http://path/to/logo/image) no-repeat 0 0;
    width: 100px; /* width of logo image */
    height: 100px; /* height of logo image */

    }

    #site-title a {display: block; height: 100px; width:100px; /* same dimensions as #site-title */}

    So, I am stuck.

Viewing 15 replies - 16 through 30 (of 32 total)
  • Troy

    @troycruisingnwcom

    still not working.

    Try wrapping your URL in apostrophes or speech marks.

    Troy

    @troycruisingnwcom

    Here is what I have now…

    #site-title{
    text-indent: -9999px;
    background: transparent url(http://cruisingnw.com/wp-content/themes/spine/library/images/cruising nw.gif ) no-repeat 0 0;
    width: 292px; /* width of logo image */
    height: 105px; /* height of logo image */

    }

    #site-title a {display: block; height: 105px; width:292px; /* same dimensions as #site-title */}

    Try this

    #site-title{
    text-indent: -9999px;
    background: transparent url('http://cruisingnw.com/wp-content/themes/spine/library/images/cruising nw.gif') no-repeat 0 0;
    width: 292px; /* width of logo image */
    height: 105px; /* height of logo image */
    
    }
    
    #site-title a {display: block; height: 105px; width:292px; /* same dimensions as #site-title */}

    Troy

    @troycruisingnwcom

    still nothing

    Troy

    @troycruisingnwcom

    trying to figure out out to identify the correct
    location.

    Troy

    @troycruisingnwcom

    wha laaah!
    not sure what i changed.
    Thank you for your help!

    You changed this;

    http://cruisingnw.com/wp-content/uploads/2013/02/cruising-nw1.gif

    To this;

    http://cruisingnw.com/wp-content/uploads/2013/02/Cruising-NW1.gif

    Troy

    @troycruisingnwcom

    just the uppercase stuff does it … lesson learned! Thank you!

    Theme Author Paul de Wouters

    @pauldewouters

    Many thanks Andrew for sorting this out while I was asleep 🙂

    Troy, I’m glad you managed to add your logo now, and thanks for hanging in there.

    As a side note, a custom logo upload option is on my to do list

    Hi Paul,

    I am trying to do the same thing, and i think i totally botched the code. This is what I have. I am in the “header.php” menu on, chosen from the right sidebar. I tried to follow your directions you gave the previous member, but I think i messed it up. Can you please help? I also downloaded the Custom CSS Manager Plug-In, but I didn’t use it. Blah

    I uploaded the image again that I want to use and here is the path:
    http://localhost:8888/wordpress-1/wp-content/uploads/2013/03/Lugadathemelogoheader2.png

    The pixels are width 370px x height 70px

    Can you please respond with how the code should look, from </head> on to the end part? I know i should have copied and paste, but I just knew it was going to work lol.

    (it didn’t, thank you! )

    </head>
    <body class="<?php hybrid_body_class(); ?>">
    
    <?php get_template_part( 'menu', 'secondary' ); // Loads the menu-primary.php template. ?>
    <div class="row">
    	<div class="twelve columns">
    
    		<div class="row">
    			<div class="seven columns">
    				<h1 id= 'site title'
    
    #site-title{
    text-indent: -9999px;
    background: transparent url('http://localhost:8888/wordpress-1/wp-content/uploads/2013/03/Lugadathemelogoheader2.png') no-repeat 0 0;
    width: 300px; /* 300px */
    height: 70px; /* 70px */
    
    }
    
    #site-title a {display: block; height: 70px; width:300px; /* same dimensions as #site-title */}#site-title a {display: block; height: 105px; width:292px; /* same dimensions as #site-title */}>
    					<a>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
    				</h1>
    			</div>
    			<div class="five columns">
    				<h2 id="site-description">
    					<small><?php bloginfo( 'description' ); ?></small>
    				</h2>
    			</div>
    		</div>
    
    		<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>
    
    		<?php if ( get_header_image() ) echo '<img class="header-image" src="' . esc_url( get_header_image() ) . '" alt="" />'; ?>
    
    		<hr />
    	</div>
    </div>

    Hi talktoemmaj, may you create a thread regarding this issue?

    @paul and thanks for contributing your theme and support to the WordPress community 🙂

    Theme Author Paul de Wouters

    @pauldewouters

    the new version has a logo uploader you can test. there’s just a bug with the live preview that should be fixed soon

    Thank you so much! it works wonderfully!

Viewing 15 replies - 16 through 30 (of 32 total)
  • The topic ‘[Resolved] Replacing Title with Logo in header area’ is closed to new replies.
Skip to toolbar