Difference between revisions of "AppSuite:Theming"

(Basic)
(Basic: fonts)
Line 10: Line 10:
  
 
=== Basic ===
 
=== Basic ===
 +
 +
==== Font ====
 +
 +
{|
 +
! Variable || Default || Description
 +
|-
 +
| @sansFontFamily      || "Helvetica Neue", Helvetica, Arial, sans-serif
 +
|-
 +
| @serifFontFamily      || Georgia, "Times New Roman", Times, serif
 +
|-
 +
| @monoFontFamily      ||  Monaco, Menlo, Consolas, "Courier New", monospace
 +
|-
 +
| @baseFontSize        ||  14px
 +
|-
 +
| @baseFontFamily      ||  @sansFontFamily
 +
|-
 +
| @baseLineHeight      ||  20px
 +
|-
 +
| @altFontFamily        ||  @serifFontFamily
 +
|-
 +
| @touchFontSize        ||  15px
 +
|-
 +
| @headingsFontFamily  ||  inherit
 +
|-
 +
| @headingsFontWeight  ||  bold
 +
|-
 +
|}
 +
 +
 +
// Component sizing
 +
// -------------------------
 +
// Based on 14px font-size and 20px line-height
 +
 +
@fontSizeLarge:        @baseFontSize * 1.25; // ~18px
 +
@fontSizeSmall:        @baseFontSize * 0.85; // ~12px
 +
@fontSizeMini:          @baseFontSize * 0.75; // ~11px
 +
|}
 +
 +
==== Colors ====
  
 
{|
 
{|
Line 25: Line 64:
 
|-
 
|-
 
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
 
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
 +
|-
 +
| @headingsColor        || inherit
 
|-
 
|-
 
| @black                || #000
 
| @black                || #000

Revision as of 14:16, 10 April 2013

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

File structure

definitions.less

style.less

Variables

Basic

Font

Variable Default Description
@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Monaco, Menlo, Consolas, "Courier New", monospace
@baseFontSize 14px
@baseFontFamily @sansFontFamily
@baseLineHeight 20px
@altFontFamily @serifFontFamily
@touchFontSize 15px
@headingsFontFamily inherit
@headingsFontWeight bold


// Component sizing // ------------------------- // Based on 14px font-size and 20px line-height

@fontSizeLarge: @baseFontSize * 1.25; // ~18px @fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeMini: @baseFontSize * 0.75; // ~11px |}

Colors

Variable Default Description
@bodyBackground @white
@textColor @grayDark
@linkColor #08c
@linkColorHover darken(@linkColor, 15%)
@linkAccentColor #ffad00
@linkAccentColorHover darken(@linkAccentColor, 15%)
@headingsColor inherit
@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 appserver proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the io.ox/core/settingsOptions//themes list.

Example

Adding

io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic

to etc/settings/appsuite.properties add a theme named unicorn with the name Friendship is Magic to the list of themes, a user can choose. Find the list in the Settings -> Basic view behind the option Theme.

Best practice

Caveats