README.md
2 years ago
contextmenu.css
2 years ago
dialog.css
2 years ago
icons.css
2 years ago
main.css
2 years ago
navbar.css
2 years ago
reset.css
2 years ago
statusbar.css
2 years ago
theme.css
2 years ago
toolbar.css
2 years ago
view-list.css
2 years ago
view-thumbnail.css
2 years ago
README.md
47 lines
| 1 | # Stylesheets |
| 2 | All CSS for your theme will be located here. |
| 3 | |
| 4 | The `theme.css` file is the focal point for loading the styles. These could all have been in one file, but have been split up for the sake of more easily structuring and maintaining the codebase. |
| 5 | |
| 6 | * **reset.css** : resets background and border of all elfinder elements so that you can skin from scratch without manually positioning the main elements yourself |
| 7 | * **main.css** : main UI elements (wrapper for the main elfinder div, global styles, etc..) |
| 8 | * **icons.css** : icons across the UI (e.g. file associations) |
| 9 | * **toolbar.css** : toolbar at the top of the elfinder container. Contains toolbar buttons and searchbar |
| 10 | * **navbar.css** : directory navigation on the left-hand panel |
| 11 | * **view-list.css** : defines the list view |
| 12 | * **view-thumbnail.css** : defines the thumbnail/tile view |
| 13 | * **contextmenu.css** : context menu shown when right-clicking on in the list/thumbnail view or navbar |
| 14 | * **dialog.css** : information dialogs/modal windows |
| 15 | * **statusbar.css** : footer; contains information about directory and currently selected files |
| 16 | |
| 17 | Note that many of the styles have a large degree of selectivity. E.g: |
| 18 | |
| 19 | ```css |
| 20 | .elfinder .elfinder-navbar .elfinder-navbar-dir.ui-state-active:hover { /* */ } |
| 21 | ``` |
| 22 | |
| 23 | This is to minimize the need for using `!important` flags to override the existing styles (particularly with respect to jQuery UI's CSS). |
| 24 | |
| 25 | ## Tips |
| 26 | * Use the `reset.css` style to reset the styles that you need to. Comment out selectors that you wish to remain untouched. |
| 27 | * If you need to reset a style outside of `reset.css`, the following normally suffices: |
| 28 | |
| 29 | ```css |
| 30 | background: none; |
| 31 | border: none; |
| 32 | ``` |
| 33 | * If you want to change the icons in a particular container, it is best to reset the icon's style from a general selector, then style each individual icon separately. For example: |
| 34 | |
| 35 | ```css |
| 36 | /* All toolbar icons */ |
| 37 | .elfinder .elfinder-toolbar .elfinder-buttonset .elfinder-button-icon { |
| 38 | /* reset the style and set properties common to all toolbar icons */ |
| 39 | } |
| 40 | |
| 41 | /* mkfile toolbar icon */ |
| 42 | .elfinder .elfinder-toolbar .elfinder-buttonset .elfinder-button-icon-mkfile { |
| 43 | /* styles specific to the mkfile button (e.g. background-position) */ |
| 44 | } |
| 45 | ``` |
| 46 | * Some styles have their `text-indent` property set to `-9999px` to keep the text out of view. If after styling you can't see the text (and you need to), change the `text-indent` property |
| 47 |