Anpassung des Luxeritas Child-Themas (style.css)
Luxeritas ist ein kostenloses und hochfunktionales WordPress-Theme, das in Japan hergestellt wird.In diesem Blog werde ich die Anpassungsinhalte von style.css des untergeordneten Themas vorstellen.
So bearbeiten Sie das untergeordnete Luxeritas-Theme
Es gibt zwei Möglichkeiten, style.css zu bearbeiten
1. Geben Sie direkt in „Style Sheet: style.css“ ein.
Verwaltungsbildschirm: Luxeritas → Untergeordnetes Thema bearbeiten → Tag „style.css“ auswählen
Schreiben Sie den Code nach „/* Schreiben Sie unten den Stil für das untergeordnete Thema nach Ihren Wünschen. */“.
2.Eingabe in „Zusätzliches CSS“ zur Anpassung des Erscheinungsbilds
Verwaltungsbildschirm: Luxeritas → Anpassen (Erscheinungsbild) → Zusätzliches CSS
Dies wird empfohlen, da Sie das Ergebnis der Codereflexion gleichzeitig mit der Codeeingabe sehen können.
Angepasste Inhalte von style.css
Fettgedruckter Seitentitel
Für diejenigen, die sagen, dass der Standardtext etwas dünn ist und wenig Eindruck hinterlässt.
/* Seitentitel */ #sitename { Font-Weight: Bold;}
Fügen Sie am unteren Rand des Streifenmenüs einen Schatten hinzu, damit es wie ein Material aussieht
Es hat einen Schatten...
Es wird das sein.Es ist ein subtiler Unterschied, aber die Atmosphäre der Website verändert sich unerwartet.
/*shadow unter globaler Navigation*/ #nav { box-shadow: 0 2px 10px rgba(0,0,0,.2) }
Hover-Farbe, die nicht über die Anpassung des Erscheinungsbilds festgelegt werden kann
Die Standard-Hover-Farbe für Artikeltitel und Artikel davor und danach ist Rot.Ich glaube nicht, dass es einen Gegenstand gab, der direkt durch die Anpassung des Erscheinungsbilds geändert werden konnte.
Farbe: Sie können sie ändern, indem Sie unten Ihren bevorzugten Farbcode eingeben.„#00b22f“ ist übrigens hellgrün.Außerdem ist der Titel des Artikels fett gedruckt, um die Lesbarkeit zu erleichtern.
/* Artikeltitel */ .entry-title a:hover{color:#00b22f;} .entry-title {font-weight: Bold;} /* Vor und nach Artikeln */ #pnavi a:hover{color:#00b22f }
Verwandeln Sie Ihre Blogkarte in Materialdesign
Eine Blogkarte wie diese wird fertiggestellt.Wenn man mit der Maus darüber fährt, wird es flauschig.
/* Blogkarten-Design */ a.blogcard-href { padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba(0, 0, 0, .13); Transition: .3s; .blogcard- href:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: translatorY(-5px); } .blogcard-img { margin: 0px 10px 0 0; 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; screen and (max-width: 430px){ p .blogcard-link { display: none;
Ich habe die folgende Seite als Referenz verwendet.
Passen Sie Luxeritas-Blogkarten so an, dass sie wie SANGO schweben
Paginierungsfarbe ändern
Ebenso wie der Artikeltitel blieb er rot und konnte durch Anpassung des Erscheinungsbilds nicht geändert werden. „#999999“ macht es grau.
.pagination>.active>span, .pagination>li>a:hover{ Hintergrund: keiner; Hintergrundfarbe: #999999;
So sieht es nach dem Wechsel aus
Neugestaltung der Tag-Cloud
/* Neugestaltung der Tag-Cloud */ .tagcloud a { border-radius: 3px; /* Abgerundete Ecken */ padding-bottom: 1px; padding-left: 6px; padding-right: 3px; }
Ich habe die Ecken des Etiketts abgerundet und die Linienbreite verringert.
Entfernen Sie den Abstand unter dem Artikeltitel
Als ich die Google Adsense-Werbung unter dem Artikeltitel platzierte, hatte ich Bedenken, dass der Zeilenabstand vor und nach der Werbung groß zu sein schien. Nachdem ich den Rand entfernt hatte, konnte ich es so kompakt wie möglich installieren.
/* Metainformationen (aktualisiert) Unteren Rand entfernen */ .meta, .post .meta { padding: 5px 0; margin-bottom: 0px; } /* Rand über und unter dem Artikel entfernen */ .post-title-upper, . post-title-under { margin-bottom: 1px;
Das ist es.