# Other Guides # Filebrowser Custom Icon Colors - How To This css *colorizes* some file types' icons, so different files can be distinguished more easily. It also *changes some icons* to make distinguishing them even more easy. [![lq11cu3y5r581.png](https://thehomelab.wiki/uploads/images/gallery/2022-02/scaled-1680-/lq11cu3y5r581.png)](https://thehomelab.wiki/uploads/images/gallery/2022-02/lq11cu3y5r581.png) ## How to use this - Download the custom.css file from [here](https://github.com/jniggemann/filebrowser-css) or copy from below. ```json /* filebrowser-css - a custom stylesheet for filebrowser that adds colors and changes some icons https://github.com/jniggemann/filebrowser-css Copyright (C) 2021-2022 Jan Niggemann With kind contributions of * Richard Asplin (https://github.com/richneptune) This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /* remove a bit of padding from the file list entries */ #listing.list .item { padding: 0.7em; } /* make folders yellow-ish */ #listing .item[data-dir=true] div i { color: #ffc84b; } /* packed files - colorize and change icon */ #listing .item[aria-label$=".7z"] div i { color: #a268a1; } #listing .item[aria-label$=".7z"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".7z"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".arj"] div i { color: #a268a1; } #listing .item[aria-label$=".arj"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".arj"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".zip"] div i { color: #a268a1; } #listing .item[aria-label$=".zip"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".zip"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".gz"] div i { color: #a268a1; } #listing .item[aria-label$=".gz"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".gz"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".tar"] div i { color: #a268a1; } #listing .item[aria-label$=".tar"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".tar"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".bz"] div i { color: #a268a1; } #listing .item[aria-label$=".bz"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".bz"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".bz2"] div i { color: #a268a1; } #listing .item[aria-label$=".bz2"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".bz2"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".xz"] div i { color: #a268a1; } #listing .item[aria-label$=".xz"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".xz"] .material-icons::before { content: "archive"; visibility: visible; } #listing .item[aria-label$=".tbz"] div i { color: #a268a1; } #listing .item[aria-label$=".tbz"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".tbz"] .material-icons::before { content: "archive"; visibility: visible; } /* office files */ /* PDF - colorize and change icon /* /* Note: This is yellow because I use SumatraPDF */ #listing .item[aria-label$=".pdf"] div i { color: #FFEE00; } #listing .item[aria-label$=".pdf"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".pdf"] .material-icons::before { content: "picture_as_pdf"; visibility: visible; } /* word processors - colorize and change icon */ /* Word */ #listing .item[aria-label$=".doc"] div i { color: #185ABD; } #listing .item[aria-label$=".doc"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".doc"] .material-icons::before { content: "description"; visibility: visible; } #listing .item[aria-label$=".docx"] div i { color: #185ABD; } #listing .item[aria-label$=".docx"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".docx"] .material-icons::before { content: "description"; visibility: visible; } /* OpenOffice Writer */ #listing .item[aria-label$=".odt"] div i { color: #185ABD; } #listing .item[aria-label$=".odt"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".odt"] .material-icons::before { content: "description"; visibility: visible; } /* LibreOffice Writer */ #listing .item[aria-label$=".sxw"] div i { color: #185ABD; } #listing .item[aria-label$=".sxw"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".sxw"] .material-icons::before { content: "description"; visibility: visible; } /* PowerPoint */ #listing .item[aria-label$=".ppt"] div i { color: #D35230; } #listing .item[aria-label$=".pptx"] div i { color: #D35230; } #listing .item[aria-label$=".pps"] div i { color: #D35230; } /* OpenOffice Impress */ #listing .item[aria-label$=".odp"] div i { color: #D35230; } /* Excel */ #listing .item[aria-label$=".xls"] div i { color: #107C41; } #listing .item[aria-label$=".xlsx"] div i { color: #107C41; } #listing .item[aria-label$=".ods"] div i { color: #107C41; } #listing .item[aria-label$=".sxc"] div i { color: #107C41; } #listing .item[aria-label$=".wri"] div i { color: #336eff; } /* sound files - colorize */ #listing .item[data-type=audio] div i { color: #F47900; } /* video files - colorize */ #listing .item[data-type=video] div i { color: #F47900; } /* text files - change icon*/ #listing .item[aria-label$=".txt"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".txt"] .material-icons::before { content: "description"; visibility: visible; } #listing .item[aria-label$=".md"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".md"] .material-icons::before { content: "description"; visibility: visible; } /* various other files*/ /* iCal - change icon*/ #listing .item[aria-label$=".ics"] .material-icons { visibility: hidden; } #listing .item[aria-label$=".ics"] .material-icons::before { content: "event"; visibility: visible; } ``` - In Filebrowser, go to Settings → Global Settings and enter the path to where you saved the custom.css in "Branding Directory path" You can also set this on the [commandline](https://filebrowser.org/configuration/custom-branding). Since no one else showed exactly how to do this, I will be kind and explain it for you. Since I am using a docker image of Filebrowser, it uses the 'srv' directory as the volume mount for the file directory. [![filebrowser-docker-compose.png](https://thehomelab.wiki/uploads/images/gallery/2022-02/scaled-1680-/filebrowser-docker-compose.png)](https://thehomelab.wiki/uploads/images/gallery/2022-02/filebrowser-docker-compose.png) I created a new folder in my root Filebrowser called custom then placed the custom.ss file there. [![filebrowser-custom-branding-dir-gif.gif](https://thehomelab.wiki/uploads/images/gallery/2022-02/filebrowser-custom-branding-dir-gif.gif)](https://thehomelab.wiki/uploads/images/gallery/2022-02/filebrowser-custom-branding-dir-gif.gif) It's important to leave the trailing slash so the path can call and append the custom.css file. [![filebrowser-custom-branding-dir.png](https://thehomelab.wiki/uploads/images/gallery/2022-02/scaled-1680-/filebrowser-custom-branding-dir.png)](https://thehomelab.wiki/uploads/images/gallery/2022-02/filebrowser-custom-branding-dir.png) Once you save this path, you might need to clear your browser cache to see the changes.