Share
Hva du skal skapeHvis du fulgte min tidligere opplæring, har du nå et tema på nettstedet ditt (eller et barnemne) som inneholder koblinger til toppsidene i sidens overskrift.
Jeg opprettet et barn tema på tjue seksten, og slik ser linkene mine akkurat nå:
I denne veiledningen vil jeg vise deg hvordan du legger til noen CSS i temaet ditt for å gjøre disse linkene litt bedre. La oss begynne med å kvitte seg med kulene og legge til flyter.
Åpne temaets stilark. Hvis du opprettet et barnemne, blir det tomt, men hvis du jobber med ditt eget tema, foreslår jeg at du legger til denne stylingen i den delen av stilarket der du holder styling for overskriften.
En omtale på koden som utgir sidelinkene (hvis det er sider å koble til):
Dette betyr at vi målretter mot en ul element med top-level-page-lenker klasse og innenfor det, li elementer med side-link klasse etterfulgt av en elementer (dvs. koblinger).
Først, la oss fjerne kulene. Legg til dette:
ul.top-level-sidelinker listestil: none;
Neste, la oss kvitte seg med polstring på hvert liste element og legge til en margin-left erklæring:
ul.top-level-sidelinker listestil-type: none; margin-venstre: 0;
Oppdater nå skjermen, og du vil se at listestyling er borte:
Neste, la oss få de linkene som flyter ved siden av hverandre. Legg dette til stilarket ditt:
.sidelink float: left;
Nå vil linkene dine være ved siden av hverandre:
Neste, la oss gå videre for å få linkene til å se litt mer ut som knapper.
For å få linkene våre til å se ut som knapper, legger vi til en margin, polstring og en bakgrunn til koblingene.
Legg dette til stilarket ditt:
.side-link a margin-right: 10px; polstring: 0.5em 10px; bakgrunnsfarge: # 454545;
Merk at jeg bare har brukt en margin til høyre som jeg vil at venstre knapp skal justere til venstre for siden.
Når du oppdaterer skjermen, vil knappene dine se flere knapper som:
De ser mye bedre ut, men trenger litt finesse. La oss redigere fargen på teksten og bakgrunnen slik at når noen svinger over knappen, endrer den farge.
La oss nå gjøre disse knappene litt mer attraktive.
Legg til to flere deklarasjonsblokker i stilarket ditt, sørg for at du legger til disse etter deklarasjonsblokken for koblinger du nettopp har lagt til:
.side-link a: link, .page-link a: besøkt farge: #fff; tekst-dekorasjon: ingen; .page-link a: svever, .page-link a: active background-color: #dddddd; farge: # 454545; tekst-dekorasjon: ingen;
Dette endrer fargen på koblingene, fjerner understreken, og endrer fargen når noen svinger over en kobling eller den er aktiv.
La oss se hvordan dette ser ut på siden:
Og når jeg svinger over en lenke:
Mye bedre!
I denne todelte opplæringen har du lært hvordan du lager koblinger til nettstedets toppnivå sider som automatisk genereres, og deretter utformer disse koblingene ved hjelp av CSS slik at de ser ut som knapper.
Dette gir deg en fin og fremtredende måte å la dine besøkende gå direkte til sidene, og det vil være nyttig hvis du har toppnivå sider du vil sikre at mange besøkende kan få tilgang til.
Accentsconagua