Share
Cosa starai creandoSe hai seguito il mio tutorial precedente, ora avrai un tema sul tuo sito (o un tema secondario) che include collegamenti alle pagine di livello superiore nell'intestazione del sito.
Ho creato un tema figlio di ventisei anni, e questo è il modo in cui i miei link stanno guardando in questo momento:
In questo tutorial ti mostrerò come aggiungere alcuni CSS al tuo tema per rendere quei collegamenti un po 'più belli. Iniziamo liberando i proiettili e aggiungendo i galleggianti.
Apri il foglio di stile del tema. Se hai creato un tema figlio sarà vuoto, ma se stai lavorando con il tuo tema ti suggerisco di aggiungere questo stile nella parte del tuo foglio di stile in cui mantieni lo styling per l'intestazione.
Un riepilogo sul codice che genera i collegamenti alle pagine (se ci sono pagine a cui collegarsi):
Questo significa che stiamo prendendo di mira a ul elemento con il top-level-pagina-link classe e al suo interno, Li elementi con il Pagina-link classe seguita da un elementi (cioè collegamenti).
Per prima cosa, rimuoviamo i proiettili. Aggiungi questo:
ul.top-level-page-links list-style: none;
Successivamente, eliminiamo il riempimento su ogni elemento dell'elenco e aggiungiamo a margin-left dichiarazione:
ul.top-level-page-links list-style-type: none; margin-left: 0;
Ora aggiorna lo schermo e vedrai che lo stile della lista è sparito:
Quindi facciamo in modo che quei collegamenti si muovano uno accanto all'altro. Aggiungi questo al tuo foglio di stile:
.collegamento alla pagina float: left;
Ora i tuoi collegamenti saranno tutti uno accanto all'altro:
Successivamente, passiamo a rendere i collegamenti un po 'più simili ai pulsanti.
Per rendere i collegamenti simili ai pulsanti, aggiungeremo un margine, un riempimento e uno sfondo ai collegamenti.
Aggiungi questo al tuo foglio di stile:
.link alla pagina margin-right: 10px; imbottitura: 0,5em 10px; background-color: # 454545;
Nota che ho usato solo un margine a destra perché voglio che il pulsante a sinistra sia allineato a sinistra della pagina.
Quando aggiorni lo schermo, i pulsanti appariranno più simili a un pulsante:
Sembrano molto meglio ma hanno bisogno di un po 'di finezza. Modifichiamo il colore del testo e dello sfondo in modo che quando qualcuno si posiziona sopra il pulsante, cambia colore.
Ora rendiamo questi pulsanti un po 'più attraenti.
Aggiungi altri due blocchi di dichiarazione al foglio di stile, assicurandoti di aggiungerli dopo il blocco di dichiarazione per i collegamenti che hai appena aggiunto:
.link alla pagina a: link, .page-link a: visited color: #fff; decorazione del testo: nessuna; .page-link a: hover, .page-link a: active background-color: #dddddd; colore: # 454545; decorazione del testo: nessuna;
Questo cambia il colore dei collegamenti, rimuove la sottolineatura e cambia il colore quando qualcuno passa sopra un link o è attivo.
Vediamo come appare sulla pagina:
E quando passo il mouse su un link:
Molto meglio!
In questo tutorial in due parti, hai imparato come creare collegamenti alle pagine di livello superiore del tuo sito che vengono generati automaticamente, e quindi per modellare tali collegamenti usando CSS in modo che assomiglino ai pulsanti.
Questo ti dà un modo piacevole e preminente per consentire ai tuoi visitatori di accedere direttamente a quelle pagine e sarà utile se hai pagine di livello superiore a cui vuoi garantire l'accesso a molti visitatori.
Accentsconagua