Créér un thème d'installation pour un effet waouuuh !

Par Le Barman - Lundi 11 mars 2019
Tags
Profile
Installation
Theme
Illustration d'un profil d'install custom

Avant de lire cet article il convient de savoir un minimum ce qu'est un profil Drupal. Si vous ne savez pas nous vous conseillons cet article en français qui résume très bien la chose. Si vous avez la flemme, voyez simplement ça comme la création d'une distribution prête à l'emploi.

Les profils d'installation peuvent donc grandement vous faciliter la vie lorsque vous travaillez sur des usines à sites. Si bien souvent l'installation d'un site est effectuée par vos soins, il se peut aussi que cette dernière soit à la charge de votre client. Dans quel cas, il peut être de bon goût de proposer un rendu différent de celui par défaut.

Page d'installation par défaut d'une distribution Drupal
Le thème d'installation de base (thème Seven)

C'est sympa mais terriblement banal, alors comment faire pour obtenir une page d'install personnalisée ? Jetons un œil au fichier info.yml de votre profil. Dans notre cas nous créons un profil d'install dédié aux clubs libertins. Hmmmm....

distribution:
  name: Coqu'In
  install:
    theme: hack_seven

L'attribut distribution permet à l'installeur Drupal de cibler directement votre profil et le sous attribut theme permet de choisir le thème à charger lors de cette installation et uniquement lors de cette installation. Il ne sera pas installé à l'issu de cette dernière. De ce constat se dégagent 2 écoles.

Le thème complet maîtrisé de A à Z

Ça c'est la solution des premiers de cordées ou plutôt des premiers de la classe. Vous avez une telle maîtrise du theming que vous avez très naturellement pensé à mettre en forme les composants d'installation du profil en proposant un template dédié sur le hook install_page accompagnés des css dédiées qui vont avec. Si c'est le cas bien ouèj et merci d'avoir lu l'article jusqu’ici.

Le hack de Boloss

L'idée c'est simplement d'étendre juste les parties qui nous intéressent du thème de base Seven. Il faut donc créer un sous thème de Seven. Ça va prendre 10 secondes à ceux qui utilisent drupal console et 2 minutes à ceux qui le font à l'ancienne. Voici l'arbo:

  • css
    • theme
      • install-page.css
  • images
    • logo.svg
    • splash-screen.jpg
  • templates
    • install-page.html.twig
  • screenshot.png
  • hack_seven.info.yml
  • hack_seven.libraries.yml

Voici les principaux fichiers en détails:

#Fichier hack_seven.info.yml

name: Hack Seven
type: theme
description: 'Only extends the install templates and CSS.'
package: Other
core: 8.x
libraries-extend:
  seven/install-page: 
    - hack_seven/install-page
 
base theme: seven

On déclare ici que le thème étend seven et on étend la librairie chargée sur les pages d'installation. Attention, on ne la surcharge pas, on l'étend.

#Fichier hack_seven.libraries.yml

install-page:
  version: VERSION
  css:
    theme:
      '//fonts.googleapis.com/css?family=Roboto+Slab:300,400': { type: external, minified: true}
      css/theme/install-page.css: {}

On ajoute nos éléments (css, js) qui étendrons la librairie chargée sur les pages d'installation. Dans notre cas nous ajoutons une font Google (Roboto Slab) ainsi que la css install-page.css.

{# Fichier  templates/install-page.html.twig #}

{#
/**
 * @file
 * Seven theme implementation to display a Drupal installation page.
 *
 * All available variables are mirrored in page.html.twig.
 * Some may be blank but they are provided for consistency.
 *
 * @see template_preprocess_install_page()
 */
#}
<div class="layout-container">

  <header role="banner">
    {% if site_name %}
      {# On rajoute notre petit Logo #}
      <img class="install-logo" src="/themes/custom/hack_seven/images/logo.svg">
      <h1 class="page-title">
        {{ site_name }}
        {% if site_version %}
          <span class="site-version">{{ site_version }}</span>
        {% endif %}
      </h1>
    {% endif %}
  </header>

  {% if page.sidebar_first %}
    <aside class="layout-sidebar-first" role="complementary">
      {{ page.sidebar_first }}
    </aside>{# /.layout-sidebar-first #}
  {% endif %}

  <main role="main">
    {% if title %}
      <h2 class="heading-a">{{ title }}</h2>
    {% endif %}
    {{ page.highlighted }}
    {{ page.content }}
  </main>

  {% if page.sidebar_second %}
    <aside class="layout-sidebar-second" role="complementary">
      {{ page.sidebar_second }}
    </aside>{# /.layout-sidebar-second #}
  {% endif %}

  {% if page.page_bottom %}
    <footer role="contentinfo">
      {{ page.page_bottom }}
    </footer>
  {% endif %}

</div>{# /.layout-container #}

On étend ici le template initialement fourni par Seven (accessible dans core/themes/seven/templates/install-page.html.twig). Dans notre cas on ajoute simplement une balise image avant le titre (notre logo).

/*Fichier css/theme/install-page.css*/

.install-page{
  background-image: url('../../images/splash-screen-2.jpg');
  background-position: bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #444;
  color: #a70877;
}
.install-page .layout-container{
  -webkit-box-shadow: 0px 0px 85px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 85px 5px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 85px 5px rgba(0,0,0,0.75);
}
.install-page .install-logo{
  margin-left: 3.5em;
  height: 65px;
}
.install-page .page-title{
  font-weight: lighter;
  font-size: 3.5em;
  margin-left: 0.2em;
  color: #a70877;
}
.install-page .page-title .site-version{
  font-weight: bolder;
  font-size: 0.4em;
}
.install-page .heading-a{
  font-weight: lighter;
}

.install-page .task-list li{
  color: #a70877;
}
.install-page .task-list .done{
  color: #adadad;
}
.install-page .progress__label{
  color: #555;;
}
.install-page .progress__bar{
  background-image: none;
  background-color: #ff9ae0;
  box-shadow: none;
  border-color: #adadad;
}
.install-page .progress__track{
  box-shadow: none;
  border-color: #adadad;
  background-image: none;
}
.button--primary{
  background-image: none;
  background-color: #ff9ae0;
  border:none;
}
.button--primary:hover{
  background-color: #d777b9;
  background-image: none;
}

Pour terminer on applique nos css afin d'obtenir le rendu que l'on souhaite !

Voici ce que ça donne au final.

Hmmm....

Voila! Bon c'est un rendu bidon fait simplement pour l'exemple mais vous avez l'essentiel !

Allez à la votre!

Le Barman

Ajouter un commentaire

L'e-mail est obligatoire mais restera privé.