Personnalisation du thème Luxeritas Child (style.css)
Luxeritas est un thème Wordpress gratuit et hautement fonctionnel.Dans ce blog, je présenterai le contenu personnalisé de style.css du thème enfant.
Comment modifier le thème enfant Luxeritas
Il existe deux façons de modifier style.css
1. Entrez directement dans "Feuille de style: style.css"
Écran de gestion: Luxeritas → Modifier le thème enfant → Sélectionnez la balise "style.css"
Entrez le code après "/ * Veuillez écrire le style du thème enfant selon votre préférence. * /".
2.Entrez dans "CSS supplémentaire" pour la personnalisation de l'apparence
Écran de gestion: Luxeritas → Personnaliser (apparence) → CSS supplémentaire
Nous vous le recommandons car vous pouvez voir le résultat de refléter le code en même temps que vous entrez le code.
Style.css personnalisé
Titre du site en gras
Pour ceux qui pensent que les caractères standards sont un peu fins et que l'impression est mince.
/ * Titre du site * / #sitename {font-weight: bold;}
Ajoutez une ombre sous le menu de la bande pour la faire ressembler à un matériau
Il y a une ombre là-dessus ...
Ce sera ça.C'est une différence subtile, mais l'atmosphère du site change de façon inattendue.
/ * Ombre sous la navigation globale * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Couleur de survol qui ne peut pas être définie à partir de la personnalisation de l'apparence
La couleur de survol standard pour les titres d'articles et les articles précédents et suivants est le rouge.Je ne pense pas qu'il y ait eu d'éléments à modifier directement à partir de la personnalisation de l'apparence.
couleur: Vous pouvez le changer en le mettant dans le code de votre couleur préférée ci-dessous.Au fait, "# 00b22f" est vert clair.En outre, le titre de l'article est en gras pour le rendre plus facile à lire.
/ * Titre de l'article * / .entry-title a: hover {color: # 00b22f;} .entry-title {font-weight: bold;} / * Articles précédents et suivants * / #pnavi a: hover {color: # 00b22f }
Carte de blog pour la conception matérielle
Vous aurez une carte de blog comme celle-ci.Déplacez le curseur pour le rendre moelleux.
/ * Conception de la carte de blog * / a.blogcard-href {remplissage: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba (0, 0, 0, .13); transition: .3s;} a. blogcard-href: hover {box-shadow: 0 4px 20px rgba (0,0,0,0.25); transform: translateY (-5px);} .blogcard-img {margin: 0px 10px 0 0; border: none} p .blog-card-title {margin: 5px 5px 5px 5px;} p.blog-card-desc {display: none;} p.blogcard-link {clear: none; margin: 5px 0 5px 5px;} @media uniquement écran et (max-width: 430px) {p.blogcard-link {display: none;}}
Je me suis référé à la page suivante.
Personnalisez votre carte de blog Luxeritas pour la faire flotter comme un SANGO
Changer la couleur de la mise en page
Comme le titre de l'article, il est resté rouge et ne pouvait pas être modifié par rapport à la personnalisation de l'apparence. Il est grisé avec "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
Quand vous le changez, ça ressemble à ça ↓
Modification de la conception du nuage de tags
/ * Modification de la conception du nuage de balises * / .tagcloud a {border-radius: 3px; / * Arrondir les coins * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px}
J'ai arrondi les coins de l'étiquette pour réduire la largeur de la ligne.
Marges supprimées sous le titre de l'article
Lorsque j'ai mis une annonce google adsense sous le titre de l'article, je craignais que l'espacement des lignes avant et après l'annonce ne soit trop important. Après avoir supprimé la marge, j'ai pu l'installer de manière aussi compacte que possible.
/ * Meta Information (mise à jour) Supprimer la marge inférieure * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Supprimer la marge au-dessus et en dessous de l'article * / .post- title-upper,. post-title-under {margin-bottom: 1px;}
C'est ça.