La base de démo de GuppY 6 vous propose une configuration avec une page principale : la page d'accueil et cinq pages secondaires : la page secondaire 1 pour le blog, la page secondaire 2 pour les nouvelles et les photos, la page secondaire 3 pour les articles, la Faq et les téléchargements, la page secondaire 4 pour le forum, les liens et le livre d'or, la page secondaire 5 pour l'agenda, la lettre d'info et contact.
Le seul objectif est d'alléger et d'avoir un affichage le plus rapide possible dans l'optique "Mobile-First".
Page secondaire : 1 - blog
/* --------- CSS to customize skin6-guppy-03 for secondary page blog ----------- */
.T1entrow0 { padding: 10px 0;background-color: #0F056B;}
.T1entrow3 { padding: 10px 25px;}
.T1entrow4 { display: none; }
.T1entrow6 { display: none; }
.B1entrow1 { padding: 20px 40px !important; }
@media screen and (min-width: 768px) and (max-width: 1080px) {
.B1entrow2 .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; }
}
La seule différence est la configuration, T0 et B0 sont remplacés par T1 et B1 pour la page secondaire 1.
Page secondaire : 2 - news_photos
/* --------- CSS to customize skin6-guppy-03 for secondary page news_photos ----------- */
.T2entrow0 { padding: 10px 0;background-color: #0F056B;}
.T2entrow3 { padding: 10px 25px;}
.T2entrow4 { display: none; }
.B2entrow1 { padding: 20px 40px !important; }
@media screen and (min-width: 768px) and (max-width: 1080px) {
.B2entrow2 .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; }
}
Comme pour la précédente, le changement est T2 et B2 pour la page secondaire 2.
Page secondaire : 3 - articles_faq_telech
/* --------- CSS to customize skin6-guppy-03 for secondary page articles_faq_telech ----------- */
.T3entrow0 { padding: 10px 0;background-color: #0F056B;}
.T3entrow3 { padding: 10ox 25px;}
.T3entrow4 { display: none; }
.T3entrow6 { display: none; }
.B3entrow1 { padding: 20px 40px !important; }
@media screen and (min-width: 768px) and (max-width: 1080px) {
.B3entrow2 .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; }
}
Même changement, T3 et B3 pour la page secondaire 3.
Page secondaire : 4 - forum_liens_lo
/* --------- CSS to customize skin6-guppy-03 for secondary page forum_liens_lo ----------- */
.T4entrow0 { padding: 10px 0;background-color: #0F056B;}
.T4entrow3 { padding: 10ox 25px;}
.T4entrow4 { display: none; }
.T4entrow6 { display: none; }
div.rep.text-left.mx-1.thbodycontentW { border: 1px dotted #A39167; }
div.col-md-3.rep.text-center { border: 1px dotted #A39167; }
.B4entrow1 { padding: 20px 40px !important; }
@media screen and (min-width: 768px) and (max-width: 1080px) {
.B4entrow2 .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; }
}
Comme les pages précédentes, modifications avec T4 et B4 pour la page secondaire 4, et un ajout de deux div pour mettre une bordure aux posts sur le forum.
Il est possible d'ajouter des personnalisations sur une seule page secondaire, comme il est possible de faire une configuration de boites différentes par pages secondaires.
Attention : si vous ajoutez un nombre important de personnalisations, de pages secondaires, en cas de changement, le travail à effectuer sera proportionnel au nombre !!!
Page secondaire : 5 - agenda_info_contact
/* --------- CSS to customize skin6-guppy-03 for secondary page agenda_info_contact ----------- */
.T5entrow0 { padding: 10px 0;background-color: #0F056B;}
.T5entrow3 { padding: 10ox 25px;}
.T5entrow4 { display: none; }
.T5entrow6 { display: none; }
.B5entrow1 { padding: 20px 40px !important; }
@media screen and (min-width: 768px) and (max-width: 1080px) {
.B5entrow2 .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; }
}
Pour la dernière page secondaire, même principe T5 et B5 pour la page secondaire 5.
Nous avons terminé le passage en revue des styles des pages secondaires, maintenant à vous de jouer en adaptant à votre site.
Document généré en 0.01 seconde