TUTORIAL - Rendre les cellules translucides

[Invité]

Avant de commencer à lire ce tutorial, je vous conseille de lire celui-ci, sur les fichiers .css =>> http://forum.forumactif.com/viewtopic.forum?t=5679

Petit rappel sur le .css :

• Un fichier .css s'écrit avec un simple éditeur de texte - bloc notes, par exemple,
  
• Il faut l'héberger ensuite sur un serveur - page perso de son FAI, par exmple,
  
• Lier son fichier .css à son Forum avec ce code à insérer dans
  Panneau d'administration >> :: Général - Configuration >> Description du site :

  Code:

  <link rel=stylesheet href=URL/Nom_Fichier.css type=text/css>

  
  

______________________________

Rendre les cellules translucides :
Ce qu'il faut tout d'abord savoir, c'est qu'il va falloir, non pas créer 1 mais 2 fichiers .css ! En effet, selon le navigateur utilisé, le résultat est tout à fait différent si 1 seul fichier .css était utilisé.
Pourquoi utiliser 2 fichiers .css ?
>> La façon la plus simple de créer une cellule translucide est de créer soit un fond 10x10 de couleur unie, soit une image texturée (effet parchemin, par exemple) avec une opacité de 70 à 85% au format .png ; or, IE6 ne gère pas l'opacité des images .png et n'affiche donc qu'une image opaque à 100% : pour rendre donc une cellule transparente sous IE6, on va utiliser un filtre: filter: Alpha(Opacity=XX) qui lui n'est pas géré par les autres navigateurs comme FireFox.
Récapitulons :
- IE6 gère les filtres mais pas l'opacité des fichiers .png,
- Les autres navigateurs gèrent l'opacité des fichiers .png mais pas les filtres IE6.

>> On va donc tout d'abord créer ces différentes images .png pour les cellules td.row1, td.row2, td.row3, td.row3Right = td.row3, th, ... avec td.row1 = Table Rangée Couleur 1, td.row2 = Table Rangée Couleur 2 et surbrillance, td.row3 et td.row3Right = Table Rangée Couleur 3 et séparations, ...
/!\ Pour connaitre toutes les balises ainsi que leurs class : http://www.aginum.net/phpbb/ >> Cliquer sur CSS (dans le tableau de droite).
Une fois que vous avez créé vos images, hébergez les !

Maintenant, attaquons nous aux 2 fichiers .css - les nommer ainsi fichier_IE6.css et fichier_AutresNav.css :

td.row1, td.row2, td.row3, td.row3Right, ... {filter: Alpha(Opacity=XX);}

En bleu >> Rajouter les autres cellules ou autres parties de votre Forum que vous voulez voir translucides,
En vert >> Valeur de l'opacité (en %) ; mettre en 70 et 85. /!\ Ne pas mettre le % derrière le nombre.

td.row1 { background: URL("http://URL_image_td.row1.png");}
td.row2 { background: URL("http://URL_image_td.row2.png");}
td.row3, td.row3Right { background: URL("http://URL_image_td.row3.png");}
...

En bleu >> Rajouter autant de style que vous avez de cellules à modifier, par exemple les en-têtes avec la balise th.

N'oubliez pas de les héberger !

Maintenant, nous allons créer un petit script en JavaScript afin d'appeler le bon fichier .css ; on le nommera nav.js :

var Navigateur = navigator.appName;

if (Navigateur == "Microsoft Internet Explorer") {
document.write('<link rel=stylesheet type=text/css href=http://URL/fichier_IE6.css>');
} else {
document.write('<link rel=stylesheet type=text/css href=http://URL/fichier_AutresNav.css>');
}

Comme à l'accoutumé, hébergez ce fichier...

Maintenant que tout est en place, il ne reste plus qu'à appeler ce fichier :
Panneau d'administration >> :: Général - Configuration >> Description du site: Rajouer ce code <script type=text/javascript src=http://URL/nav.js></script> et retirer éventuellement celui-là <link rel=stylesheet href=URL/Nom_Fichier.css type=text/css> .
______________________________

>> Dans tout ce tutorial, URL correspond à l'adresse de vos différents fichiers,
>> Il est possible de lier un autre fichier .css en plus de fichier_IE6.css ou fichier_AutresNav.css où dans ce fichier - que l'on appelera fichier_commun.css, il y aurait d'autres modifications du Forum (fond d'écran fixe sans effet mosaïque centré sur la page, ...) qui sont compatibles avec tous les navigateurs ; dans ce cas, il suffit de modifier le fichier nav.js de cette sorte :

document.write('<link rel=stylesheet type=text/css href=http://URL/fichier_commun.css>');

var Navigateur = navigator.appName;

if (Navigateur == "Microsoft Internet Explorer") {
document.write('<link rel=stylesheet type=text/css href=http://URL/fichier_IE6.css>');
} else {
document.write('<link rel=stylesheet type=text/css href=http://URL/fichier_AutresNav.css>');
}

Rappel du code à insérer dans fichier_commun.css pour avoir un fond de page fixe sans effet mosaïque et centré sur la page :

body {
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center;
}
...

En bleu : Autre style à ajouter.
______________________________

2 petites choses pour terminer :
>> Si vous voulez voir le fond de page à travers les cellules :
Panneau d'administration >> :: Thèmes - Couleurs >> Couleur intérieure du cadre Mettre le champ vide et valider.

>> Si vous voulez obtenir des fonds de couleur unie ou des images texturées translucides :

• Donnez votre couleur (en hexa) + opacité + nom de l'image,
  
• Donnez le lien de votre image + opacité + nouveau nom de l'image.

SanDream

En bonus : Venez donc voir mon Forum avec IE6 et FireFox... Les effets d'opacité sont bien présents et vous verrez même quelques petites différences (titre du Forum, noms des catégories, ...)

[Invité]

Si vous souhaitez mettre plusieurs scripts - ou styles, utilisez donc mon générateur de scripts :

http://forum.forumactif.com/viewtopic.forum?t=53439

SanDream

[larme d']

Pour eviter de vous compliquer la tache avec plusieurs scripts:
Voici les equivalents de filter: alpha(opacity=**) pour Modzilla et Opera

Vous n'aurez donc pas besoin de faire deux CSS

Opera opacity: .*
Modzilla -moz-opacity: .*
Internet Explorer filter: alpha(opacity=**)

Il vous suffit donc de faire un seul et unique css regroupant les trois filtres pour les différents navigateurs.

Exemple:

Code:

td.row1, td.row2, td.row3, td.row3Right { opacity: .8;
                            filter: alpha(opacity=80);
                                    -moz-opacity: .8;}

Attention, le resultat si il fonctionne très bien, donne un rendu moins convaincant sous modzilla que le système de Sandream