WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Insert Logo in site-title in Twenty Ten (11 posts)

  1. smcfall
    Member
    Posted 3 years ago #

    I would like to insert my company logo to the left of my site title.

  2. riddhishshah
    Member
    Posted 3 years ago #

    You can check your header file for <?php bloginfo( 'name' ); ?> and replace or comment this tag and add your file path over here, otherwise you can modify the CSS.

  3. smcfall
    Member
    Posted 3 years ago #

    Thank you riddhishshah,

    I went the css route, easier too control the postion. Here is the code:

    /* =Header
    -------------------------------------------------------------- */

    #header {
    padding: 30px 0 0 0;
    }
    #site-title {
    float: left;
    margin: 0 0 18px 0;
    width: 700px;
    font-size: 30px;
    line-height: 56px;
    background-image: url(http://theachieverexchange.com/wp-content/themes/twentyten/images/theachieversexchangelogo.jpg);
    background-repeat: no-repeat;
    text-indent: 68px;

  4. riddhishshah
    Member
    Posted 3 years ago #

    Yes I know you can do that from CSS but if you set an image as background remember it's your logo part how you can link back to index.php for that you need to create another div top of that to direct url to index.php bcz you can not put url on background image straight.

  5. smcfall
    Member
    Posted 3 years ago #

    I was getting the text below the logo with the html option. I get a little spooked dealing with the php coding. I am willing to only have the title linked to the index page.

  6. rajdaggubati
    Member
    Posted 3 years ago #

    smcfall,

    I am newbie.. can you give me the code snippet to replace bloginfo('name'); in header.php for inserting the logo.

    Thanks

  7. Paal Joachim Romdahl
    Member
    Posted 3 years ago #

    Hello everyone

    I am also a newbie and need an example on how to modify the header.php file.

    I am working on my site sunwindcreation.com.
    (If you check the site the new design will look different then the design today.)

    Background image.....check
    Top left corner image of a sun...... not figured out yet.
    On top of the sun a logo..... not figured out yet.
    To the right of the sun and logo my own links.....not figured out yet.

    It seems the easiest would be to modify the header.php. As I have very little knowledge of php it would be nice if someone would add an example to look at which I can emulate. (actually that we all can emulate...:)

  8. raystel
    Member
    Posted 3 years ago #

    this is driving me crazy i have tried everything humanly possible trying to include a logo image to the twenty ten theme i have been trying for days i,ve just joined this forum can anybody out there give me the correct info please i have altered the header.php with ( </h1><!--end of h1 site-title-->
    <div id="site-description"><?php bloginfo( 'description' ); ?></div><img src="images/logo.png" border="0" /> dosent work also tried the direct whole path in the style.css : ( #site-title {
    float: left;
    margin: 0 0 18px 0;
    width: 700px;
    font-size: 30px;
    line-height: 56px;
    background-image: url(http://raystel.com/wp-content/themes/twentyten_2/images/logo.png);
    background-repeat: no-repeat;
    text-indent: 68px;
    display:none
    }

    i,m desperate now

    please help someone :-)))

  9. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Don't edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

  10. cktalons
    Member
    Posted 3 years ago #

    Sorry, but this has not been resolved. I've tried updating the PHP as first suggested, I've tweaked the CSS, all through a child theme. I've got bupkis here. I can make the logo an active link, but the words are dropped on top of it.

    There MUST be a way to make the logo an active link without having the words of the site on top of it. Please, will someone show us how?

  11. Alan_S
    Member
    Posted 3 years ago #

    Put the background image in the link. Add padding according to the size of your image. My logo.png is 73px x 50px, I have left the line height at 36px. The order of the padding is 'top, right, bottom, left. So, 36 + 4 + 4 = 50px and 78px (left) leaves a 5px gap before the text.

    Use a child theme! You can then preview changes before you activate the child theme. I have put the logo.png in the child theme images folder.

    If you must edit 2010, put the logo in the twentyten images folder.

    CSS

    @import url("../twentyten/style.css"); /* get basic 2010 css */
    
    /* The main theme structure - reduce top margin to compensate for changes to Header*/
    #wrapper {
    	margin-top: 12px;
    }
    
    /* =Header - add clickable logo to title */
    #site-title a {
    	padding: 7px 0 7px 78px; /* allow space for image */
    	background: url(images/logo.png) no-repeat;
    }

    HTH - Alan (just a css hacker)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.