******************* App theme.yaml file ******************* .. include:: ../complete.rst Theme.yaml defines the visual look and feel of the application. .. code-block:: none app.yaml theme.yaml <--- You are here help/ public/ stacks/ stackname/ dataservice.py stack.yaml templates.html fixtures/ help/ Theme.yaml Options ================== .. note:: ``theme.yaml`` changed significantly from juicebox 2 to juicebox 3. For more on the differences see :ref:`converting_theme_yaml` favicon ------- A app-specific favicon can be defined by referencing a url. Here's an example favicon that uses the Juice Analytics website favicon. .. code-block:: none favicon: https://images.squarespace-cdn.com/content/v1/52f42657e4b0b3416ff6b831/1438717085445-QGCHHL4DQ4NAB4P7XJTE/ke17ZwdGBToddI8pDm48kBsHB0yfx-7z5ZSu5LL33v9Zw-zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVHixfACwYNJVM6dBR4JlzM0x_MQLOHRzw7ZyPy40T64SqQvevUbj177dmcMs1F0H-0/favicon.ico?format=100w logo (theme) ------------ Logos are defined the same way as :ref:`image-background`. The image can be a url link or an image in the ``public/img/`` directory. You must set the logo height using the ``h`` property in config. You can use any of the `Imgix API `_ options to modify the image. Logos automatically use a retina resolution logo (the same as if you had set ``dpr: 2`` in the `Imgix API for DPR `_). It's best if you use an image that is twice the height that you want to show on screen. .. code-block:: python logo: image: 'http://logok.org/wp-content/uploads/2014/06/IBM-logo-blue.png' config: h: 120 This is what the logo looks like. .. image:: images/logo_ibm_1.jpg You can do much fancier things with the Imgix API. This example puts a red background behind the logo, then masks it with a circle. .. code-block:: python logo: image: 'http://logok.org/wp-content/uploads/2014/06/IBM-logo-blue.png' config: h: 120 w: 120 fit: 'crop' mask: 'ellipse' bg: 'ff0000' This is what the "enhanced" logo looks like. .. image:: images/logo_ibm_2.jpg Variables --------- Theme variables can be modified to change the style and layout of the entire applications. The following are the default settings for each variable. Any can be placed in the ``variables`` sections of the ``theme.yaml`` file to edit the theme. Here's an example with variables that have been customized: .. code-block:: none variables: |- $theme-primary-color: #59adbf; $theme-accent-color: #eea83c; $theme-header-image: 'https://fruition-snapshots.s3.amazonaws.com/patterns/Research2-cropped.jpg'; $theme-page-header-background-color: rgba(238, 168, 60, 0.6); $theme-page-header-height: 130px; $theme-header-app-title: true; $theme-slice-margin-left: 40px; $theme-page-header-image-ypos: -100px; Color variables ^^^^^^^^^^^^^^^^^ .. code-block:: none // COLORS // ---------------------------- $theme-primary-color: #1ba0e2; $theme-accent-color: #fc932a; $theme-benchmark-color: #C10AD8; $theme-target-color: #FB9E1E; $theme-dark-color: #000; $theme-light-color: #fff; $theme-good-color: #B1E07E; $theme-bad-color: #ED9998; $theme-alert-color: #CB001A; $theme-comparison1-color: #1F77B4; $theme-comparison2-color: #FF7F0E; $theme-comparison3-color: #2CA02C; $theme-comparison4-color: #D62728; $theme-comparison5-color: #9467BD; Layout variables ^^^^^^^^^^^^^^^^^ .. code-block:: none // LAYOUT // ---------------------------- $theme-slice-sequence-style: 'non-linear'; // non-linear, linear Shape variables ^^^^^^^^^^^^^^^^^ .. code-block:: none // SHAPE // ---------------------------- $theme-base-radius: 6px; $theme-shadows: true; // so far only controls table selection rows Spacing variables ^^^^^^^^^^^^^^^^^ .. code-block:: javascript // SPACING // ---------------------------- $theme-base-margin: 8px; Font variables ^^^^^^^^^^^^^^ .. code-block:: none // FONTS // ---------------------------- $theme-base-font: 'Open Sans' !default; $theme-display-font: $theme-base-font !default; $theme-headline-font: $theme-base-font !default; $theme-caption-font: $theme-base-font !default; $theme-controls-font: $theme-base-font !default; $theme-discussions-font: 'Merriweather' !default; $theme-base-font-stack: #{$theme-base-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $theme-display-font-stack: #{$theme-display-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $theme-headline-font-stack: #{$theme-headline-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $theme-caption-font-stack: #{$theme-caption-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $theme-controls-font-stack: #{$theme-controls-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $theme-discussions-font-stack: #{$theme-discussions-font}, Georgia, serif !default; Animation variables ^^^^^^^^^^^^^^^^^^^ .. code-block:: none // ANIMATION // ------------------------- $theme-transition-length: 0.8s; App background variables ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. code-block:: none // APP // --------------------- $theme-background-isImage: false; $theme-header-app-title: false; $theme-login-background-isPhoto: false; $theme-login-background-image: ''; Stack background variables ^^^^^^^^^^^^^^^^^^^^^^^^^^ .. code-block:: none // STACK // --------------------- $theme-body-background-color: transparentize($primary-color-light, .85); $theme-stack-background-color: transparent; $theme-stack-border: false; $theme-stack-border-color: $dark-color-faintest; Page header variables ^^^^^^^^^^^^^^^^^^^^^ .. code-block:: none // Page Header // --------------------- $theme-header-image: ''; $theme-page-header-image-xpos: 0px; $theme-page-header-image-ypos: 0px; $theme-page-header-background-color: transparent; $theme-page-header-navitems-background-color: $theme-primary-color; $theme-page-header-actions-background-color: $theme-primary-color; $theme-page-header-height: 0px; $theme-page-header-style-dark-stacks: (); $theme-page-header-hide-nav: false; Slice variables ^^^^^^^^^^^^^^^ .. code-block:: none // General Slice variables // -------------------------- $theme-slice-background-color: $theme-light-color; $theme-slice-margin-left: 10px; $theme-slice-style: 'column'; // column, card Recommended Fonts ================= Choosing a font is as simple as setting the **$theme-base-font** variable in the **theme.yaml** file in an app. Here are fonts that we recommend, grouped in different themes. Technical Fonts --------------- .. code-block:: none // theme.yaml $theme-base-font: 'Source Sans Pro' .. image:: images/source-sans-pro-sample.png :width: 775 Storytelling / Narrative Fonts ------------------------------ .. code-block:: none // theme.yaml $theme-base-font: 'Rubik' .. image:: images/rubik-sample.png :width: 775 .. code-block:: none // theme.yaml $theme-base-font: 'Quicksand' .. image:: images/quicksand-sample.png :width: 775 Modern Fonts ------------ .. code-block:: none // theme.yaml $theme-base-font: 'Libre Franklin' .. image:: images/libre-franklin-sample.png :width: 775 .. code-block:: none // theme.yaml $theme-base-font: 'Exo' .. image:: images/exo-sample.png :width: 775 .. code-block:: none // theme.yaml $theme-base-font: 'Overpass' .. image:: images/overpass-sample.png :width: 775 .. code-block:: none // theme.yaml $theme-base-font: 'Lato' .. image:: images/lato-sample.png :width: 775 Classic Fonts ------------- .. code-block:: none // theme.yaml $theme-base-font: 'Open Sans' .. image:: images/open-sans-sample.png :width: 775 .. code-block:: none // theme.yaml $theme-base-font: 'Muli' .. image:: images/muli-sample.png :width: 775 Professional Fonts ------------------ .. code-block:: none // theme.yaml $theme-base-font: 'Spectral' .. image:: images/spectral-sample.png :width: 775 .. code-block:: none // theme.yaml $theme-base-font: 'Lora' .. image:: images/lora-sample.png :width: 775