Thèmes WebSvn
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.
Votre avis
Current user rating: 92/100 (1 votes)
|
|
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.