Modify download icon in article

Phoca Download - download manager
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 90
Joined: 09 Oct 2018, 16:39

Modify download icon in article

Post by fabio42 »

Hello!
In case anyone knows that, could you tell me how to modify the icon that is inserted by Phoca Download when you insert a file to be downloaded? The phoca icon is greyish with an arrow that points to the bottom.
Thanks in advance!
Fabrice
User avatar
christine
Phoca Hero
Phoca Hero
Posts: 3066
Joined: 28 Nov 2010, 17:20

Re: Modify download icon in article

Post by christine »

Hi Fabrice,

Normally it’s:
“.../media/com_phocadownload/images/mime/16/icon-img.png”
or a PDF icon.
Can we see that somewhere?

Kind regards,
Christine
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 90
Joined: 09 Oct 2018, 16:39

Re: Modify download icon in article

Post by fabio42 »

Image

that's the one I'm talking about! Once you insert a file with Phoca Download Button plugin, you get this, and this is not that lovely :wink:
I guess I'd better use css because if phoca is updated I will lose my modification? But what code should I use and where should I put it? custom.scss in my template?
Thanks in advance!
User avatar
christine
Phoca Hero
Phoca Hero
Posts: 3066
Joined: 28 Nov 2010, 17:20

Re: Modify download icon in article

Post by christine »

fabio42 wrote: 21 Oct 2026, 18:17
I guess I'd better use css because if phoca is updated I will lose my modification?
Yes.
But what code should I use and where should I put it? custom.scss in my template?
Have you already uploaded a modified icon to the media library?

You should actually see this using the inspector. Then add the code (with the new icon path) to custom.css

Kind regards,
Christine
User avatar
christine
Phoca Hero
Phoca Hero
Posts: 3066
Joined: 28 Nov 2010, 17:20

Re: Modify download icon in article

Post by christine »

Have a look at phocadownload.css, around line 52
You should see something like this there:

Code: Select all

.phocadownloadfile32 {
  background: #fdfdfd url(../images/icon-download-32.png) 5px center no-repeat;
  border: 1px solid #cccccc;
  margin: 5px;
  padding: 10px 10px 10px 40px;
}
and replace the icon that has been changed.
Into you custom.css

Kind regards,
Christine
Post Reply