By homo_sapiens on

When searching over the whole Drupal site (for example with the key-words "pdf" and 'icon') you find a few articles with ideas to show a document-specific icon in front of the attachments.

Instead of rewriting or enhancing the code, I thought that it would be a good idea to use css for doing this job.

For example:
If you want to have a pdf-icon before the attachment, you have to find out, where there attachments are located within your page.
In my case (I use the garland theme!) they are located at:

#attachments tbody tr td
The specific link will always end in ".pdf", so with the newer features/selectors of css you can easily write something like:

#attachments tbody tr td a[href$='.pdf']
{
 background-image:url(images/pdfdoc.gif);
 background-repeat:no-repeat;
 background-position:0px;
 padding:4px 0px 4px 20px;
}

This should work, I tried it in other environments.

Next step: Trying to add this code to Drupal.

I thought that using the module node-style would be a good idea and I added the css-Code to this module.
But even after enabling this module the code does not seem to be included in the generated page.

Any ideas?

Thanx in advance

Peter

⋅ Categories: Drupal 5.x

Comments

homo_sapiens’s picture

homo_sapiens commented

Hi,
the problem has been solved.

If anybody is interested to know what went wrong:

I had to edit the specific page again and had to assign the appropriate node-style scheme.

Peter

cgjohnson’s picture

cgjohnson commented

i'm listening -- and curious about how you added such a scheme? Can you post a quick step by step? thanks very much!

homo_sapiens’s picture

homo_sapiens commented

Thats the way how I've done it:

  1. Get an 16x16 PDF-Image and download it into /themes/garland/images/
    (For example: http://www.uibk.ac.at/odok/images/logo_pdf.png )

  2. Create a file with name (for example) enhancedStyle.css in the folder
    themes/garland

    This file should contain:

    #attachments tbody tr td a[href$='.pdf']
{
	   background-image:url(images/logo_pdf.png);
	   background-repeat:no-repeat;
	   background-position:0px;
	   padding:4px 0px 4px 20px;
}

    (BTW: this will only work with a CSS2.0-Browser like Firefox since older Browser
    don't support the construction a[href$='.pdf'] )

  3. Install the Node-Style-Module

  4. After having installed this Module, you can add a scheme which needs to be accessible under
    a specific name.

    In the field titled with: "Insert mark-up into :"
    you have to put

    <style type="text/css" media="all">@import "/drupal/themes/garland/enhancedStyle.css"</style>

    into the content.

  5. If you create content (for example a page) you now have the opportunity to
    add additional "Node Style".

    You can add additional node style by selecting the specific name of
    the additional node style which has been created before.