Share
Ce veți creaDacă ați urmat tutorialul meu anterior, veți avea acum o temă pe site-ul dvs. (sau o temă copil) care include linkuri către paginile dvs. de nivel superior din antetul site-ului.
Am creat o temă de copil de douăzeci și șaisprezece ani, și așa mi se par linkurile mele acum:
În acest tutorial vă voi arăta cum să adăugați câteva CSS la tema dvs. pentru a face aceste link-uri un pic mai frumoase. Să începem prin a scăpa de gloanțe și de a adăuga flotoare.
Deschideți foaia de stil a temei. Dacă ați creat o temă pentru copii, acesta va fi gol, dar dacă lucrați cu propria temă, vă sugerăm să adăugați acest stil în partea din foaia de stil, unde păstrați stilul pentru antetul.
O recapitulare a codului care afișează link-urile paginii (dacă există pagini la care se face legătura):
Asta înseamnă că țintim a ul element cu De nivel superior-page-link-uri clasă și în cadrul acesteia, Li elemente cu link-ul paginii clasă urmată de A elemente (adică legături).
Mai întâi, să eliminăm gloanțele. Adaugă asta:
ul.top-nivel-pagini-link-uri list-style: none;
Apoi, să scăpăm de umplutura pe fiecare articol din listă și să adăugăm o -Marginea din stânga declaraţie:
ul.top-nivel-pagini-link-uri list-style-type: none; margin-stânga: 0;
Acum reîmprospătați ecranul și veți vedea că stilul listei a dispărut:
Înainte de a lăsa aceste linkuri să plutească una lângă cealaltă. Adăugați acest lucru în foaia dvs. de stil:
.page-link float: left;
Acum legăturile dvs. vor fi una lângă alta:
Apoi, hai să mergem la a face link-urile să arate mai mult ca butoanele.
Pentru a face legăturile noastre să arate ca niște butoane, vom adăuga o marjă, umplutură și un fundal la link-uri.
Adăugați acest lucru în foaia dvs. de stil:
.pagina-link a marginea-dreapta: 10px; padding: 0.5m 10px; fundal-culoare: # 454545;
Rețineți că am folosit doar o margine în partea dreaptă, deoarece vreau să fie aliniat la stânga paginii butonul din stânga.
Când actualizați ecranul, butoanele dvs. vor arăta mai mult ca butoanele:
Se uită mult mai bine, dar au nevoie de puțină fină. Să editați culoarea textului și a fundalului astfel încât atunci când cineva se deplasează peste buton, se schimbă culoarea.
Acum, să facem acele butoane puțin mai atractive.
Adăugați alte două blocuri de declarații în foaia de stil, asigurându-vă că le adăugați după blocul de declarații pentru linkurile pe care tocmai le-ați adăugat:
.pagina-link a: link, .page-link a: vizitat culoare: #fff; text-decoration: nici unul; .page-link a: hover, .page-link a: activ background-color: #dddddd; culoare: # 454545; text-decoration: nici unul;
Aceasta schimbă culoarea legăturilor, elimină sublinierea și modifică culoarea când cineva se așează pe o legătură sau este activă.
Să vedem cum arată aceasta pe pagină:
Și când trec peste un link:
Mult mai bine!
În acest tutorial în două părți ați învățat cum să creați linkuri către paginile de nivel superior ale site-ului dvs. care sunt generate automat și apoi să le stylizați folosind CSS, astfel încât acestea să arate ca butoane.
Aceasta vă oferă o modalitate frumoasă și proeminentă de a vă permite vizitatorilor să meargă direct la acele pagini și va fi util dacă aveți pagini de nivel superior pe care doriți să le asigurați că mulți vizitatori pot accesa.
Accentsconagua