Modifier et définir des styles de présentation de
Thamous : le dossier "styles"
Pour sélectionner le dossier
"styles" vous devez ouvrir
la fenêtre d'adminstration de Thamous et dans le premier
champ
déroulant (dans lequel apparaît par défaut le
dossier "export")
sélectionner "styles". Le champ de gauche situé
en-dessous contient
alors la liste des fichiers du dossier "styles" de Thamous, ce sont les
fichiers
définissant les
différents styles que vous pouvez choisir.
Les styles concernent des éléments comme la taille, la
fonte, la couleur des polices utilisées, la couleur du fond des
pages ou des cellules des tableaux, etc. Tous ces
éléments peuvent être modifiés à
votre guise.
Les fichiers de "styles" sont des fichier .css (Cascading Style Sheets)
qui servent à définir les feuilles de style pour html.
Les fichiers contiennent suffisamment d'exemples pour que vous puissiez
assez facilement deviner la syntaxe et les modifications possibles et
ainsi faire au moins les modifications les plus simples. De plus, ses
opérations sont sans risques puisque vous pouvez toujours
détruire vos fichiers ou affecter un des styles
prédéfinis, qui sont toujours préservés,
à vos projets. Vous pouvez attribuer à votre
fichier de style un nouveau
nom si vous voulez continuer d'utiliser le style
prédéfini. Dans tous les cas, vous devez conserver
l'extension ".css".
Pour bénéficier de toutes les
possibilités des feuilles de style il vous faudra
néanmoins connaître les bases du format css.
Les éléments sont à peu près
regroupés suivant les fenêtres dans lesquels ils
apparaissent. Il est ainsi possible de retrouver directement
l'élément à modifier en lisant la feuille de
styles. Vous pouvez le faire sinon en éditant le code source de
la fenêtre contenant l'élément que vous voulez
modifier et en réperant dans celui-ci son attribut ou sa classe
css. Dans Mozilla, cette possibilité est accessible à
partir d'un clique droit. Si votre fenêtre contient un frame,
vous pouvez éditer le code du frame qui vous intéresse.
Si vous voulez faire une recherche automatique vous devrez copier le
contenu du fichier dans un éditeur.
Changer la couleur de son nom dans le
menu général
Pour changer la couleur de son nom dans le coin supérieur gauche
du menu général il faut d'abord sélectionner le
style associé au projet dont on veut modifier le style. Disons
que l'on choisit le projet 'perso' et que le style associé est
'RosyBrown' (configuration initiale).
Il faut d'abord sélectionner le
dossier "styles" et sélectionner dans celui-ci le fichier
'RosyBrown.css'. Le contenu du fichier apparaît maintenant dans
le champ du centre.
Les éléments sont regroupés suivant la
fenêtre dans laquelle ils apparaissent. Celui qui nous
intéresse est dans le "Menu général" vers le
début du fichier. Son style est décrit par
l'élément :
td.nom {color:green;}
On peut aussi retrouver cela en éditant le code source de la
fenêtre contenant votre nom. Cela fait, il vous suffit maintenat
d'y chercher votre nom. Vous obtenez :
<td class="nom">[VOTRE NOM]</td>
On voit que la mise en forme de votre nom se fait au moyen du
sélecteur de classe td.nom qu'il suffit donc de rechercher dans
le fichier de styles que vous voulez modifier.
La couleur de votre nom dans le coin supérieur gauche du menu
général est bien verte (si vous utilisez bien
'RosyBrown')...
On veut mettre une couleur qui se détache plus ou moins bien (il
s'agit de votre nom...) sur la couleur du fond qui s'appelle...
RosyBrown.
La page http://www.w3schools.com/html/html_colornames.asp
permet de connaître le nom des couleurs et de les choisir en
fonction du fond sur lequel elles vont être
placées. En choisissant RosyBrown dans la liste qui
apparaît vous aurez du texte écrit en différentes
couleurs sur ce fond. Vous pouvez par exemple choisir DarkSlateBlue.
Vous remplacer alors dans le fichier la ligne précédente
par :
td.nom {color:DarkSlateBlue;}
Vous enregistrez ce nouveau style en cliquant sur le bouton
"Enregistrer Modifs." en changeant ou non le nom du fichier mais en lui
gardant comme extension ".css".
Le nouveau fichier apparaît maintenant dans le champ de droite
contenant vos fichiers personnalisés.
Si, après avoir réactualisé
(reload) avec le bouton de votre navigateur, vous choisissez
"perso" (ou n'importe quel projet qui a pour style celui qui vient
d'être modifié ou créé) dans le champ
déroulant contenant les noms des projets dans la fenêtre
du menu principal vous verrez votre nom apparaître en DarkSlateBlue.
Si vous voulez revenir à la version
précédente du style 'RosyBrown', il vous suffit de
sélectionner votre fichier "RosyBrown.css" (si vous ne lui avait
pas donné un autre nom), ce qui en affichera le contenu,
et ensuite de cliquer sur le bouton "Supprimer fichier". Votre fichier
"RosyBrown.css" sera supprimé et ce sera celui d'origine qui
sera à nouveau actif.
Changer la couleur du fond des
fenêtres
Vous pouvez changer la couleur de fond de vos fenêtres. Le plus
simple pour cela est de partir d'un style existant, par exemple
"RosyBrown" et de modifier dans celui-ci toutes les occurrences de
"WhiteSmoke" (nom de la couleur du fond de ce style) par le nom de la
couleur que vous voulez (voir http://www.w3schools.com/html/html_colornames.asp).
Vous pouvez copier le contenu du fichier dans un éditeur pour
faire cette opération rapidement, importer le résultat
dans le champ central et ensuite l'enregistrer ("Enregistrer Modifs.")
en lui donnant un nouveau nom, en conservant l'extension ".css".
Vous pouvez attribuer un fond différent aux fenêtres d'un
même projet en remplaçant les occurrences de "WhiteSmoke "
par des noms de couleurs différents.
Changer la couleur du fond des champs
de mots-clefs et de remarques
Vous pouvez changer la couleur du fond des champs contenant les
mots-clefs et les remarques, par exemple de manière à ce
que ce fond se confonde avec celui de la fenêtre.
Modifions le style "RosyBrown" de manière à ce qu'il en
soit ainsi. Pour cela on sélectionne le dossier "styles" et dans
celui-ci le fichier "RosyBrown.css".
Vous parcourez son contenu jusqu'à la partie :
/*---------REF PROJET-------*/
et dans celle ci, nous allons modifier :
textarea[name="mots_clefs"]{}
textarea[name="remarques"]{
text-align:justify;}
On peut retrouver que ce sont bien ces éléments qu'il
faut modifier en éditant le code source de la fenêtre dans
laquelle les champs que l'on veut modifier apparaissent. Comme
cette fenêtre contient un frame, vous devez cliquer dans la
partie de la fenêtre qui contient l'élément et
éditer le code du frame (autrement vous aurez le code de la
fenêtre qui ne nous intéresse pas...). Vous avez
intéret à chosir une référence dont le
champ n'est pas vide ; le contenu du champ vous aidera à
trouver le champ dans le code. En l'occurrence, on trouve pour le champ
des mots-clefs :
<textarea name="mots_clefs" rows="7" cols="25"
onmouseover="return overlib('Mots-clefs du projet."Privé" ou "Public" : ces mots-clefs ne sont modifiables et visibles que par les membres du projet.');"
onmouseout="return nd();">
[CONTENU DU CHAMP]
</textarea>
et pour celui des remarques :
<textarea name="remarques" rows="7" cols="25"
onmouseover="return overlib('Remarques du projet. "Privé" : ces remarques ne sont modifiables et visibles que par les membres du projet. "Public" : ces remarques ne sont modifiables que par les membres du projet mais visibles par tous, le projet dont elles relèvent étant indiqué.');"
onmouseout="return nd();">
[CONTENU DU CHAMP]
</textarea>
Cela nous permet de savoir que dans le fichier de styles le style de
ces champs sera décrit par les éléments
textarea[name="mots_clefs"] et textarea[name="remarques"].
Il suffit maintenant de remplacer dans le fichier de styles les
lignes correspondantes par :
textarea[name="mots_clefs"]{
background-color:WhiteSmoke ;}
textarea[name="remarques"]{
text-align:justify;
background-color:WhiteSmoke ;}
Vous enregistrez vos modifications en changeant ou non le nom du
fichier (mais en gardant ".css" comme extension). Si vous avez
changé le nom vous devez ensuite associer
ce style à un projet ou l'essayer temporairement pour voir
le résultat (la différence est subtile...).
Changer le marqueur des
références en rayon
Les références
que vous avez en rayon ou qui sont accessibles sur internet
apparaissent précédées d'un astérisque (*).
Vous pouvez le remplacer par le marqueur que voulez, par exemple : (r). Et vous pouvez vouloir que
celui-ci apparaisse après
le contenu du champ plutôt que devant celui-ci.
Modifions le style "RosyBrown" de manière à ce qu'il en
soit ainsi. Pour cela on sélectionne le dossier "styles" et dans
celui-ci le fichier "RosyBrown.css".
Vous parcourez son contenu jusqu'à la partie :
/*---------LISTE REFS-------------*/
et vers la fin de celle-ci vous trouvez :
td[en_rayon='1']>a:before{
content:'*'';}
Il vous suffit de remplacer ces deux lignes par :
td[en_rayon='1']>a:after{
content: ' (r)';
color : red;}
Vous enregistrez vos modifications en changeant ou non le nom du
fichier (mais en gardant ".css" comme extension). Si vous avez
changé le nom vous devez ensuite associer
ce style à un projet ou l'essayer temporairement
pour voir
le résultat en affichant une liste de résultats contenant
une référence
accessible sur internet ou que vous avez indiquée comme
étant "En
rayon".
Si vous vouliez que le premier champ des références en
rayon ou qui sont accessibles sur internet apparaissent en FireBrick, vous pourriez
remplacer les lignes précédentes par :
td[en_rayon='1']>a {
color : FireBrick;}
Et si vous vouliez que le trois champ des références en
rayon ou qui
sont accessibles sur internet apparaissent en rouge, vous pourriez
remplacer les lignes précédentes par :
td[en_rayon='1'] {
color : FireBrick;}
td[en_rayon='1']+td {
color : FireBrick;}
td[en_rayon='1']+td+td {
color : FireBrick;}
Changer le format des
références dont la biblio a été saisie
Les références dont
la bibliographie a été saisie apparaissent en italique. Vous modifier ce format
et faire plutôt apparaître ces références précédées
d'un (b) (Tomato).
Modifions le style "RosyBrown" de manière à ce qu'il en
soit ainsi. Pour cela on sélectionne le dossier "styles" et dans
celui-ci le fichier "RosyBrown.css".
Vous parcourez son contenu jusqu'à la partie :
/*---------LISTE REFS-------------*/
et à la fin de celle-ci vous trouvez :
td[biblio_saisie='1']{
font-style:italic;}
td[biblio_saisie='1']+td{
font-style:italic;}
td[biblio_saisie='1']+td+td{
font-style:italic;}
Il vous suffit de remplacer ces lignes par :
td[biblio_saisie='1']>a:after{
content: ' (b)';
color : tomato;}
Attention : si vous utilisez déjà "before" pour marquer
les références en rayon vous ne pouvez pas l'utiliser
pour les références dont la bibliographie a
été saisie.
Vous enregistrez vos modifications en changeant ou non le nom du
fichier (mais en gardant ".css" comme extension). Si vous avez
changé le nom vous devez ensuite associer
ce style à un projet ou l'essayer temporairement
pour voir
le résultat en affichant une liste de résultats contenant
une référence dont la bibliographie a été
saisie ou simplement en affichant la liste des références
dont la bibliographie a été saisie.