Grow your CSS skills. Land your dream job.

replace text with image

  • # September 4, 2009 at 3:22 am

    I am newbie when it comes to CSS. I am creating a custom stylesheet for a website (CMS) and I can’t modify the source. I am therefore trying to resolve some problems which could easily be solved by editing the source. On the other hand it does give additional challenges ;)

    I want to know if it is possible to replace text with an image if the source looks like this:

    Code:
    unread


    Couple of questions

    12 NormalGuy

    By dave123
    6 minutes ago

    It is a forum and I would like to replace the unread (or read) with an icon. Is it possible to do this with CSS if the source looks as above?

    # September 5, 2009 at 2:53 am

    give the td a background image

    also don’t use tables for reasons like this

    # September 5, 2009 at 3:13 pm

    As soap mentioned that it can be achieved by putting a background image to the <td>. You can do that by giving a class to the following table data which displays the unread/read notice.

    Code:
    unread

    and then apply a CSS for it in the following manner

    Code:
    .unread{
    background-image: url(‘your-icon-url’);
    background-repeat: no-repeat;
    width: ;
    height:
    ;
    }

    The code for ‘read’ should be similar too.
    As you mentioned that this is for a forum, hence, am sure you must be using some server scripting language. You have to dynamically change the class of that table data to ‘unread’ or ‘read’.

    Am sure there must be some better way to do this too…

    P.S.: Don’t use tables, they SUCK! :)

    # September 6, 2009 at 6:39 pm

    Thanks for the replies…. Question how do I give the TD a background if I can’t change the html code to give the TD a class.
    That’s basically the challenge there is no span, anchor or class in the code. If changing the code is currently no option is it possible to add a background image of the TD via the stylesheet? If so what would the CSS code look like?

    # September 7, 2009 at 5:22 am

    I presume that the ‘read’ and the ‘unread’ notification would change dynamically when the user visit’s a particular post. If you set the background image of the td by giving it a static class, then the image won’t change when the notification changes…

    There is no span/class in the old code because the read/unread notification was meant to be in text. Hence, the person who wrote that code, didn’t think it was necessary to give it any class. What I would suggest is to google on how would you check if the post is read or unread, then use pHp to assign that td a specific class and then style those classes using CSS.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".