|
|
| (134 intermediate revisions by 11 users not shown) |
| Line 1: |
Line 1: |
| In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/theming.html |
|
| |
|
| == File structure ==
| | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| | |
| === definitions.less ===
| |
| | |
| === style.less ===
| |
| | |
| == Variables ==
| |
| | |
| === Basic ===
| |
| | |
| {|
| |
| ! Variable || Default || Description
| |
| |-
| |
| | @bodyBackground || @white
| |
| |-
| |
| | @textColor || @grayDark
| |
| |-
| |
| | @linkColor || #08c
| |
| |-
| |
| | @linkColorHover || darken(@linkColor, 15%)
| |
| |-
| |
| | @linkAccentColor || #ffad00
| |
| |-
| |
| | @linkAccentColorHover || darken(@linkAccentColor, 15%)
| |
| |-
| |
| | @black || #000
| |
| |-
| |
| | @grayDarker || #222
| |
| |-
| |
| | @grayDark || #333
| |
| |-
| |
| | @gray || #555
| |
| |-
| |
| | @grayLight || #aaa
| |
| |-
| |
| | @grayLighter || #eee
| |
| |-
| |
| | @white || #fff
| |
| |-
| |
| | @blue || darken(#049cdb, 5%)
| |
| |-
| |
| | @blueDark || #0064cd
| |
| |-
| |
| | @blueLight || lighten(#049cdb, 25%)
| |
| |-
| |
| | @green || #1A8D1A
| |
| |-
| |
| | @greenLight || #92D050
| |
| |-
| |
| | @red || #cc0000
| |
| |-
| |
| | @yellow || #F8E400
| |
| |-
| |
| | @orange || #f89406
| |
| |-
| |
| | @pink || #E01CD9
| |
| |-
| |
| | @purple || #7E16CF
| |
| |-
| |
| |}
| |
| | |
| === Foldertree ===
| |
| {|
| |
| ! Variable || Default || Description
| |
| |-
| |
| | @foldertreeSidepanelBackground ||
| |
| |-
| |
| | @foldertreeSectionTitleColor ||
| |
| |-
| |
| | @foldertreeActiveLabelColor ||
| |
| |-
| |
| | @foldertreePassiveLabelColor ||
| |
| |-
| |
| | @foldertreeHoverBackground ||
| |
| |-
| |
| | @foldertreeSelectedBackground ||
| |
| |-
| |
| | @foldertreeCounterBadgeBackground ||
| |
| |-
| |
| | @foldertreeCounterBadgeColor ||
| |
| |}
| |
| | |
| == Mixins ==
| |
| | |
| == How to activate a theme during development ==
| |
| | |
| When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.
| |
| | |
| To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.
| |
| | |
| ==== Example ====
| |
| | |
| Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.
| |
| | |
| == Best practice ==
| |
| | |
| == Caveats ==
| |
| | |
| [[Category:AppSuite]]
| |
| [[Category:UI]]
| |