WordPress.org

Ready to get started?Download WordPress

Forums

Spine
[resolved] Replacing Title with Logo in header area (33 posts)

  1. Troy
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where did you add that code?

  3. Troy
    Member
    Posted 1 year ago #

    in the visual editor css

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you using Jetpack?

  5. Troy
    Member
    Posted 1 year ago #

    No. Honestly not sure what JetPack is.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you using a Child Theme?

  7. Troy
    Member
    Posted 1 year ago #

    No. Just using the spine theme

  8. Troy
    Member
    Posted 1 year ago #

    This is exaclty what I put in.

    #site-title {
    text-indent: -9999px;
    background: transparent url(http://cruisingnw.com/?attachment_id=1786) no-repeat 0 0;
    width: 280px; /* width of logo image */
    height: 101px; /* height of logo image */

    }

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

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your CSS looks right, but I don't think you're entering it in the right place.

    Download (and install) a Custom CSS Manager plugin and use its allocated section of the dashboard to hold your CSS modifications.

  10. Troy
    Member
    Posted 1 year ago #

    ok, I'll try that. So remove it from where it is, and then put it in that?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    If it wasn't there originally, yes remove it and transfer it to the Custom CSS Manager section.

  12. Troy
    Member
    Posted 1 year ago #

    ok, downloaded. Installed.

    Entered into it. Saved. Same result.

  13. Troy
    Member
    Posted 1 year ago #

    Thanks for the help by the way... would love to get this fixed!

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    The path to your image is wrong.

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    It should be something like

    /wp-content/themes/yourThemeName/path-to-image/image.png
  16. Troy
    Member
    Posted 1 year ago #

    oh, ok. i'll change that

  17. Troy
    Member
    Posted 1 year ago #

    still not working.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try wrapping your URL in apostrophes or speech marks.

  19. Troy
    Member
    Posted 1 year ago #

    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 */}

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    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 */}
  21. Troy
    Member
    Posted 1 year ago #

    still nothing

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

  23. Troy
    Member
    Posted 1 year ago #

    trying to figure out out to identify the correct
    location.

  24. Troy
    Member
    Posted 1 year ago #

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

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    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
  26. Troy
    Member
    Posted 1 year ago #

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

  27. Paul de Wouters
    Human Made
    Theme Author

    Posted 1 year ago #

    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

  28. talktoemmaj
    Member
    Posted 1 year ago #

    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>
  29. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    @Paul and thanks for contributing your theme and support to the WordPress community :)

  30. Paul de Wouters
    Human Made
    Theme Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.