README.md
8 months ago
contextmenu.css
8 months ago
dialog.css
8 months ago
icons.css
8 months ago
main.css
8 months ago
navbar.css
8 months ago
reset.css
8 months ago
statusbar.css
8 months ago
theme.css
8 months ago
toolbar.css
8 months ago
view-list.css
8 months ago
view-thumbnail.css
8 months 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 |