Installer et configurer CMS Made Simple 1.x

Cette page décrit l’installation et la configuration de CMS Made Simple 1.x sur un serveur LAMP. CMSMS est un CMS libre sous licence GPL, créé en 2004 pour offrir une alternative simple à d’autres CMS parfois beaucoup plus complexes. Les pages XHTML générées par CMSMS sont conformes aux normes du W3C. La version 1.x n’est plus officiellement supportée, mais rien n’empêche de l’installer et de la mettre à jour vers une version 2.x, ce qui permet d’utiliser les anciens gabarits.

Prérequis

Outre un serveur LAMP classique, CMSMS nécessite la présence de deux modules PHP supplémentaires :

# yum install php-gd php-xml

La configuration de PHP devra être ajustée dans /etc/php.ini pour répondre à certaines exigences de l’application :

...
; Maximum execution time of each script, in seconds
; http://php.net/max-execution-time
; Note: This directive is hardcoded to 0 for the CLI SAPI
max_execution_time = 60
...
; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST 
; data reading is disabled through enable_post_data_reading.
; http://php.net/post-max-size
post_max_size = 10M
...
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize = 10M
...

Téléchargement

Créer un emplacement pour ranger les archives compressées, par exemple :

# cd
# mkdir -p webapps/cmsmadesimple
# cd webapps/cmsmadesimple

Aller sur le site principal de CMSMS. Sur un serveur dépourvu d’interface graphique, on pourra se servir du navigateur Links :

Télécharger la version « full » dans les archives :

  • cmsmadesimple-1.11.13-full.tar.gz

Mise en place d’un hôte virtuel

Sur la station de travail locale, il faudra d’abord trouver un endroit approprié pour installer CMSMS :

# cd /var/www/vhosts
# mkdir -pv cmsmadesimple/htdocs
mkdir: création du répertoire « cmsmadesimple »
mkdir: création du répertoire « cmsmadesimple/htdocs »

Définir un hôte virtuel dans la configuration d’Apache.

Créer la base de données

Créer la base de données pour le CMS :

# mysql -u root -p
mysql> create database cmsmadesimple;
Query OK, 1 row affected (0.00 sec)
mysql> grant all on cmsmadesimple.* to cmsmsuser@localhost
    -> identified by '********';
Query OK, 0 rows affected (0.00 sec)
mysql> exit
Bye

Installation

Décompresser la ou les archives téléchargées à l’endroit approprié :

# cd /var/www/vhosts/cmsmadesimple/htdocs/
# tar xvzf /chemin/vers/cmsmadesimple-1.11.13-full.tar.gz

Régler les permissions :

# cd /var/www/vhosts
# chown -R apache:apache cmsmadesimple/
# find cmsmadesimple -type d -exec chmod 0750 \{} \;
# find cmsmadesimple -type f -exec chmod 0640 \{} \;

Lancer l’installation avec Firefox, en l’ouvrant à l’adresse configurée. On ne va pas rentrer dans le détail du paramétrage :

  • Langue de l’installation : fr_FR.
  • Passer le test de contrôle (checksum).
  • Valider les permissions et la configuration PHP.
  • Valider le test de masque de création de fichier.
  • Renseigner les informations sur le compte administrateur.
  • Renseigner le nom du site, le fuseau horaire et les informations sur la base de données.
  • Créer les tables et installer les exemples de contenus et les gabarits.
  • Définir fr_FR comme langue par défaut pour l’interface publique.

Afficher le site. Voilà à quoi cela ressemble dans la configuration par défaut :

Une fois que l’installation est terminée, on peut protéger le fichier config.php et supprimer le répertoire install :

# chmod 0440 config.php
# rm -rf install/

Ouvrir l’interface d’administration du site :

  • https://<adresse_du_site>/admin/

Afficher la liste de toutes les pages préinstallées : Contenu > Pages.

Sélectionner toutes les pages sauf la page d’accueil (Home), puis : Objets sélectionnés > Supprimer.

Sauvegarder les gabarits et les feuilles de style

Avant de personnaliser l’aspect du CMS, on va sauvegarder la mise en page par défaut.

  • Disposition > Gabarits > NCleanBlue : cliquer dessus pour afficher le gabarit. Copier l’intégralité de son contenu vers le presse-papier. Créer un nouveau gabarit NCleanBlueOrig vers lequel on collera le contenu du presse-papier.
  • Procéder de même pour le gabarit des News : Contenu > Articles > Gabarit du sommaire article. Sauvegarder le gabarit par défaut Sample vers une copie SampleOrig.
  • De même pour les feuilles de style NCleanBlue et ncleanblueutils : Disposition > Feuilles de style > Layout: NCleanBlue et Layout: ncleanblueutils.

Rendre le site plus lisible

La police de caractères définie par défaut n’est pas très grande. Pour l’agrandir un peu, éditer la feuille de style : Disposition > Feuilles de style > Layout: NCleanBlue. Repérer la définition de la police de caractères :

body {
  /* default text for entire site */
  font: normal 0.8em Tahoma, Verdana, Arial, Helvetica, sans-serif;
  ...
}

Remplacer par ceci, par exemple :

body {
  /* default text for entire site */
  font: normal 1.0em Arial, Helvetica, sans-serif;
  ...
}

En augmentant la taille de la police, on décale également les boutons de navigation du menu principal vers le bas. On peut les relever à la bonne hauteur en jouant sur le paramètre height de la classe logo et en le réduisant de 75 à 69 pixels :

logo a {
  /* adjust according your image size */
  height: 69px;
  width: 215px;
}

Pour augmenter l’espacement entre les lignes, ajouter le paramètre line-height dans le corps de la feuille de style :

body {
  /* default text for entire site */
  font: normal 1.0em Arial, Helvetica, sans-serif;
  color: #3A3A36;
  line-height: 1.3em;
  ...
}

Il faudra également définir l’espacement et le style des listes à puces :

/* espacement et style des listes à puces */
div#main ul li,
div#main ol li,
#footer ul li,
#footer ol li {
  list-style: square;
  line-height: 1.3em;
  padding: 2px 2px 2px 5px;
  margin-left: 20px;
}

On pourra rajouter ce bloc en-dessous des définitions de listes à puces div#main ul, div#main ol, etc. Même si certaines définitions semblent en contradiction, c’est toujours la dernière qui l’emporte.

Menus détails typographiques

Pour restituer les apostrophes, il faut éditer la feuille de style ncleanblueutils et supprimer toutes les définitions de style pour la balise <q> :

blockquote, q {
  quotes: none;
}
  blockquote:before,
  blockquote:after,
  q:before, q:after {
  content: '';
  content: none;
}

Quant au soulignement en pointillés pour les abréviations, on peut les restituer en supprimant l’élément <abbr> de la liste au début de la même feuille de style :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

Supprimer les éléments inutiles

Pour se débarrasser de certains éléments superflus, il faut éditer le gabarit NCleanBlue.

Supprimer le fil d’Ariane :

{* Start Breadcrumbs *}
 ...
{* End Breadcrumbs *}

Supprimer l’étoile orange avec le numéro de version du CMS :

{* Start Optional tag *} 
  ... 
{* End Optional tag *}

Garder la barre de navigation inférieure vide en supprimant les liens vers le haut de page et les autres pages. On ajoutera un espace insécable pour aérer l’espace entre la barre de navigation inférieure et le pied de page :

{* Start main bottom and relational links *}
            <div class="main-bottom">
{* End relational links *}
              <hr class="accessibility" />
            </div>
{* End main bottom *}
<p>&nbsp;</p>

Supprimer le plan du site en pied de page. Il faudra remplacer le contenu des menus par un paragraphe vide (espace insécable), sous peine de décaler le pied de page :

{* first foot menu *}
          <div class="block core-float-left">
          <p>&nbsp;</p>
          </div>
          
{* second foot menu if active page has children *}
          <div class="block core-float-left">
          <p>&nbsp;</p>
          </div>

Si l’on souhaite supprimer tout le pied de page, il suffit d’enlever cette section :

{* Start Footer *}
  ...
{* End Footer *}

Personnaliser l’image de fond

Aller dans le gestionnaire d’images (Contenu > Gestionnaire d’images) et créer un répertoire Habillage. Confectionner une image de 110 pixels de haut et d’au moins 3000 pixels de large, et la charger dans ce répertoire.

Dans la feuille de style, indiquer le chemin vers l’image (par exemple uploads/images/Habillage/fond.jpg) ainsi que la couleur du fond (#E8E8E8), comme ceci :

body {
 font: normal 1.0em Arial, Helvetica, sans-serif;
 color: #3A3A36;
 line-height: 1.3em;
 background: #e8e8e8 url([[root_url]]/chemin/fond.jpg repeat-x;
}
#ncleanblue {
 width: auto;
 background: #e8e8e8 url([[root_url]]/chemin/fond.jpg repeat-x;
}

Si l’on utilise un fond uni, il faut éventuellement ajuster la barre de navigation en diminuant la hauteur de la classe logo d’un pixel, de 69 à 68 pixels.

Dès le moment qu’on remplace le fond bleu original par une autre image, il faut également remplacer search.png et tabs.gif dans le répertoire uploads/NCleanBlue par une version modifiée qui respecte la transparence des bords. Éventuellement, on peut télécharger les deux graphismes modifiés en conséquence ici :

Effectuer des copies de sauvegarde search.png.orig et tabs.gif.orig des fichiers originaux. Une fois qu’on a remplacé ces fichiers par les versions modifiées, c’est une bonne idée de faire deux copies search.png.bak et tabs.gif.bak de ces deux fichiers, étant donné qu’ils seront écrasés lors d’une mise à jour de l’application.

Personnaliser le logo

La configuration par défaut contient un fichier logo.png d’une taille de 215×75 pixels, dans le répertoire uploads/NCleanBlue. Confectionner un logo personnalisé et le charger dans le répertoire Habillage du gestionnaire d’images. On peut très bien fabriquer un logo dont la largeur dépasse 215 pixels. Il faudra juste penser à effectuer les ajustements nécessaires dans la feuille de style NCleanBlue :

#logo a {
 height: 69px;
 width: 430px;
 display: block;
 text-indent: -9999em;
 margin-top: 0;
 margin-left: 0;
 background: url([[root_url]]/uploads/chemin/logo.png) \
   no-repeat left top;
}

Voici un exemple de fichier logo :

On peut également insérer un logo dans la colonne des News. Appeler ce logo logo-lateral.png, par exemple. Éditer le gabarit NCleanBlue et repérer l’affichage du logo par défaut dans la section News. Indiquer le chemin vers le nouveau logo.

Franciser l’interface de recherche

Ouvrir le gabarit de recherche : Extensions > Recherche > Gabarit de recherche.

Repérer la directive suivante :

value="{$searchtext}"

Remplacer par du texte codé « en dur » :

value="Rechercher..."

Simplifier la colonne des News

L’affichage des News est géré par le gabarit du sommaire article: Contenu > Articles > Gabarit du sommaire article. Éditer le gabarit Sample.

Supprimer la liste cliquable des catégories :

{* This section shows a clickable list of your News categories. *}
<ul class="list1">
...
</ul>
...
{* if you don't want category browsing on your summary page, 
remove this line and everything above it *}

Supprimer la date :

{if $entry->postdate}
  <div class="NewsSummaryPostdate">
    {$entry->postdate|cms_date_format}
  </div>
{/if}

Le titre de chaque News est un lien cliquable :

<div class="NewsSummaryLink">
 <a href="{$entry->moreurl}" 
    title="{$entry->title|cms_escape:htmlall}">
    {$entry->title|cms_escape}
 </a>
</div>

Supprimer le lien tout en gardant le titre, qu’on affichera en gras :

<div class="NewsSummaryLink">
  <strong>{$entry->title|cms_escape}</strong>
</div>

Supprimer l’affichage de la catégorie de l’article :

<div class="NewsSummaryCategory">
 {$category_label} {$entry->category}
</div>

De même pour l’auteur de l’article :

{if $entry->author}
 <div class="NewsSummaryAuthor">
 {$author_label} {$entry->author}
 </div>
{/if}

L’interface d’édition des articles propose deux champs :

  • Sommaire
  • Contenu

Pour un affichage correct des News, il faut laisser vide le champ Sommaire et éditer uniquement le champ Contenu.

Afficher le menu sur tous les navigateurs

Sur certains navigateurs – comme Safari pour iPhone – le menu de navigation ne s’affiche pas correctement. Plus exactement, il ne se déplie pas lorsqu’une ou plusieurs pages appartiennent à une catégorie parent vide.

L’apparence du menu est gérée par le fichier cssmenu_ulshadow.tpl que l’on trouve dans modules/MenuManager/templates/. Ouvrir ce fichier vers la ligne 35 :

<li><a ><span class="sectionheader">{$node->menutext}...
{elseif $node->type == 'sectionheader'}
<li><a ><span class="sectionheader">{$node->menutext}...
{elseif $node->type == 'separator'}

On va éditer le lien vide contenu dans ce code :

<li><a href="#"><span class="sectionheader">{$node->menutext}...
{elseif $node->type == 'sectionheader'}
<li><a href="#"><span class="sectionheader">{$node->menutext}...
{elseif $node->type == 'separator'}

Enregistrer les modifications et recharger le site. Désormais, lorsqu’on survole le menu du site et que l’on passe sur une catégorie parent vide, le lien doit pointer vers https://<adresse_du_site>/#.

Transférer un site d’une machine à l’autre

Une fois qu’on a confectionné un site sur une station de travail locale, on souhaite probablement le transférer sur un serveur dédié. Voici comment il faut procéder.

Sauvegarder la base de données :

# mysqldump -u root -p cmsmadesimple > cmsmadesimple.sql

Copier le contenu du site vers le serveur, par exemple :

# scp -r /var/www/vhosts/cmsmadesimple <serveur>:/var/www/vhosts/

Copier la sauvegarde de la base de données sur le serveur, par exemple :

# scp cmsmadesimple.sql <serveur>:/root/

Se connecter au serveur :

# ssh <serveur>

Se connecter au moniteur MySQL/MariaDB et créer une base de données :

# mysql -u root -p
Enter password: 
Welcome to the MariaDB monitor. 
MariaDB [(none)]> create database cmsmadesimple;
Query OK, 1 row affected (0.00 sec)
MariaDB [(none)]> exit;
Bye

Importer la sauvegarde dans cette nouvelle base :

# mysql -u root -p cmsmadesimple < cmsmadesimple.sql

Créer un hôte virtuel et régler les permissions des fichiers. Dans l’état actuel des choses, le site n’affiche rien du tout. Il faut se connecter directement à l’interface d’administration :

  • https://<adresse_du_site>/admin

Aller dans Administration du site > Maintenance du système > Cache et contenu et vider le cache. À partir de là, le site s’affiche correctement.

Mise à jour vers CMS Made Simple 1.12.1

Dans l’exemple qui suit, nous allons mettre à jour une version existante 1.11.11 vers 1.12.1, la dernière version 1.x supportée.

Dans un premier temps, faire une sauvegarde de la base MySQL et du site.

# cd /var/www/vhosts/
# cp -R cmsmadesimple/ cmsmadesimple.bak

Extraire l’archive compressée de la version 1.12.1 à la racine du site :

# cd cmsmadesimple/htdocs/
# tar xvzf /chemin/vers/cmsmadesimple-1.12.2-full.tar.gz

Corriger les permissions :

# chown -R apache:apache *
# chmod 0640 config.php

Ouvrir le site à l’adresse https://<adresse_du_site>/install/upgrade.php et suivre les instructions comme pour l’installation.

Mise à jour de CMS Made Simple 1.12.1 vers CMSMS 2.x

Extraire le fichier d’installation à la racine du site :

# cd /var/www/vhosts/cmsmadesimple/htdocs
# unzip /chemin/vers/cmsms-2.1.5-install.zip
Archive: /root/webapps/cmsms/cmsms-2.1.5-install.zip
inflating: cmsms-2.1.5-install.php
inflating: README-PHAR.TXT

Régler les permissions de ces deux fichiers :

# chown apache:apache cmsms-2.1.5-install.php README-PHAR.TXT

Ouvrir le site à l’adresse https://<adresse_du_site>/cmsms-2.1.5-install.php et suivre les instructions de l’assistant de mise à jour. Ce n’est pas la peine d’activer le mode avancé. Il peut arriver que l’assistant de mise à jour bloque sur une étape. Dans ce cas, il suffit généralement de le relancer depuis le début.

Une fois que la mise à jour s’est déroulée correctement, il faut faire un peu de ménage :

# rm cmsms-2.1.5-install.php
# rm -rf install/
# chmod 0440 config.php

Éventuellement, on peut définir des permissions plus strictes :

# cd /var/www/vhosts/
# find cmsmadesimple -type d -exec chmod 0750 \{} \;
# find cmsmadesimple -type f -exec chmod 0640 \{} \;
# chmod 0440 cmsmadesimple/htdocs/config.php

On remarquera que la mise à jour a écrasé nos images personnalisées dans le répertoire uploads/NCleanBlue/. Il va falloir remplacer logo.png, tabs.gif et search.png par les versions sauvegardées. De même, le gabarit de menu cssmenu_ulshadow.tpl que nous avons modifié plus haut devra être restauré.

Ce contenu a été publié dans Documentation Microlinux, avec comme mot(s)-clé(s) . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *