Thèmes WebSvn

De EjnTricks
Révision de 6 février 2018 à 13:40 par Etienne (discussion | contributions)

(diff) ← Version précédente | Voir la version courante (diff) | Version suivante → (diff)

L'installation de WebSvn présente par défaut trois thèmes:

  • BlueGrey
  • Calm
  • Elegant

Il est possible de les modifier ou d'en ajouter de nouveaux.

Hand-icon.png Votre avis

Current user rating: 92/100 (1 votes)

 You need to enable JavaScript to vote


Ajout d'image de fond

Comme cela a pu être réalisé sur Jenkins, ce paragraphe présent comment rajouter une image de fond, disponible depuis un site mis en place et exposé sous le même serveur Apache, pour les différents thèmes par défaut.

La première étape consiste à créer une nouvelle arborescence sur le serveur, qui va contenir la nouvelle CSS, et les ressources associées. Tous ces fichiers vont être déposés dans la nouvelle arborescence /usr/share/sitesExtensions/site.

#sudo mkdir /usr/share/sitesExtensions
#sudo mkdir /usr/share/sitesExtensions/site
#sudo mkdir /usr/share/sitesExtensions/site/images
#sudo chown -R www-data:www-data /usr/share/sitesExtensions

Comme souvent, le propriétaire de l'arborescence est modifié pour éviter que cela soit le compte root.

L'image amexioMan.png est déposée dans le répertoire /usr/share/sitesExtensions/site/images.

BlueGrey

L'objectif est de rajouter l'image amexioManSmall.png dans le bandeau supérieur. En effet l'organisation des pages, sous ce thème, occupe l'ensemble de la fenêtre en largeur mais pas en hauteur. L'ajout de l'image sur le fond de la zone principale diminuerait le confort de lecture. L'analyse de la page permet d'identifier cette zone et de constater que c'est une balise div ayant pour identifiant container. En éditant la définition css du thème, fichier /var/opt/websvn/websvn/templates/BlueGrey/styles.css, il faut modifier la définition existante pour cet id.

#header {
        padding: 5px 0;
        border-bottom: 1px solid #555;
}

Il faut ajouter les paramètres:

  • background-image: Spécifier l'URL de l'image.
  • background-position: Positionner cette image.
  • background-repeat: Permet de ne pas répéter l'image.

La modification se présente ainsi:

#header {
        background-image: url('/sitesExtensions/images/amexioManSmall.png') !important;
        background-position: left;
        background-repeat: no-repeat;
        padding: 5px 0;
        border-bottom: 1px solid #555;
}

Une image est ainsi injectée sur les pages.


Calm

L'objectif est de rajouter l'image amexioMan.png sur la partie gauche du thème. L'analyse de la page permet d'identifier cette zone et de constater que c'est une balise div ayant pour identifiant container. En éditant la définition css du thème, fichier /var/opt/websvn/websvn/templates/calm/styles.css, il faut modifier la définition existante pour cet id.

#container {
position: relative;
min-height: 100%;
padding-bottom:40px;
}

Il faut ajouter les paramètres:

  • background-image: Spécifier l'URL de l'image.
  • background-position: Positionner cette image.
  • background-repeat: Permet de ne pas répéter l'image.

La modification se présente ainsi:

#container {
background-image: url('/sitesExtensions/images/amexioMan.png') !important;
background-position: left bottom;
background-repeat: no-repeat;
position: relative;
min-height: 100%;
padding-bottom:40px;
}

Une image est ainsi injectée sur les pages.


Elegant

L'objectif est identique que pour le thème Calm. L'analyse de la page permet d'identifier cette zone et de constater que c'est une balise div ayant pour identifiant wrapper. En éditant la définition css du thème, fichier /var/opt/websvn/websvn/templates/Elegant/styles.css, il faut modifier la définition existante pour cet id.

#wrapper {
        margin: 0;
}

Il faut ajouter les paramètres:

  • background-image: Spécifier l'URL de l'image.
  • background-position: Positionner cette image.
  • background-repeat: Permet de ne pas répéter l'image.

La modification se présente ainsi:

#wrapper {
        background-image: url('/sitesExtensions/images/amexioMan.png') !important;
        background-position: left bottom;
        background-repeat: no-repeat;
        margin: 0;
}

Une image est ainsi injectée sur les pages.