Developing (v7+)

 

Remo replied on Mar 26, 2009 at 3:37 pm Permalink Reply

you can do that quite easy with css, no need for anything fancy like a block or something like that..

wltr replied on Mar 26, 2009 at 3:52 pm Permalink Reply

To be more precise

a[href$=".pdf"] {
background: url(path/to/pdf.gif) no-repeat scroll 0 50%;padding-left: 18px;
}

Does not work in IE6, but who cares.

Remo replied on Mar 26, 2009 at 3:58 pm Permalink Reply

thanks, let's finish that css tutorial with a little ie6 addon ;-)

$('a[href$=".pdf"]').css({
    paddingLeft: '18px',
    background: 'url(path/to/pdf.gif) no-repeat scroll 0 50%'
  });

wltr replied on Mar 26, 2009 at 4:22 pm Permalink Reply

Great tip.

jquery rocks! Swiss army knife for developers. No pun intended ;-)

bryanlewis replied on Mar 26, 2009 at 4:44 pm Permalink Reply

thanks a ton guys! I will try this out!

bryanlewis replied on Mar 26, 2009 at 5:17 pm Permalink Reply 1 Attachment

It worked but when I add a file in my tiny mce editor is displays the file name and a part of the icon.

Example is in the attachment...

Is there anyway to get rid of the file name?

This is my current CSS:

a[href$=".pdf"] {
background: url(images/PDF-Icon.jpg) no-repeat scroll 0 50%;padding-left: 18px;
width: 150px;
height: 150px;
}

Any help would be very appreciated!

wltr replied on Mar 26, 2009 at 5:38 pm Permalink Reply

You can set a fixed width equal to the image width and hide the rest.

display: block; width: 18px; overflow: hidden;

But I'm not sure how this is interpreted by tinymce. I guess you have to experiment a bit.

bryanlewis replied on Mar 26, 2009 at 5:49 pm Permalink Reply

But, the file name is still there is there any way to get rid of this?

wltr replied on Mar 26, 2009 at 6:06 pm Permalink Reply

you could try:

text-indent: -999px;

But from that point on you are entering advanced css techniques :-S

OR alternatively use a HTML img-tag.

bryanlewis replied on Mar 27, 2009 at 8:59 am Permalink Reply

It makes the boss happy so if he is happy I am happy! Thanks a ton! You helped out a great deal!