# DiSign Drupal installation profile

## Introduction

Our digital signage system is based on Drupal and offers complete flexibility in design and content management. A key advantage is that the front-end templates can be fully customized to the customer's individual corporate design. At the same time, all content requirements—from dynamic content to complex workflows—can be efficiently mapped.

## Installation

We provide a composer project to install DiSign. Follow the instructions at https://bitbucket.org/brandcode/disign-project/src/main/README.md.

## Custom Theme

DiSign provides a basic theme, but for customizing the styles of your installation, you can use your own theme. We recommend using DiSign's theme as base them so you don't have to style everything from scratch.

A good starting point is to run the following command:

```bash
➜  drush generate theme

 Welcome to theme generator!
–––––––––––––––––––––––––––––

 Theme name:
 ➤ FOO Theme

 Theme machine name [foo_theme]:
 ➤

 Base theme [claro]:
 ➤ disign_theme

 Description [A flexible theme with a responsive, mobile-first layout.]:
 ➤ FOO DiSign theme

 Package [Custom]:
 ➤

 Would you like to create breakpoints? [No]:
 ➤

 Would you like to create theme settings form? [No]:
 ➤
```

This command will generate a new theme with the name `FOO Theme` and base theme `disign_theme`. It also provides a bunch of CSS and template files that you can customize or remove.

You then need to make a few changes to the `.info.yml` file:

### Disable the main styles
```yml
libraries-override:
  disign_theme/styles: false
```

### Copy the parent theme's regions
`drush generate theme` seems to ignore the regions from the parent theme, so we need to adjust them.

```yml
regions:
  header_first:           'Header first'
  header_second:          'Header second'
  header_third:           'Header third'
  primary_menu:           'Main menu'
  secondary_menu:         'Secondary menu'
  highlighted:            'Highlighted'
  help:                   'Help'
  content:                'Content'
  footer_featured_first:  'Footer featured first'
  footer_featured_second: 'Footer featured second'
  footer_featured_third:  'Footer featured third'
  footer_featured_fourth: 'Footer featured fourth'
  footer:                 'Footer'
```

### Provide the styles library
Edit the `.libraries.yml` and make sure it contains at least the following:
```yml
styles:
  css:
    theme:
      css/styles.css: {}
```

### Build your own CSS
Now you can build your customized CSS based on our SCSS styles.

Create a new file `styles.scss` in a location of your choice and add at least the following:
```scss
@import '../../web/profiles/contrib/disign/src/scss/styles';
```

(You might need to adjust the path to the parent styles)

Now you can adjust some of the SCSS variables to customize the theme.

Based on your desired build tool, generate the `style.css` file and put it in the `css` folder of your theme.

### Enable your theme
Finally, enable your theme using drush:

```bash
drush then foo_theme
drush config:set system.theme default foo_theme
drush cr
```

## Custom Icons
DiSign provides a set of icons to be used in info slides.
If you prefer to use your own icons, you can do so by providing them as an SVG file.

It must have the following structure:

```svg
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-whistle" viewBox="0 0 1024 1024" aria-label="Pfeife">
      <path d="M736.142 328.818l-154.738-48.924c-4.551-1.138-9.102-1.138-13.653 1.138s-6.827 5.689-9.102 10.24l-10.24 34.133-68.267-21.618 10.24-34.133c3.413-9.102-2.276-19.342-11.378-22.756 0 0 0 0 0 0l-273.067-85.333c-9.102-3.413-19.342 2.276-22.756 11.378 0 0 0 0 0 0l-31.858 102.4c-2.276 6.827 0 14.791 6.827 19.342l265.102 191.147c-31.858 124.018 44.373 250.311 168.391 282.169 19.342 4.551 39.822 6.827 60.302 6.827 18.204 1.138 36.409 0 53.476-4.551l2.276 5.689c-5.689 1.138-11.378 3.413-18.204 5.689-40.96 14.791-110.364 37.547-259.413 29.582l-23.893-1.138c-129.707-7.964-238.933-11.378-267.378 22.756-6.827 7.964-9.102 18.204-6.827 27.307 10.24 43.236 60.302 45.511 161.564 50.062 29.582 1.138 62.578 2.276 101.262 5.689 20.48 1.138 39.822 2.276 58.027 2.276 240.071 0 315.164-111.502 318.578-116.053l5.689-9.102 4.551-1.138c9.102-3.413 13.653-12.516 10.24-21.618l-11.378-34.133c43.236-29.582 75.093-72.818 91.022-122.88 35.271-114.916-23.893-238.933-135.396-284.444zM676.978 848.782c-50.062 26.169-138.809 54.613-281.031 45.511-38.684-2.276-71.68-4.551-101.262-5.689-95.573-4.551-134.258-6.827-139.947-31.858-1.138-2.276 0-5.689 2.276-7.964 13.653-15.929 63.716-20.48 120.604-20.48 45.511 0 93.298 2.276 128.569 4.551l23.893 1.138c152.462 7.964 224.142-14.791 266.24-29.582 6.827-2.276 13.653-4.551 18.204-5.689 3.413 6.827 12.516 10.24 20.48 7.964h1.138c-17.067 15.929-37.547 30.72-59.164 42.098zM785.067 587.093c-23.893 75.093-103.538 117.191-178.631 93.298s-117.191-103.538-93.298-178.631 103.538-117.191 178.631-93.298c0 0 0 0 0 0 75.093 22.756 117.191 102.4 93.298 178.631v0z" />
      <path d="M555.236 180.907c5.689 2.276 12.516-1.138 14.791-7.964l23.893-76.231c2.276-5.689-1.138-12.516-7.964-13.653-5.689-1.138-11.378 1.138-13.653 7.964l-23.893 76.231c-2.276 5.689 1.138 12.516 6.827 13.653z" />
      <path d="M609.849 211.627c2.276 0 3.413 0 5.689-1.138l71.68-37.547c5.689-2.276 7.964-9.102 5.689-14.791s-9.102-7.964-14.791-5.689c0 0 0 0 0 0l-71.68 37.547c-5.689 3.413-7.964 10.24-4.551 14.791 0 4.551 4.551 6.827 7.964 6.827z" />
      <path d="M485.831 172.942c2.276 5.689 9.102 7.964 14.791 5.689s7.964-9.102 5.689-14.791c0 0 0 0 0 0l-37.547-72.818c-3.413-5.689-10.24-7.964-14.791-4.551s-7.964 10.24-4.551 14.791l36.409 71.68z" />
      <path d="M739.556 560.924c-9.102 44.373-53.476 73.956-97.849 64.853-5.689-1.138-12.516 2.276-13.653 9.102-1.138 5.689 2.276 12.516 9.102 13.653 56.889 11.378 113.778-25.031 125.156-81.92 0 0 0 0 0 0 1.138-5.689-2.276-12.516-9.102-13.653-6.827-2.276-12.516 1.138-13.653 7.964z" />
    </symbol>
    <!-- more symbols here -->
  </defs>
</svg>
```

For each icon, add a `<symbol>` tag with the `id` attribute set to the icon's identifier and the `aria-label` attribute set to the icon name.

Place the SVG somewhere in your theme.
Then, go to /admin/config/content/svg_sprite and enter the path to your icon file. You can use `theme://foo_theme` to specify the path to your theme.
