Share
Wat je gaat creërenAls je mijn vorige zelfstudie hebt gevolgd, heb je nu een thema op je site (of een kindthema) met links naar je hoofdpagina's in de sitekop.
Ik heb een kindthema gemaakt van twintig zestien en zo zien mijn links er nu uit:
In deze tutorial laat ik je zien hoe je CSS aan je thema kunt toevoegen om die links een beetje mooier te maken. Laten we beginnen met het wegwerken van de kogels en het toevoegen van drijvers.
Open de stylesheet van uw thema. Als je een kindthema hebt gemaakt, is het leeg, maar als je met je eigen thema werkt, raad ik je aan deze stijl toe te voegen aan het gedeelte van je stylesheet waar je de stijl blijft stylen voor de kop.
Een samenvatting van de code die de paginakoppelingen uitvoert (als er pagina's zijn om naar te linken):
Dit betekent dat we ons richten op een ul element met de top-level-page-koppelingen klasse en daarbinnen, li elementen met de pagina link les gevolgd door een elementen (d.w.z. links).
Laten we eerst de kogels verwijderen. Voeg dit toe:
ul.top-level-page-links lijststijl: geen;
Laten we vervolgens de opvulling van elk lijstitem verwijderen en een toevoegen -Marge verklaring:
ul.top-level-page-links list-style-type: none; marge links: 0;
Vernieuw nu je scherm en je zult zien dat de lijststyling verdwenen is:
Laten we vervolgens die links naast elkaar laten zweven. Voeg dit toe aan je stylesheet:
.page-link float: left;
Nu zijn uw links allemaal naast elkaar:
Laten we vervolgens verder gaan met het laten lijken of de links een beetje meer op knoppen lijken.
Om onze links op knoppen te laten lijken, voegen we een marge, opvulling en achtergrondinformatie toe aan de links.
Voeg dit toe aan je stylesheet:
.page-link a margin-right: 10px; opvulling: 0.5em 10px; achtergrondkleur: # 454545;
Merk op dat ik alleen een marge aan de rechterkant heb gebruikt, omdat ik wil dat de linker knop links naast de pagina wordt uitgelijnd.
Wanneer u uw scherm ververst, zien uw knoppen er meer knopachtig uit:
Ze zien er veel beter uit, maar hebben een beetje finesse nodig. Laten we de kleur van de tekst en achtergrond aanpassen, zodat wanneer iemand boven de knop zweeft, deze van kleur verandert.
Laten we nu die knoppen een beetje aantrekkelijker maken.
Voeg nog twee declaratieblokken toe aan uw stylesheet, en zorg ervoor dat u deze na het declaratieblok toevoegt voor links die u zojuist hebt toegevoegd:
.pagina-link a: link, .page-link a: visited color: #fff; tekstdecoratie: geen; .page-link a: hover, .page-link a: active background-color: #dddddd; kleur: # 454545; tekstdecoratie: geen;
Hierdoor verandert de kleur van de links, wordt de onderstreping verwijderd en wordt de kleur gewijzigd wanneer iemand over een link zweeft of actief is.
Laten we eens kijken hoe dit eruit ziet op de pagina:
En als ik over een link beweeg:
Veel beter!
In deze tweedelige zelfstudie heb je geleerd hoe je links naar de hoogste pagina's van je site kunt maken die automatisch worden gegenereerd, en die links vervolgens met CSS kunt stylen zodat ze op knoppen lijken.
Dit geeft u een mooie, opvallende manier om uw bezoekers direct naar die pagina's te laten gaan, en is handig als u pagina's op het hoogste niveau heeft waarvan u wilt dat er voldoende bezoekers toegang hebben..
Accentsconagua