Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3055

    Hi,

    Please ignore me if that’s beyond the scope of the theme support. I think it probably is but if you know a quick way/widget/code of doing it, its muchly appreciated.

    So, I was wondering if there’s a way to automatically replace certain words by icons/images in certain CSS classes? I’m assuming there’s a way around it in CSS but it will apply to the whole class but not certain words?

    Supposedly a php code is a better solution?

    Just as I said, plz only answer if you’re kind enough and have the idea/link already.

    Thank you!

    E.

    #40469

    Hey,

    The icons in the header use the CSS image replacement technique to display these links as icons rather than links so it’s already baked into the theme.

    There are 2 ways you can do this:

    1.) Set the image as the background instead of the text (as per the header) by adapting this code:

    .social_bookmarks .rss a {
    background: url("../images/skin1/rss_16.png") no-repeat scroll 0 0 transparent;
    }

    .social_bookmarks li a {
    border: medium none;
    display: block;
    float: left;
    height: 16px;
    outline: medium none;
    padding: 0;
    text-indent: -9999px;
    width: 16px;
    }

    2.) The alternative is to set a background image as well as the text, eg for a download link you could add an icon. You could adapt this code to acomplish this:

    .my-download {
    background: url(images/my-download-background-image.jpg) no-repeat;
    height: 16px; width: 16px;
    padding: 0 0 0 20px;
    }

    Hope this gets you going in the right direction; let me know how you get on.

    James

    #40470

    Aha, thank you heaps! Will give it a try.

    E

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Replace text with images’ is closed to new replies.