Easily Customize PDF, Print and Email Icons In Your Joomla Template

This is one super easy tip for anyone who wants to change the default PDF icon, Print icon and Email icon in their Joomla! template.

All you have to do is place your own custom icon designs into your template’s images directory making sure you name the icons according to Joomla’s icon naming convention.

The images need to be in the .PNG format and as a last step you will need to add the path to these images to your templatedetails.xml

  1. To change the default Joomla PDF icon use an image named: pdf_button.png
  2. to change the default Joomla Print icon use an image named: printButton.png
  3. and to change the default Joomla Email icon use an image named: emailButton.png

So easy!

The path to this directory on your site will be yoursite.com/templates/[your_template_name]/images/

Just place your own icons in this directory.

The last step is to open your templatedetails.xml and add the path to these images – your templatedetails.xml is located at: yoursite.com/templates/[your_template_name]/templatedetails.xml

Open templatedetails.xml in a plain text editor such as notepad, or in your code editor if you have one, and scroll down until you see something that looks like the following:


<files>

<filename>index.php</filename>

<filename>template_thumbnail.png</filename>

Now add in the paths for the icons you are replacing – if you are replacing all of them the code would look like so:


<files>

<filename>index.php</filename>

<filename>template_thumbnail.png</filename>

images/pdf_button.png

images/printButton.png

images/emailButton.png

Done! Your Joomla Template should now show your new icons.

5 Comments

 Add your comment
  1. Exactly what I was looking for, thanks!

  2. Hello,

    Do you also know how i can remove the background of the print button. When i now click on it; i get my template background but i don’t want this …

    Thanks
    Petra

  3. Awesome fix, thanks guys

  4. That’s great tips for me. Thanks.

    How to change the link with email button? I want when people click on Email button, it will point to Contact form instead of original “send-to-a-friend”?

Leave a Comment

Your email address will not be published.