Luxeritas Child-thema (style.css) aanpassen
Luxeritas is een gratis en zeer functioneel Wordpress-thema voor thuisgebruik.In deze blog zal ik de aangepaste inhoud van style.css van het child-thema introduceren.
Hoe Luxeritas child-thema te bewerken
Er zijn twee manieren om style.css te bewerken
1. Voer rechtstreeks in "Style Sheet: style.css" in
Beheerscherm: Luxeritas → Bewerk child-thema → Selecteer "style.css" -tag
Voer de code in achter "/ * Schrijf de stijl voor het child-thema volgens uw voorkeur. * /".
2.Voer "Aanvullende CSS" in om het uiterlijk aan te passen
Beheerscherm: Luxeritas → Aanpassen (uiterlijk) → Aanvullende CSS
We raden dit aan omdat u het resultaat kunt zien van het weergeven van de code terwijl u de code invoert.
Aangepaste style.css
Vetgedrukte sitetitel
Voor degenen die denken dat de standaardtekens een beetje mager zijn en de indruk mager.
/ * Sitetitel * / #sitename {font-weight: bold;}
Voeg een schaduw toe onder het stripmenu om het op een materiaal te laten lijken
Er is een schaduw op dit ...
Dit zal het zijn.Het is een subtiel verschil, maar de sfeer van de site verandert onverwachts.
/ * Schaduw onder globale navigatie * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Plaats de muisaanwijzer op een kleur die niet kan worden ingesteld via aanpassing van het uiterlijk
De standaard hover-kleur voor artikeltitels en vorige en volgende artikelen is rood.Ik denk niet dat er items waren die rechtstreeks konden worden gewijzigd door de aanpassing van het uiterlijk.
kleur: U kunt deze wijzigen door deze in de code van uw favoriete kleur hieronder in te voeren.Trouwens, "# 00b22f" is lichtgroen.De titel van het artikel is ook vetgedrukt om het leesbaarder te maken.
/ * Artikeltitel * / .entry-title a: hover {color: # 00b22f;} .entry-title {font-weight: bold;} / * Vorige en volgende artikelen * / #pnavi a: hover {color: # 00b22f }
Blogkaart voor materiaalontwerp
Zo heb je een blogkaart.Verplaats de cursor om het luchtig te maken.
/ * Blogkaartontwerp * / a.blogcard-href {padding: 0px; min-hoogte: 102px; box-shadow: 0 2px 5px rgba (0, 0, 0, .13); overgang: .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: geen} 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;} scherm alleen @ media en (max-breedte: 430px) {p.blogcard-link {display: none;}}
Ik verwees naar de volgende pagina.
Pas uw Luxeritas-blogkaart aan om hem te laten zweven als een SANGO
Verander paginakleur
Net als de titel van het artikel bleef het rood en kon het niet worden gewijzigd door het aanpassen van het uiterlijk. Het wordt grijs weergegeven met "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
Als je het verandert, ziet het er zo uit ↓
Wijziging van het ontwerp van de tagwolk
/ * Ontwerpwijziging tagwolk * / .tagcloud a {border-radius: 3px; / * Rond de hoeken * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px}
Ik heb de hoeken van de tag afgerond om de lijndikte te verkleinen.
Marges verwijderd onder de titel van het artikel
Toen ik een Google Adsense-advertentie onder de titel van het artikel plaatste, was ik bang dat de regelafstand voor en na de advertentie groot leek. Nadat ik de marge had weggenomen, kon ik hem zo compact mogelijk installeren.
/ * Meta-informatie (bijgewerkt) Ondermarge verwijderen * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Marge boven en onder artikel * / .post- title-upper, verwijderen. post-title-under {margin-bottom: 1px;}
Dat is het.