olivier/site_depotoire
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[AJ] Plusieurs feuilles de styles dans l'entête. Ce qui permet de

Browse Source 
choisir une feuille de style pour la couleur.
This commit is contained in:
Olivier DOSSMANN 2012-02-19 00:11:06 +01:00
parent 1e383bb855
commit d36a2c303d
11 changed files with 149 additions and 424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
GNUmakefile
View File

@ -113,6 +113,12 @@ $(DESTINATION)/$(CSS_NOM): $(dependances_css)
$(if $(MENU), @$(PROG_CP) style/$(CSS_AVEC_MENU) $(DESTINATION)/$(CSS_NOM), @$(PROG_CP) style/$(CSS_SANS_MENU) $(DESTINATION)/$(CSS_NOM))
@$(PROG_ECHO) -e " …terminée."
# création du fichier CSS de couleur
$(DESTINATION)/$(CSS_COULEUR): style/$(CSS_COULEUR)
@$(PROG_ECHO) -e "Création du fichier CSS pour les couleurs…"
@$(PROG_CP) style/$(CSS_COULEUR) $(DESTINATION)/$(CSS_COULEUR)
@$(PROG_ECHO) -e " …terminée."
# création du fichier $(contenu)
$(contenu): $(script_contenu) $(SOURCE) $(image_defaut)
@$(PROG_SED) -i "s/DEBUG=1/DEBUG=0/g" $(script_contenu)
@ -132,7 +138,7 @@ $(contenu): $(script_contenu) $(SOURCE) $(image_defaut)
# création de la page d'index
index: $(INDEX)
$(INDEX): $(DOSSIER_HTML) $(DESTINATION)/$(CSS_NOM) $(dependances_index) $(contenu)
$(INDEX): $(DOSSIER_HTML) $(DESTINATION)/$(CSS_NOM) $(dependances_index) $(contenu) $(DESTINATION)/$(CSS_COULEUR)
@$(PROG_ECHO) -e "Création de la page de garde…"
# entete
@$(PROG_ECHO) -e "\t…insertion de l'entête"
@ -143,6 +149,7 @@ $(INDEX): $(DOSSIER_HTML) $(DESTINATION)/$(CSS_NOM) $(dependances_index) $(conte
-e "s/@@TITRE_PORTEAIL@@/$(TITRE)/g" \
-e "s/@@ACCUEIL_PORTEAIL@@/$(ACCUEIL)/g" \
-e "s#@@CSS_DEFAUT@@#./$(CSS_NOM)#g" \
-e "s#@@CSS_COULEUR@@#./$(CSS_COULEUR)#g" \
-e "s/^\(.*\)@@.*@@\(.*\)$$/\1\2/g" \
$(INDEX)
@$(PROG_ECHO) -e "\t …contenu modifié avec succès !"

11
LISMOI
View File

@ -293,11 +293,15 @@ INDEX : adresse, à partir du répertoire dans lequel est contenu le fichier
indication sur le nom que vous voulez donner au fichier
CSS_SANS_MENU : nom de la feuille de style à utiliser quand la page est générée
sans menu. À noter que le fichier doit se trouver dans le dossier 'composants'
sans menu. À noter que le fichier doit se trouver dans le dossier 'style'.
CSS_AVEC_MENU : nom de la feuille de style à utiliser quand la page est générée
avec un menu. À noter que le fichier doit se trouver dans le dossier
'composants'.
'style'.
CSS_COULEUR : nom de la seconde feuille de style à utiliser pour ajouter des
couleurs à votre page. À noter que le fichier doit se trouver dans le dossier
'style'.
CSS_NOM : nom de la feuille de style dans le résultat final
@ -386,7 +390,8 @@ Le dossier 'style' est prévu pour contenir l'ensemble des feuilles de style
disponible pour l'apparence de notre page PorteAil.
Déposez donc ici vos feuille de style et changez la variable 'CSS_AVEC_MENU'
et 'CSS_SANS_MENU' du fichier 'configrc' (Cf. Chapitre 'configrc').
,'CSS_SANS_MENU' et 'CSS_COULEUR' du fichier 'configrc' (Cf. Chapitre
'configrc').
#--[[ Le dossier img ]]--#

9
TACHES
View File

@ -8,17 +8,13 @@ DESTDIR
- Valider la page à l'aide de TIDY (doit être facultatif)
- Trouver une méthode plus fine pour trouver le nombre de catégories par fichier (autre qu'un grep par exemple)
- Vérifier la présence des /, [ et ] dans les variables avant qu'elles soient mises dans un SED. Ceci à l'aide de ${var//a/b} pour modifier les chaînes A par B dans VAR.
- permettre l'ajout de plusieurs CSS dans HEAD
- faire une page "print.css"
- mettre en noir et blanc
- ajouter le nom des liens en fin de chaque lien
- créer plusieurs feuilles de style (couleurs, positionnement des éléments, etc.)
- ne copier QUE les images utilisées
- Tenter d'utiliser la description de l'élément pour faire une fenêtre qui s'affiche quand on passe sur le cadre de l'élément (tout en CSS si possible !)
- Que donne une ligne vide dans le fichier de catégorie ? => à tester comme cas possible
>>> Pour la v0.1.2 :
- imaginer un système d'héritage des feuilles de style pour ne modifier que les couleurs de la page, en dehors de la structure ?
- faire un export en XHTML si possible (ajouter l'extension au fichier de destination choisi)
- HTML 5 avec header et footer
- Simplifier le code HTML et CSS
@ -28,6 +24,7 @@ DESTDIR
- Meilleur affichage dans les navigateurs textes
- Changer les DIV en une liste d'éléments puis mettre display: inline-block; pour l'affichage. Si liste, alors mettre des point-virgules à la fin de chaque ligne (et les cacher en css)
- Réorganiser les variables du GNUmakefile pour rendre plus simple le choix des variables par l'utilisateur. Afin qu'il n'ai JAMAIS à mettre d'autre variables dans le contenu. Par exemple jamais écrire cela : $(DOSSIER)/fichier.html !!!!
- Simplifier le fichier Makefile au niveau des variables pour réduire leur nombre
- commenter le code CSS
- favicon.ico ?
@ -109,3 +106,7 @@ des éléments
- vérifier l'existence de l'image avant de l'ajouter
- si pas d'image ou image inexistante, mettre une image générique
- Doc : donner l'astuce pour ordonner les catégories dans le fichier : mettre 00-nom_fichier.txt, puis 01-autre_categorie.txt, etc.
- imaginer un système d'héritage des feuilles de style pour ne modifier que les couleurs de la page, en dehors de la structure. => fait avec une double inclusion de feuille de style dans la page HTML
- permettre l'ajout de plusieurs CSS dans HEAD
- créer plusieurs feuilles de style (couleurs, positionnement des éléments, etc.)
- ne copier QUE les images utilisées

1
composants/entete.html
View File

@ -5,6 +5,7 @@
<title>@@ACCUEIL_PORTEAIL@@</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="@@CSS_DEFAUT@@" type="text/css" media="all" title="Défaut" />
<link rel="stylesheet" href="@@CSS_COULEUR@@" type="text/css" media="all" title="Défaut" />
</head>
<body>
<div id="chapeau">

5
configrc.exemple
View File

@ -1,8 +1,9 @@
## CONFIGURATION
DESTINATION = porteail
INDEX = $(DESTINATION)/index.xhtml
CSS_SANS_MENU = bicolore_sans_menu.css
CSS_AVEC_MENU = bicolore_avec_menu.css
CSS_SANS_MENU = sans_menu.css
CSS_AVEC_MENU = avec_menu.css
CSS_COULEUR = noir.css
CSS_NOM = defaut.css
TITRE = Titre par défaut
ACCUEIL = Accueil - $(TITRE)

21
style/bicolore_avec_menu.css → style/avec_menu.css
View File

@ -4,22 +4,16 @@ width: 100%;
min-width: 300px;
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
}
a:link {
color: #6276a4;
text-decoration: underline;
}
a:visited {
color: #6276a4;
}
a:hover {
background-color: #6276a4;
color: #ffffff;
}
p {
@ -30,7 +24,6 @@ h2 {
width: 94%;
padding-left: 2%;
margin-left: 1%;
color: #000000;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 10px;
@ -42,7 +35,6 @@ h3 {
width: 92%;
padding-left: 3%;
margin-left: 1%;
color: #000000;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
@ -58,8 +50,6 @@ height: 50px;
width: 78%;
top: 0;
left: 1%;
background-color: #000000;
color: #ffffff;
text-align: center;
font-size: 120%;
line-height: 15%;
@ -106,8 +96,6 @@ text-decoration: none;
}
div#corps a.cadre:hover {
background-color: #000000;
color: #ffffff;
}
div#corps a.cadre div.element {
@ -132,8 +120,6 @@ height: auto;
width: 20%;
top: 90px;
right: 0;
background-color: #000000;
color: #ffffff;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
-webkit-border-radius-topleft: 25px;
@ -145,28 +131,22 @@ overflow: hidden;
div#cartable h3 {
width: 90%;
color: #ffffff;
text-align: center;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-border-radius: 12px;
border-color: #ffffff;
}
div#cartable a:link {
color: #aaaabb;
text-decoration: underline;
}
div#cartable a:visited {
color: #aaaabb;
}
div#cartable a:hover {
background-color: #aaaabb;
color: #223355;
}
div#soulier {
@ -175,7 +155,6 @@ top: 5px;
right: 5px;
height: 20px;
width: 98%;
color: #000000;
}
div#soulier p {

62
style/bleu.css Normal file
View File

@ -0,0 +1,62 @@
html, body {
background-color: #e9ecf4;
color: #223355;
}
a:link {
color: #6276a4;
}
a:visited {
color: #6276a4;
}
a:hover {
background-color: #6276a4;
color: #ffffff;
}
h2 {
color: #555577;
}
h3 {
color: #555577;
}
div#chapeau {
background-color: #223355;
color: #ffffff;
}
div#corps a.cadre:hover {
background-color: #223355;
color: #ffffff;
}
div#cartable {
background-color: #223355;
color: #ffffff;
}
div#cartable h3 {
color: #ffffff;
border-color: #ffffff;
}
div#cartable a:link {
color: #aaaabb;
}
div#cartable a:visited {
color: #aaaabb;
}
div#cartable a:hover {
background-color: #aaaabb;
color: #223355;
}
div#soulier {
color: #000000;
}

186
style/bleu_avec_menu.css
View File

@ -1,186 +0,0 @@
html, body {
height: 100%;
width: 100%;
min-width: 300px;
margin: 0;
padding: 0;
background-color: #e9ecf4;
color: #223355;
}
a:link {
color: #6276a4;
text-decoration: underline;
}
a:visited {
color: #6276a4;
}
a:hover {
background-color: #6276a4;
color: #ffffff;
}
p {
padding: 5px;
}
h2 {
width: 94%;
padding-left: 2%;
margin-left: 1%;
color: #555577;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
}
h3 {
width: 92%;
padding-left: 3%;
margin-left: 1%;
color: #555577;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-border-radius: 12px;
}
div#chapeau {
position: relative;
margin: 0;
padding: 0;
height: 50px;
width: 78%;
top: 0;
left: 1%;
background-color: #223355;
color: #ffffff;
text-align: center;
font-size: 120%;
line-height: 15%;
-moz-border-radius-bottomright: 25px;
border-bottom-left-radius: 25px;
-webkit-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
-webkit-border-radius-bottomleft: 25px;
}
div#chapeau h1 {
margin: 0;
padding: 0;
height: 50px;
line-height: 50px;
}
div#corps {
position: relative;
width: 78%;
left: 2%;
}
div#corps div.ensemble_element {
min-height: 10em;
}
div#corps a.cadre {
height: 9em;
width: 11em;
margin: 0 5px 10px 5px;
float: left;
border: thin solid #000000;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 1px 1px 8px #000000;
box-shadow: 1px 1px 8px #000000;
-webkit-box-shadow: 1px 1px 8px #000000;
overflow: hidden;
text-align: center;
text-decoration: none;
}
div#corps a.cadre:hover {
background-color: #223355;
color: #ffffff;
}
div#corps a.cadre div.element {
height: 9em;
margin-top: 1em;
}
div#corps a.cadre div.element img {
margin-top: 2em;
margin-right: auto;
margin-left: auto;
border: 0;
}
div#corps div.espace {
clear: both;
}
div#cartable {
position: absolute;
height: auto;
width: 20%;
top: 90px;
right: 0;
background-color: #223355;
color: #ffffff;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
-webkit-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
-webkit-border-radius-bottomleft: 25px;
overflow: hidden;
}
div#cartable h3 {
width: 90%;
color: #ffffff;
text-align: center;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-border-radius: 12px;
border-color: #ffffff;
}
div#cartable a:link {
color: #aaaabb;
text-decoration: underline;
}
div#cartable a:visited {
color: #aaaabb;
}
div#cartable a:hover {
background-color: #aaaabb;
color: #223355;
}
div#soulier {
position: relative;
top: 5px;
right: 5px;
height: 20px;
width: 98%;
color: #000000;
}
div#soulier p {
margin: 0;
padding: 0;
font-size: 10px;
text-align: center;
}

186
style/bleu_sans_menu.css
View File

@ -1,186 +0,0 @@
html, body {
height: 100%;
width: 80%;
min-width: 300px;
margin: 0 10%;
padding: 0;
background-color: #e9ecf4;
color: #223355;
}
a:link {
color: #6276a4;
text-decoration: underline;
}
a:visited {
color: #6276a4;
}
a:hover {
background-color: #6276a4;
color: #ffffff;
}
p {
padding: 5px;
}
h2 {
width: 94%;
padding-left: 2%;
margin-left: 1%;
color: #555577;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
}
h3 {
width: 92%;
padding-left: 3%;
margin-left: 1%;
color: #555577;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-border-radius: 12px;
}
div#chapeau {
position: relative;
margin: 0 auto;
padding: 0;
height: 50px;
width: 78%;
top: 0;
left: 1%;
background-color: #223355;
color: #ffffff;
text-align: center;
font-size: 120%;
line-height: 15%;
-moz-border-radius-bottomright: 25px;
border-bottom-left-radius: 25px;
-webkit-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
-webkit-border-radius-bottomleft: 25px;
}
div#chapeau h1 {
margin: 0;
padding: 0;
height: 50px;
line-height: 50px;
}
div#corps {
position: relative;
width: 98%;
left: 2%;
}
div#corps div.ensemble_element {
min-height: 10em;
}
div#corps a.cadre {
height: 9em;
width: 11em;
margin: 0 5px 10px 5px;
float: left;
border: thin solid #000000;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 1px 1px 8px #000000;
box-shadow: 1px 1px 8px #000000;
-webkit-box-shadow: 1px 1px 8px #000000;
overflow: hidden;
text-align: center;
text-decoration: none;
}
div#corps a.cadre:hover {
background-color: #223355;
color: #ffffff;
}
div#corps a.cadre div.element {
height: 9em;
margin-top: 1em;
}
div#corps a.cadre div.element img {
margin-top: 2em;
margin-right: auto;
margin-left: auto;
border: 0;
}
div#corps div.espace {
clear: both;
}
div#cartable {
position: absolute;
height: auto;
width: 20%;
top: 90px;
right: 0;
background-color: #000000;
color: #ffffff;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
-webkit-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
-webkit-border-radius-bottomleft: 25px;
overflow: hidden;
}
div#cartable h3 {
width: 90%;
color: #ffffff;
text-align: center;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-border-radius: 12px;
border-color: #ffffff;
}
div#cartable a:link {
color: #aaaabb;
text-decoration: underline;
}
div#cartable a:visited {
color: #aaaabb;
}
div#cartable a:hover {
background-color: #aaaabb;
color: #223355;
}
div#soulier {
position: relative;
top: 5px;
right: 5px;
height: 20px;
width: 98%;
color: #000000;
}
div#soulier p {
margin: 0;
padding: 0;
font-size: 10px;
text-align: center;
}

62
style/noir.css Normal file
View File

@ -0,0 +1,62 @@
html, body {
background-color: #ffffff;
color: #000000;
}
a:link {
color: #6276a4;
}
a:visited {
color: #6276a4;
}
a:hover {
background-color: #6276a4;
color: #ffffff;
}
h2 {
color: #000000;
}
h3 {
color: #000000;
}
div#chapeau {
background-color: #000000;
color: #ffffff;
}
div#corps a.cadre:hover {
background-color: #000000;
color: #ffffff;
}
div#cartable {
background-color: #000000;
color: #ffffff;
}
div#cartable h3 {
color: #ffffff;
border-color: #ffffff;
}
div#cartable a:link {
color: #aaaabb;
}
div#cartable a:visited {
color: #aaaabb;
}
div#cartable a:hover {
background-color: #aaaabb;
color: #223355;
}
div#soulier {
color: #000000;
}

21
style/bicolore_sans_menu.css → style/sans_menu.css
View File

@ -4,22 +4,16 @@ width: 80%;
min-width: 300px;
margin: 0 10%;
padding: 0;
background-color: #ffffff;
color: #000000;
}
a:link {
color: #6276a4;
text-decoration: underline;
}
a:visited {
color: #6276a4;
}
a:hover {
background-color: #6276a4;
color: #ffffff;
}
p {
@ -30,7 +24,6 @@ h2 {
width: 94%;
padding-left: 2%;
margin-left: 1%;
color: #000000;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 10px;
@ -42,7 +35,6 @@ h3 {
width: 92%;
padding-left: 3%;
margin-left: 1%;
color: #000000;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
@ -58,8 +50,6 @@ height: 50px;
width: 78%;
top: 0;
left: 1%;
background-color: #000000;
color: #ffffff;
text-align: center;
font-size: 120%;
line-height: 15%;
@ -106,8 +96,6 @@ text-decoration: none;
}
div#corps a.cadre:hover {
background-color: #000000;
color: #ffffff;
}
div#corps a.cadre div.element {
@ -132,8 +120,6 @@ height: auto;
width: 20%;
top: 90px;
right: 0;
background-color: #000000;
color: #ffffff;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
-webkit-border-radius-topleft: 25px;
@ -145,28 +131,22 @@ overflow: hidden;
div#cartable h3 {
width: 90%;
color: #ffffff;
text-align: center;
border-bottom: solid;
border-left: solid;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-border-radius: 12px;
border-color: #ffffff;
}
div#cartable a:link {
color: #aaaabb;
text-decoration: underline;
}
div#cartable a:visited {
color: #aaaabb;
}
div#cartable a:hover {
background-color: #aaaabb;
color: #223355;
}
div#soulier {
@ -175,7 +155,6 @@ top: 5px;
right: 5px;
height: 20px;
width: 98%;
color: #000000;
}
div#soulier p {