Add an icon to an discussion

hutstein · May 2006

I'm trying to add an icon to an sticky discussion, but it doesn't work:

.Sticky {
	background-image:url(../gfx/icon.png) ! important; 
	background-repeat:no-repeat;
	background-position:left center;
}

What's wrong?

AmbitiousLemon · May 2006

Well it sort of works. The trouble is that the contents of the li that the stick applies to also have their own backgrounds. So your image gets covered up by those other background images. If all you want is an icon, then you can probably add padding so that the portion of the background where the icon should be is uncovered. .Sticky { background: url(../gfx/icon.png) no-repeat left center !important; padding-left: 20px !important; }

Bergamot · May 2006

I tend to use text-indent for that.

hutstein · May 2006

@AmbitiousLemon
the icon is displayed but everything is moved 20px right and that destroys the complete layout...

@bergamot


.Sticky {
background: url(../gfx/icon.png) no-repeat left center !important;
text-indent: 20px !important;
}

only the words [Sticky] and the discussion title are moved a little and the icon isn't displayed...

a_magical_me · May 2006

Hmm... try replacing "center" in the background definition with "top".

AmbitiousLemon · May 2006

you'll need to adjust the inner li's to compensate for the padding.

Add an icon to an discussion

Comments