replace text with image

[defmd]

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?

[soap]

give the td a background image

also don’t use tables for reasons like this

[Sumeet Chawla]

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! :)

[defmd]

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?

[Sumeet Chawla]

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.

[Author]

Posts