WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image links in sidebar (7 posts)

  1. Flameblade
    Member
    Posted 3 years ago #

    I am attempting to put social network icons into my sidebar, and have them link to various sites. I have attempted to use the Abitrary Text widget to add the html for the image

    <a href="LINK">
    <img src="IMAGE.EXT" border="0" />
    </a>

    This works, sort of. Instead of making the link exclusive to the dimensions of the image, it creates a box around the image that spans the entire sidebar horizontally, which leads to problems adding more icons.

    http://www.redhotkicks.net/
    Like so.

    How can I stop it from doing this and make the link box only around the image?

  2. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    Hi there,

    It would be helpful to see the issue so if you can provide a link to the site we'd appreciate it.

    Cheers,
    Dre

  3. Flameblade
    Member
    Posted 3 years ago #

    Added

  4. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    Hi there,

    It looks like you've set the width of your sidebar anchors to 200px:

    #sidebar a, #sidebar a:visited{
    display: block;
    padding: 7px 0;
    width: 200px;
    font: 9pt "verdana", arial, helvetica, sans-serif;
    text-decoration: none;
    text-indent: 10px;
    color: #fe5e00;background:#111111;
    }

    Try removing the width declaration to see if it fixes it:

    #sidebar a, #sidebar a:visited{
    display: block;
    padding: 7px 0;
    font: 9pt "verdana", arial, helvetica, sans-serif;
    text-decoration: none;
    text-indent: 10px;
    color: #fe5e00;background:#111111;
    }

    Cheers,
    Dre

  5. Flameblade
    Member
    Posted 3 years ago #

    That didn't seem to do anything.

  6. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    You can try adding a class to the HTML you've added in the widget:

    <a class="socicons" href="LINK">
    <img src="IMAGE.EXT" border="0" />
    </a>

    Then add the appropriate selector in your CSS:

    #sidebar a.socicons {width: 32px;}

    This gives you better control of the specific anchor and not all of the anchors in the sidebar.

    Cheers!

  7. Flameblade
    Member
    Posted 3 years ago #

    That didn't work, but strangely, changing the class width to 0px seems to have worked perfectly. Thank you for pointing me in the right direction.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.