WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Image links in sidebar

[Resolved] Image links in sidebar

  • 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?

Viewing 6 replies - 1 through 6 (of 6 total)
  • dremeda

    @dremeda

    Sucuri Wizard

    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

    Added

    dremeda

    @dremeda

    Sucuri Wizard

    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

    That didn’t seem to do anything.

    dremeda

    @dremeda

    Sucuri Wizard

    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!

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Image links in sidebar’ is closed to new replies.