Démo: Beez2-Personnel
- Détails
- Catégorie : Exemples
- Publié le vendredi 21 janvier 2011 08:27
- Écrit par Loïc Martin
- Affichages : 6196
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 :
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;}