WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add clickable link to logo in sidebar? (11 posts)

  1. joshuaswiss
    Member
    Posted 2 years ago #

    Can anyone tell me how to add a clickable link to the logo in my sidebar? I tried adding some html to the layout.css file, but it did not work. I am currently using the Cleanslide theme, and my site is southsudanngoforum.org.

  2. the.green.timtam
    Member
    Posted 2 years ago #

    Have you tried adding some HTML in a text widget in the sidebar? Something like:

    <a href="URL OF IMAGE">Link Text</a>

    Although, looking at your site you don't seem to have a sidebar...

    Do you mean the navigation on the left? If that is the case then go to Appearance>Menus and add a menu item linking to the URL.

    Also, CSS does NOT include any HTML, only CSS. Don't go adding HTML to CSS files - they belong in the PHP files.

    Hope this helps...

  3. joshuaswiss
    Member
    Posted 2 years ago #

    Thanks for the advice...

    Yes, I meant the navigation on the left. I already have a "Home" link in the menu, but I wanted to link to the home page via the logo at the top of the navigation bar as well.

    Problem is, I am having trouble locating the image in my files (I inherited management of the site, didn't create it, and am new to WordPress). Any ideas?

  4. the.green.timtam
    Member
    Posted 2 years ago #

    Ahh, I see!

    I'm not too sure how to do this without looking at your theme files. It's almost definitively going to be in header.php - look for <div id="logo"> and just after add the following:

    <a href="<?php bloginfo('url'); ?>">

    And just before the next </div> that comes after it, add the following:

    </a>

    Hopefully this works.

  5. joshuaswiss
    Member
    Posted 2 years ago #

    That sort of worked. The link goes to a 404 Error page, and the logo became offset and the color messed up, but it is at least a clickable link now. Any thoughts as to why it won't link to the home page? Or why the change screwed with the image (now the background of the image is a poorly filled-in grey, like it was done with MS Paint). Maybe the "bloginfo"?

    <div id="Logo">
    <a href="<?php bloginfo('http://southsudanngoforum.org'); ?>/">
    <img src="<?php echo $bl_logo; ?>" alt="<?php wp_title(); ?>" />
    </a></div>
  6. the.green.timtam
    Member
    Posted 2 years ago #

    Sorry, when I said:

    <?php bloginfo('url'); ?>

    That is exactly what I meant. It's a piece of PHP code that will automatically get the URL of the home page of the website. You weren't meant to replace it with the actual URL - sorry about any confusion.

    As for the change in colour, it's due to something in the CSS - not sure what though without a detailed look through the files.

  7. joshuaswiss
    Member
    Posted 2 years ago #

    Thanks a million! I'm still having problems with the change in color and position, but I'll play around with it and see what I can find.

  8. joshuaswiss
    Member
    Posted 2 years ago #

    Thanks a million! I'm still having problems with the change in color and position, but I'll play around with it and see what I can find.

  9. the.green.timtam
    Member
    Posted 2 years ago #

    Try removing the following from css/typography.css, under #logo:

    background:#666;

  10. the.green.timtam
    Member
    Posted 2 years ago #

    Actually remove everything from there: all of this can go:

    #Logo a {
    width:160px;
    height:160px;
    display:block;
    background:#666;
    top:20px;
    left:20px;
    position:relative;
    }

    Basically, this changes the look of everything in the Logo divider when it's linked to something. Removing it will stop any changes that are made when you set it to link.

  11. joshuaswiss
    Member
    Posted 2 years ago #

    You, sir, are the man. A scholar and gentleman. Any chance I can Paypal you a beer?

    Thanks for all the help, it worked wonderfully.

Topic Closed

This topic has been closed to new replies.

About this Topic