Changing default folders icons

Server
1

Steps to reproduce

Greetings.
Im installed custom theme from guide https://doc.owncloud.com/server/developer_manual/core/theming.html
All right, but I have trouble with folder icon. I see, my folder’s icon taken from path: /core/img/filetypes/folder.svg
If i trying create custom folder.svg icon on /apps/mynewtheme/core/img/filetypes folder, and create custom files.php(as original /apps/files/css/files.php exactly change path for taking:
.nav-icon-files {
background-image: url("/apps/mynewtheme/apps/files/img/folder.svg");
}
), anyway i see than my icon taken from path /core/img/filetypes/folder.svg. :expressionless:
I saw manual about changing icons for filetypes, but i dont see what file i need change for customize my folders icon.

P.S.
Earlier I tryed swap original file on path /core/img/filetypes and its work well, but i saw hash trouble message on admin panel, so i wanna to do proper installation without “botch”.

Expected behaviour

Changing default icons and path for that

Actual behaviour

Icons and path saved default

Server configuration

Operating system: Ububtu server 19.10

Web server: apache2

Database: Mariadb last

PHP version: 7+ last

ownCloud version: 10.3.0.4

**Updated from an older ownCloud or fresh install:**fresh install

Where did you install ownCloud from: offical site

Signing status (ownCloud 9.0 and above):

The content of config/config.php: dont need

Are you using external storage, if yes which one: no

Are you using encryption: yes

Eventually replace sensitive data as the name/IP-address of your LDAP server or groups.


### Client configuration
**Browser:** Last Chrome
2

Hello Nicky,

I don’t know exactly what you’re doing wrong but the way over the Files.php seems wrong to me.

What I would do is simply overwrite the icons with CSS. The changed folder image files should be under apps/YOURTHEME/core/img/filetypes. Then the following is written to the file apps/YOURTHEME/core/css/styles.css for the icon you wanted to replace according to the description.

    /* ------ Override folder icons */

    .thumbnail[style*="filetypes/folder.svg"] {
      background-image: url('../img/filetypes/folder.svg') !important;
    }

Further icons can be exchanged in this way.

    .thumbnail[style*="filetypes/folder-external.svg"] {
      background-image: url('../img/filetypes/folder-external.svg') !important;
    }

    .thumbnail[style*="filetypes/folder.svg"] {
      background-image: url('../img/filetypes/folder.svg') !important;
    }

    .thumbnail[style*="filetypes/folder-stared.svg"] {
      background-image: url('../img/filetypes/folder-stared.svg') !important;
    }

    .thumbnail[style*="filetypes/folder-shared.svg"] {
      background-image: url('../img/filetypes/folder-shared.svg') !important;
    }

    .thumbnail[style*="filetypes/folder-public.svg"] {
      background-image: url('../img/filetypes/folder-public.svg') !important;
    }

    .thumbnail[style*="filetypes/package-x-generic.svg"] {
      background-image: url('../img/filetypes/package-x-generic.svg') !important;
    }

    .thumbnail[style*="filetypes/folder-windows.svg"] {
      background-image: url('../img/filetypes/folder-windows.svg') !important;
    }

Don’t forget to empty the browser cache after exchanging graphics.

3 Likes
3

Dear cscherm,
Thanks for you answer. It more easy than i thought :smiley:
Regards, Nick.

1 Like