Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2009-03-19 03:29:09
- juliane
- Member
- Registered: 2009-02-08
- Posts: 33
icon image through css
hi,
i’m trying to put an icon before comments_invite using css image replacement.
so I wrote this:
.comment-icon { background:url(images/comment-icon.png) 1px no-repeat;padding-left:11px;color:#999999;}
how should I write the code on the form before <txp:comments_invite /> ?
i tried <div class=“comment-icon”></div> but did not work.
thank you!
Offline
Re: icon image through css
try inserting a inside the div. a completely empty div might not render at all
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline
Re: icon image through css
.comment-icon might not have any height. try adding height: 20px; and see if that makes any difference.
Txp admin themes | dropshado.ws – a blog for design noobs like me
Offline
#4 2009-03-19 17:48:04
- juliane
- Member
- Registered: 2009-02-08
- Posts: 33
Re: icon image through css
still not working.
tried both: <div class=“comment-icon”> </div> and height: 20px.
what is wrooong? :/
Offline
Re: icon image through css
Are you sure you have the correct file path to the image? Try these:
url(/images/comment-icon.png)
url(../images/comment-icon.png)and if that doesn’t work, I would put the full URL address in there.
Txp admin themes | dropshado.ws – a blog for design noobs like me
Offline
#6 2009-04-24 03:33:12
- juliane
- Member
- Registered: 2009-02-08
- Posts: 33
Re: icon image through css
yes. I think I have the correct path to image: http://wowlab.org/images/comment.png
.post-comment-icon { height: 20px; background:url(images/comment.png) no-repeat;padding-left:11px; }
the url is: http://wowlab.org
and I have this code now:
<span class=“post-comment-icon”> </span>
<span class=“post-comment-invite”><txp:comments_invite /></span>
whys not showing the icon?
thank you.
Offline
#7 2009-04-24 03:45:16
- juliane
- Member
- Registered: 2009-02-08
- Posts: 33
Re: icon image through css
also, how can I place the grey box (with comment author+invite) aligned to the bottom of the image of the article that is on the left?
Offline
Re: icon image through css
julianne, do you have a sample online, or at least an image? Don’t really understand what “gray box” you are referring to, or exactly what it should be aligned with.
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline
#9 2009-04-24 13:19:53
- juliane
- Member
- Registered: 2009-02-08
- Posts: 33
Re: icon image through css
I want the site to be aligned like this:
The gray box is where the comment author name and comments invite are. I want this aligned to the bottom of the article image. For every article.
Like this picture: http://wowlab.org/images/wowlab-aligned.jpg
Offline
Re: icon image through css
you can set the container for your article with position: relative and the grey box with position:absolute; bottom:0; that way the gray box will always be aligned with the bottom of the article container
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline
#11 2009-04-24 17:11:49
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: icon image through css
juliane wrote:
.post-comment-icon { height: 20px; background:url(images/comment.png) no-repeat;padding-left:11px; }
You didn’t add the slash like nemoorange said: background:url(/images/comment.png).
(The funny thing is that as soon as I open ‘edit CSS’ with the Webdeveloper extension, the icon appears, without having to change a thing…)
Offline
Pages: 1