Trucs & astuces
CSS additionnel
Modifier la taille du logo dans le header
.app-header .app-header__logo {
max-height: none;
width: 210px;
}Classe active en dessous de 600px
Enlever l’espace blanc du bouton de connexion
.button-toggle-secondary-menu:before {
display:none;
}
Changer la couleur de titre dans les articles
body.single-post .entry__title {
color: ###### ;
}
Forcer le passage des titres en miniscules (titres des articles notamment)
.entry__title, .entry__byline strong {
text-transform:none;
}
Élément du menu en couleur lorsque l’on est sur la page
li:not(.btn-contact).menu__item–ancestor > a { color:#47CEFF !important;
}
Changer la couleur de la case à cocher du formulaire
.gform-body input[type=checkbox] {
/* Pour modifier la taille de la bordure : */
border: 1px solid !important;
/* Pour modifier la couleur de fond : */
background-color: red !important;
}
Mettre le texte du sous-footer en majuscule et modifier la taille du texte
.app-subfooter * {
text-transform: uppercase!important;
font-size: 14px
}
Mettre le texte du footer en majuscule
footer.app-footer * {
text-transform: uppercase !important;
}
Enlever l’entête dans les articles (titre + auteur + date)
.single.single-post main#main header.entry__header {
display: none!important;
}
.single.single-post main#main {
padding-top: unset!important;
}
Enlever le bug d’affichage des textes qui sortent du menu déroulant dans le bouton de connexion
.app-subheader__menu.flex nav.menu–secondary { width: fit-content!important; }
Responsive : modifier la taille des polices sur mobile
Intégrer ce code dans le css spécifique dans le panneau de personnalisation :
Mettre le nombre de titres à modifier (ex: pour tous les H1 -> titre1 / pour tous les h2 ->titre2…)
@media (max-width: 767px){
.titre1 { font-size: (taille souhaitée sur mobile)px!important; }
.titre2 { font-size: (taille souhaitée sur mobile)px!important; }
.titre3 { font-size: (taille souhaitée sur mobile)px!important; }
.titre4 { font-size: (taille souhaitée sur mobile)px!important; }
.titre5 { font-size: (taille souhaitée sur mobile)px!important; }
}
Ensuite mettre une balise dans le CSS de chaque titre à changer.
(ex : pour modifier la taille d’un H1 -> mettre titre1 dans le css du titre)
Responsive : avoir une image complexe qui s’adapte sur telephone et mobile
Exporter les deux images / fonds au format desktop et au format mobile.
Intégrer le code suivant dans le css spécifique dans le panneau de personnalisation
@media (min-width: 768px) {
.hide-on-desktop {
display:none;
}
}
@media (max-width: 767px){
.hide-on-mobile{
display: none;
}
}
Ensuite mettre la balise suivante dans le CSS de l’image à cacher sur desktop :
hide-on-desktop
Et mettre la balise suivante dans le CSS de l’image à cacher sur mobile :
hide-on-mobile
Intégrer une ligne verticale
Intégrer le code suivant dans le css spécifique dans le panneau de personnalisation
.p-liste::after {
position: absolute;
content: »;
height: 20px;
width: 3px;
background-color: #F1592A;
top: 5px;
margin-left: 6px;
}
Mettez l’épaisseur, la hauteur et la couleur souhaitées
Et mettre la balise suivante dans le CSS du bloc ou la colonne où le trait doit apparaitre
p-liste
Mettre des radius sur le sous-menu
Intégrer le code suivant dans le css spécifique dans le panneau de personnalisation
.menu__sub-menu {
border-radius: 0 0 20px 20px;
}
Vous pouvez choisir de mettre tous les bords ou que certains.