Icône du titre de la page GeneratePress : Librairie de codes CSS

GeneratePress (GP) est sans aucun doute le meilleur framework et thème WordPress-Woocommerce qui existe à l’heure actuelle.

Nous utilisons GP pour toutes nos boutiques et sites Web.

Vous trouverez ci-dessous nos styles CSS favoris.

Styles des titres et de la navigation (header & menu)

/* espacement des lettres du menu principal */

.main-navigation a {
  letter-spacing: 1px;
}
/* texte aligné au centre sur le menu mobile */

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
  text-align: center;
}
/* ajouter un bouton à votre menu - vous devrez ajouter un lien personnalisé à votre menu et dans le champ Classe CSS écrivez nav-button */

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
  color: rgba(36,36,36,1.0);
  border: 2px;
  border-style: solid;
  line-height: 40px; /* button height */
  margin-top: 3px; /* adjust to horizontally align with other menu items */
  border-radius:30px;
  margin-left: 20px; /* space to the left of button */
  transition: all 0.6s ease 0s;
} 

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
  color: rgba(36,36,36,0.8);
  transition: all 0.6s ease 0s;
}
/* ajouter des règles au-dessus et en dessous de la navigation */

#site-navigation {
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
}
/* contrôler la taille et la position de l'icône du menu mobile */

button.menu-toggle {
  font-size: 26px;
  padding-right: 30px;
}
/* taille de la police du menu déroulant */

.main-navigation .main-nav ul ul li a {
  font-size: 14px;
}
/* masquer la barre supérieure sur les appareils mobiles */

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
}
/* ajouter des règles au-dessus ou en dessous de votre menu en survol */

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: #1768ea;  
    top: 0px; /* controls where the line appears on hover */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; /* controls thickness of the line */
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 30px; /* controls the width of the line */
    color: #1768ea;  
}
/* ajouter plus d'espace autour du logo d'en-tête mobile */

.mobile-header-navigation .mobile-header-logo img {
	padding: 15px 0px 0px 10px;
}

/* add more space around mobile header menu icon */

.main-navigation.has-branding .menu-toggle {
	padding: 15px 25px 0px 10px;
}

Styles du corps (body)

/* Style des boutons - vous pouvez également définir les couleurs des boutons dans les paramètres des boutons de personnalisation */

.button,
.button:visited, 
.button:focus {
  background-color: rgba(36,36,36,1.0);
  padding: 10px 24px 10px 24px;
  border-radius: 4px;
  transition: all 0.6s ease 0s;
}

.button:hover,
.button:active {
  background-color: rgba(36,36,36,0.8); 
  transition: all 0.6s ease 0s;
}
/* ajoutez une superposition de dégradé opaque au-dessus de votre photo d'arrière-plan dans votre élément d'en-tête - dans l'élément d'en-tête, le champ Classes d'élément écrivez gradient-overlay */

.gradient-overlay {
  position: relative;
}

.gradient-overlay:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(32,21,95,0.8) 10%, rgba(59,197,240,0.6) 100%);
}

.gradient-overlay .inside-page-hero {
  z-index: 1;
  position: relative;
}
/* espace après un paragraphe avant la prochaine balise d'en-tête - chaque balise a besoin de sa propre règle */

p + h3 {
  margin-top: 40px;
}
/* masquer le contenu sur les appareils mobiles */

<div class=”hide-on-mobile”>
/* your content */
</div>
/ * effet de soulignement du lien texte - n'affecte pas la classe de bouton GeneratePress */

p a:not(.button) {
	box-shadow: 0px -4px 0px #00a2ff inset;
	transition: all 0.6s ease 0s;
}

p a:not(.button):hover {
	box-shadow: 0px -8px 0px #00a2ff inset;
}
/*styling du Meta de l'article de blog sans soulignement */

.post-meta {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.post-meta a {
  border-bottom: none;
}
/* ajouter une bordure blanche autour de l'ensemble du site sur tablette et desktop */

@media (min-width: 769px) {
  body {
    border: 20px solid #ffffff;
  }
}
/* stylisez vos blocs de citations */

blockquote {
  max-width: 600px;
  text-align: left;
  margin: 30px;
  padding: 20px;
  font-size: 20px;
  color: #363636;
}
/* ajoute automatiquement une lettrine à la première lettre du premier paragraphe d'un message */

.single-post .entry-content > p:first-of-type:first-letter {
  float: left;
  clear: both;
  font-size: 3em; /* adjust size of drop cap */
  font-weight: 600;
  line-height: 0.8em;
  margin: 0.1em 0.1em 0em 0px;
  padding: 2px 0px; /* adjust spacing around drop cap */
  color: #363636;
}
/* Le bouton se soulève en survol */

.button:hover {
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}
/* contrôle la couleur du contenu du site Web en surbrillance */

::selection {
  background: #00a2ff; 
  color: #ffffff; 
}

::-moz-selection {
  background: #00a2ff; 
  color: #ffffff; 
}

Styles du bas de page et de la barre latérale (footer & sidebar)

/* contrôler la largeur des widgets de pied de page pour différents appareils sur la base de 3 colonnes */

@media (min-width:1025px) {
  .footer-widgets .footer-widget-1 {
    width: 50%;
  }
  .footer-widgets .footer-widget-2 {
    width: 25%;
  }
  .footer-widgets .footer-widget-3 {
    width: 25%;
  }
}

@media (min-width:769px) AND (max-width:1024px) {
  .footer-widgets .footer-widget-1,
  .footer-widgets .footer-widget-2,
  .footer-widgets .footer-widget-3 {
    clear: none !important;
    float: left;
    width: 33.3333%;
  }
}

@media (max-width:768px) {
  .footer-widgets .widget {
    float: none;
    margin: 0 auto;
    max-width: 400px;
    padding: 60px 20px 0 20px;
  }
}
/* centrer le contenu du widget de pied de page */

.inside-footer-widgets {
  text-align: center;
}
/* aligner les widgets de pied de page à gauche, au centre, à droite sur le bureau et la tablette et tous centrés pour le mobile */

@media (min-width:769px) {
  .footer-widgets .footer-widget-1 {
    text-align: left;
  }
  .footer-widgets .footer-widget-2 {
    text-align: center;
  }
  .footer-widgets .footer-widget-3 {
    text-align: right;
  }
}

@media (max-width:768px) {
  .footer-widgets .widget {
    text-align: center;
  }
}
/* ajouter les règles du bas aux titres des widgets */

.widget-title {
  border-bottom: 1px solid #363636;
  line-height: 2em;
  display: inline-block;
}
/* définir l'espacement des lettres sur les titres des widgets */

.widget-title {
  letter-spacing: 2px;
}

Differente header element image pour mobile et desktop (classe: custom-background)

@media(min-width: 769px) {
    .custom-background.page-hero {
        background-image: url(votreimage.jpg);
    }
}

Crédit Mike Oliver et l’équipe de GeneratePress

J’ai fondé ECOMTURBO en 2016 et aidé des centaines d’e-commerçants dans leurs aventures en ligne. Entrepreneur depuis 16 ans, je suis obnubilé par le marketing, la SEO et l’optimisation de la vitesse des sites Web. Découvrez mon background et mon aventure entrepreneuriale.



Laisser un commentaire

 

© 2016 - 2021 ECOMTURBO