How to change color of Download/Detail/Preview buttons?

[rto]

I'd like to change the colors of Download (green), Preview (red) and Detail (yellow) buttons to blue.
Can this be done from custom.css? What would be the code?
Thanks in advance for your appreciated help.

J1.7, PD 2.1.4

[SonRiab]

Yes you have to edit the custom.css file and add something like this:

Code: Select all

#phoca-dl-category-box .pd-button-download a {
    background: url("images/btn.png") repeat-x scroll 0 0%, url("images/icon-download.png") no-repeat scroll 6px center #0000EE;
}

#phoca-dl-category-box .pd-button-details a {
    background: url("images/btn.png") repeat-x scroll 0 0%, url("images/icon-download.png") no-repeat scroll 6px center #0000EE;
}

#phoca-dl-category-box .pd-button-preview a {
    background: url("images/btn.png") repeat-x scroll 0 0%, url("images/icon-download.png") no-repeat scroll 6px center #0000EE;
}

(untested!)

[rto]

Thank you for your reply. Your "untested" code works almost perfect! I only changed the icon files within details and preview buttons: pd-button-details: replaced icon-download.png with icon-details.png; pd-button-preview: replaced icon-download.png with icon-preview-png.
The buttons now appear in blue. But when I hoover over them the old color reappears. Is it possible to change this too? Where and how?
Thanks in advance for your help.

[SonRiab]

Adjust the color here and add this to the css file:

Code: Select all

#phoca-dl-category-box .pd-button-download a:hover,
#phoca-dl-category-box .pd-button-details a:hover,
#phoca-dl-category-box .pd-button-preview a:hover  {
    background-color: #0C630C;
}

[rto]

Thank you so much - you safed my day!
Your code works like a charme.

Greetings from Switzerland

[SonRiab]

It was a pleasure for me!

Schöne Grüße aus Deutschland! (^_^)

[plamen]

Hi,

In PD / Styles (CSS) there are several css files. Some of them published, some - not.
My intention is same - to change the green color of the download button. Bootstrap looks good, but editing bootstrap.min.css seems difficult.
How to do this in this menu?
Can not find custom.css.
Can I place above code in buttonrc.css?
Thanks in advance.

PD 3.0.4

[Jan]

Hi, you can upload your own CSS, you don't need to edit bootstrap directly in min, you can add its classes e.g. to custom.css which will be loaded after bootstrap and will overwrite the bootstrap definition.

As default, the custom.css is not included so if you create it, it will be not overwritten by upgrade.

Jan

[plamen]

Is any PD themes exist for version 3.0+ ?
(What is the location of custom.css?)
So, I created new css using menu item Styles(css), named it 'custom', it's name automaticaly became 'custom.css' and I placed the code cited inside.

[Jan]

Hi, you can set other CSS name.

It is stored in:
media/com_phocadownload/css/custom/ folder.

Jan