Share
Vad du ska skapaOm du följde min tidigare handledning har du nu ett tema på din webbplats (eller ett barntema) som innehåller länkar till dina sidor på toppnivå i sidhuvudet.
Jag skapade ett barntema på tjugosexton, och så här ser mina länkar ut just nu:
I denna handledning visar jag dig hur du lägger till några CSS i ditt tema för att göra dessa länkar lite trevligare. Låt oss börja med att bli av med kulorna och lägga till flottor.
Öppna ditt temas stilark. Om du skapade ett barntema blir det tomt, men om du arbetar med ditt eget tema föreslår jag att du lägger till den här stilen i den del av ditt stilark där du håller styling för rubriken.
Ett sammandrag på koden som matar ut sidlänkarna (om det finns sidor att länka till):
Det betyder att vi riktar in en ul element med top-level-sida-länkar klass och inom det, li element med sid länk klass följt av en element (dvs länkar).
Låt oss först ta bort kulorna. Lägg till detta:
ul.top-nivå-sidlänkar liststil: none;
Låt oss sedan bli av med polstret på varje listobjekt och lägga till en margin-vänster deklaration:
ul.top-nivå-sidlänkar list-style-type: none; marginal-vänster: 0;
Uppdatera nu din skärm och du ser att listan styling är borta:
Därefter får vi få de länkarna som flyter bredvid varandra. Lägg till detta i ditt stilark:
.sidlänk float: left;
Nu kommer dina länkar att vara bredvid varandra:
Låt oss fortsätta att göra länkarna lite mer som knappar.
För att få våra länkar att se ut som knappar lägger vi till en marginal, vaddering och en bakgrund till länkarna.
Lägg till detta i ditt stilark:
.sidlänk en marginal-höger: 10px; vaddering: 0,5em 10px; bakgrundsfärg: # 454545;
Observera att jag bara har använt en marginal till höger eftersom jag vill att vänster knapp ska röra sig till vänster om sidan.
När du uppdaterar din skärm kommer dina knappar att se ut som knappliknande:
De ser mycket bättre ut men behöver lite finess. Låt oss redigera färgen på texten och bakgrunden så att när någon hänger över knappen ändras den i färg.
Låt oss nu göra dessa knappar lite mer attraktiva.
Lägg till ytterligare två anmälningsblock i ditt stilark, och se till att du lägger till dessa efter deklarationsblocket för länkar som du just lagt till:
.sida-länk a: länk, .sida-länk a: besökte färg: #fff; text-dekoration: ingen; .page-link a: svävar, .sida-länk a: aktiv bakgrundsfärg: #dddddd; färg: # 454545; text-dekoration: ingen;
Detta ändrar färgen på länkarna, tar bort underlaget och ändrar färgen när någon svänger över en länk eller den är aktiv.
Låt oss se hur det här ser ut på sidan:
Och när jag svävar över en länk:
Mycket bättre!
I denna tvådelade handledning har du lärt dig hur du skapar länkar till sidans översta sidor som genereras automatiskt och sedan utformar de länkarna med CSS så att de ser ut som knappar.
Detta ger dig ett bra och framträdande sätt att låta dina besökare gå direkt till sidorna, och det kommer att vara användbart om du har sidor på toppnivå du vill se till att många besökare kan komma åt.
Accentsconagua