Librairie CSS pour GeneratePress

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; 
}

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;
}

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

Laisser un commentaire