Démo: Beez2-Personnel

Cette page est un exemple d'utilisation de bgMax avec le template Beez2 avec la couleur "Personnel".

Le template d'origine n'a pas été modifié, tous les changements d'aspect sont du à bgMax avec le code ci-dessous.

La position debug  ne répondant pas dans le template Beez2, nous devons publier le module en position-14

Le paramétrage du module est fait classiquement avec les valeurs ci-dessous. Le point le plus intéressant est le nom et le paramétrage des sélecteurs pour ce template.

Paramètre Valeur Observations
IMAGE ET COULEUR DE FOND DE PAGE
Image rose une simple image de 625 x 890 pixels pour un poids de 73Ko
Couleur de fond 850615 Je préférais une couleur plus sombre que celle retournée par la couleur automatique
TAILLE ET POSITION DE L'IMAGE
Mode d'ajustement MAX  Ajuste l'image à la taille de la fenêtre navigateur
Agrandissement Oui  
Réduction Non  
Alignement horizontal centré Le centrage du fond simule un effet de zoom lors du redimensionnement du navigateur
Alignement vertical centré
z-index  -1  La valeur par défaut convient bien
Décalage top  0px  La valeur par défaut convient bien
APPARITION EN FONDU DE L'IMAGE
Effet de fondu Oui Pour le fun !
Délai apparition (ms) 500 1sec à adapter selon votre hébergeur 
Durée fondu (ms) 3000 2sec. A diminuer ou augmenter selon vos envies !
Etapes/sec 30 La valeur par défaut de 30 convient bien
PARAMETRE DU BLOC DE CONTENU (ne concerne que le template beez_2)
Sélecteur CSS contenu #all, #contentarea, #header, .logoheader le contenu est dans plusieurs blocs. Il est donc nécessaire de les indiquer en les séparant par des virgules pour respecter la méthode des CSS
Couleur du fond #F4CEEC  un léger rose pour être en harmonie avec l'image
Opacité du fond 50%  
Largeur du contenu

 

 On conserve la largeur de la page
Alignement du contenu

centré

 
CODE COMPLEMENTAIRE DANS HEAD (ne concerne que le template beez_2)
Style complémentaire #contentarea, #contentarea2 {
background-image:none !important;
} /* supprime ombre en haut du contenu */
#footer-outer {
width:980px;margin:0 auto;
} /* ajuste pied de page*/
ul.menu, .items-row {
background-color: transparent !important;
} /* supprime fond des pavés de texte*/
.moduletable_menu ul.menu {
border: 2px dotted blue !important;}

il faut ajouter pas mal de code pour :

  • supprimer l'image utilisée pour simuler une ombre en haut du contenu.
  • réduire la largeur du footer
  • supprimer le fond des pavés de texte

Remarquez l'utilisation de !important pour augmenter la priorité de nos paramètres sur ceux du template qui sont déclarés en tout dernier par le template.

Fichier à inclure Aucune sélection  
AFFICHAGE CONDITIONNEL
Conditions artid=20 uniquement pour cet article
Période   aucune

Astuce:

Pour pouvoir afficher le tableau avec un style similaire aux autres tableaux des exemples alors que le style du template l'interdisait, j'ai détourné la fonctionnalité du code complémentaire en ajoutant cette ligne

table td {padding:3px; border: 1px #069 solid !important;}