 Avant de vous présenter en détails mon tout nouveau thème, ou plutôt devrais-je écrire ma 1ère expérience en "full" CSS/XHTML et de surcroit sans aucun tableau dans mon thème, de vous l'expliquer, et de vous montrer le cheminement effectué pour arriver au résultat final, laissez-moi vous donner quelques rappels sur les sites sur lesquels j'ai travaillé.
Plan :
0) Introduction
1) Theme de départ - Idée de départ
2) Les colonnes factices
3) Principaux "div"
4) Onglets, partie 1 : bords arrondis
5) Onglets, partie 2 : colorisation de l'onglet actif
6) Validation W3C
7) Téléchargement du thème
0) Introduction
Après la mise en place de l'intanet, mon 1er projet XOOPS (pas visible évidemment), c'était en Juin 2003 je crois, j'ai continué à prendre beaucoup de plaisir à monter des projets de sites webs via cet extraordinaire CMS et grace surtout à cette communauté inégalable et inégalée.
La suite plus bas...
  
Mon 1er site public a été le site de
la Ligue Rhône-Alpes de volleyball, pour lequel j'ai travaillé sur le thème (Lire l'article).
Celui-ci est disponible en libre téléchargement ici.
J'ai ensuite enchainé par 2 sites "vitrine" en multilangue français / anglais. Ces sites n'ont pas l'aspect de sites réalisés en XOOPS mais pourtant, détrompez-vous, cliquez tout en bas sur "login", vous retrouverez des éléments familiers.
Il s'agit du Laboratoire de Dynamique des Machines et des Structures (Lire l'article) ainsi que du site présentant un logiciel spécifique nommé ROTORINSA.
 Par la suite j'ai réalisé la mise à jour complète (noyau de XOOPS, modules et thèmes) de l'excellent site de l'association de protection des éléphants d'Asie, Elefantasia, géré par Gilles.
Pour le tout dernier site, après avoir lu l'article de Christian Xoopser un template xhtml/css en moins de 10mn, je me suis dit : Pourquoi pas moi ?
Alors j'ai tenté l'expérience, plus pour évaluer mes capacités d'apprentissage et la curiosité de se mettre à des "standards" qu'une vrai volonté de faire tout en css/XHTML, un défi, quoi !
Tout d'abord, 1er constat, moi, j'ai seulement mis 14 jours et 10mn pour peaufiner le thème soit à peine 14 jours de plus ! 
Je me suis largement inspiré de quelques infos pertinentes glanées ici et là :
- Pompage.net
- Alsacréation et lÃ
- peutetreunereponse.net
Mon objectif concernant le thème (aucun objectif pour le site en lui-même) :
- Réaliser un thème original
- N'utiliser que la norme CSS/XHTML
- Ne pas avoir de tableaux dans le thème
- Réussir la validation CSS et XHTML
- Intégrer des onglets attrayants
- Onglets à bords arrondis
- Onglets avec mémorisation de la position du visteur sur le site
 1) Theme de départ - Idée de départ
J'ai beaucoup apprécié l'originalité du thème présenté ici et disponible dans les thèmes de frxoops.org ici.
Je suis donc parti sur une idée d'un cahier à spirale et donc pas de colonne de droite.
2) Les colonnes factices
Lire l'article sur l'astuce des colonnes factices.
Cette méthode est assez pratique dans le cas de mon thème
Haut 1 + emplacement des onglets vers les liens externes
Haut 2 + emplacement vers les liens internes
Motif principal répété en y
Bas
3) Principaux "div"
<div id="conteneur">
<div id="navigation">
// position des onglets vers liens externes
</div>
<div id="navigation2">
// position des onglets vers liens internes
</div>
<div id="logo">
// ici le lien du logo
</div>
<div id="gauche">
// Boucle blocs de gauche
</div>
<div id="centre_gd">
<div id="centre_gauche">
// Boucle blocs centre gauche
</div>
<div id="centre_droite">
// Boucle blocs centre droite
</div>
</div>
<div id="centre">
// Boucle blocs centre centre
<div id="content">Affichage du contenu du module</div>
</div>
<div id="blocnote_bottom">
// bas de page
</div>
</div>
4) Onglets, partie 1 : bords arrondis
Il existe une méthode pour définir des onglets, c'est la méthode des portes coulissantes, ce n'est pas celle que j'ai utilisée mais celle-là (Exemple 2, Horizontal).
Il s'agit d'une astuce css tout à fait fabuleuse. cela vous génére des formes d'onglets sans avoir besoin d'images. Une fois le principe bien compris, vous pourrez créer autant d'onglets de couleurs différentes de vous souhaitez, en une seule ligne css.
Quand vous avez maitrisez ces quelques lignes de css, libre à vous de définir des types d'onglets avec les paramètres suivants :
- couleur,
- grandeur de l'onglet
- onglet sombre ou clair
Tentative d'explication :
<div id="navigation">
<ul>
<li>
<a class="menumini" href="http://monsite.fr/lien1.html" title="Mon lien 1">
<b class="BoxOnglet"><span class="BoxContenu couleur4">Lien 1</span><b class="b4 couleur4"></b><b class="b3 couleur4"></b><b class="b2 couleur4"></b></b>
</a>
</li>
</ul>
</div>
avec comme css (que j'ai commenté):
// placement des onglets sur la page
#navigation {
padding-left: 300px;
background: transparent no-repeat;
margin: 0px;
height: 4em; /* cache overflow:hidden de IE5/Mac */
overflow: hidden; /* */
background-image: url(images/fonds_blocnote_top.png);
height: 45px;
}
#navigation ul {
margin:0px;
padding:0;
list-style-type:none;
background:transparent;
}
#navigation li {
display:block;
float:left;
margin:15px 2px 0px 0px;
}
.BoxOnglet, .BoxOngletFonce {
background:transparent;
}
// Onglet pour texte sombre
.BoxOnglet span {
text-align: center;
color: #FFCC33;
margin: 0px;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Onglet pour texte clair
.BoxOngletFonce span {
text-align: center;
color: #093F7D;
margin: 0;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Astuces pour faire des bords arrondis
// b1 étant la base la plus large et b4 la plus petite
.b1, .b2, .b3, .b4 {
display:block;
font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */
/* */
overflow: hidden;
/* */
}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
.b1 {margin:0px 5px; background:#FFFFFF;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
// contour des onglets
.BoxContenu {
display:block;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
// onglets taille normale
a.menu {
display:block;
text-decoration:none;
width:6.5em;
}
// petits onglets
a.menumini {
display:block;
text-decoration:none;
width:3.5em;
}
// onglets grande taille
a.menugrand {
display:block;
text-decoration:none;
width:9.5em;
}
a.menu:hover, a.menumini:hover, a.menugrand:hover {
background:transparent;
cursor:pointer;
text-decoration: none;
}
a.menu:hover span, a.menumini:hover span, a.menugrand:hover span {
padding-top:8px;
}
// définition des couleurs des onglets
.rouge {background:#cc3333;}
.bleu {background:#093F7D;}
.jaune {background:#FFCC33;}
.comite{background:#3662a2;}
5) Onglets, partie 2 : colorisation de l'onglet actif
Une fois les onglets réalisés, certes, ils étaient beaux, colorés mais il manquaient quelque chose. Pouvoir coloriser l'onglet actif, c'est à dire, l'onglet qui reprénte la page sur laquelle on navigue.
Pour un onglet d'un lien vers un module, ce n'est pas si simple que cela. En effet, l'onglet doit rester dans sa colorisation active tant que l'on est sur une page du module donc faire un test sur la racine de l'url du module ne fonctionnera que sur la page index.html du module. Il nous faut donc trouver un autre test.
En parcourant les forums, j'ai trouvé des infos interessantes ainsi qu'en éditant mon site en mode SMARTY.
Pour les modules, j'utilise cette méthode :
<{if ($xoops_requesturi|truncate:18:"":true) == "/modules/wordpress"}>
ou
<{if ($xoops_requesturi|truncate:14:"":true) == "/modules/xhld0"}>
Modif (Merci Skalpa)
Pour les modules j'utilise maintenant cette methode :
<{if $xoops_dirname == 'wordpress'}>
<{if $xoops_dirname == 'xhld0'}>
Pour un onglet qui pointe vers un fichier c'est plus ou moins compliqué selon le lien :
Pour accueil
<{if $SCRIPT_NAME == "/index.php"}>
Pour Login/inscription
<{if ($xoops_requesturi|truncate:24:"":true) == "/user.php?xoops_redirect"}>
En effet, l'onglet doit être actif dans le cas d'une redirection vers la demande de login
Enfin, je fais un test pour remplacer l'onglet "login/inscription" par "Mon compte" quand le visiteur est loggé.
<{if $xoops_isuser}>
// Onglet "mon compte"
<{else}>
// Onglet "login/inscription"
<{/if}>
6) Validations W3C
 Validation XHTML
 Validation CSS
7) Téléchargement du thème
Ce nouveau thème est donc disponible en libre téléchargement ici.
|
