WordPress.org

Forums

Stripping sidebar from outbound link images (8 posts)

  1. Anonymous
    Unregistered
    Posted 5 years ago #

    One question that I was hoping you CSS experts out there could help me with.

    I am currently using a WordPress plugin that puts a small picture (showing "outbound link") on all my external links.
    This is great, I would just like to exclude the sidebar as an area where NOT to have these pictures. In the plugin there is no such configuration possibilities unfortunately.
    Is this possible using CSS?

    http://www.caputmundicibus.com

  2. s_ha_dum
    Member
    Posted 5 years ago #

    #sidebar * .external_icon {background:none}

  3. Anonymous
    Unregistered
    Posted 5 years ago #

    You´re a genius! Thanks a lot!

    Just for the sake of it, let me also ask you:

    Let´s say hypothetically that I would like to add this outbound link picture to ONE or TWO or SOME of the links there in the sidebar (so to say "exclude them from the exclusion of the pictures") - could that be done? Or could I specify each one with a class or something that they do not care about the don't-show-outbound-link-picture-in-sidebar-fact?

    Oh, this got messy...Hope you get it.

    Thanks again!

    / john

  4. s_ha_dum
    Member
    Posted 5 years ago #

    I didn't really follow that last bit, but yes you could selectively apply the link picture if you have the right classes/IDs in place.

  5. Anonymous
    Unregistered
    Posted 5 years ago #

    Yes, that´s exactly what I was thinking of, selectively apply the link picture. But I would still go with the "#sidebar * .external_icon {background:none}" for the whole of the sidebar? And the make a new class for the links where I DO want the picture? And how do I specify that class?

    / john

  6. s_ha_dum
    Member
    Posted 5 years ago #

    And how do I specify that class?

    Prepend the class name with a dot. So if you had a class named 'show-this-icon' for the ones you want to show, then you'd do this:

    #sidebar * .external_icon {background:none}
    #sidebar * .show-this-one {
    	background: url(external.png) center right no-repeat;
    	padding-right: 13px;
    }

    The second rule just duplicates the a.external_icon rule that puts those images on the other links. You will probably have to change the path on the url() though because that path assumes the stylesheet and the image are in the same directory. If you put this in your stylesheet that won't be true so you'll need to give the image a full path to the plugin's image.

  7. Anonymous
    Unregistered
    Posted 5 years ago #

    Great thank you! I´ll try it out as soon as I can! :)

  8. s_ha_dum
    Member
    Posted 5 years ago #

    The CSS I posted is inefficient in that some of the rules can likely be combined and reorganized so it would be worth it to look into some css tutorials. There are piles of them online. But what I posted is I guess the conceptually clearest and easiest to follow, or so I hope.

Topic Closed

This topic has been closed to new replies.

About this Topic