WHO IS THE GIRL WITH THE NERDY MIND? #4 - .date-header

Una rubrica dedicata ... beh, in questi post vi parlerò un di tutto:
serie tv, film, musica, applicazioni che dovete assolutamente avere,
siti internet interessanti. In poche parole, tutto quello che fa
parte dell'universo nerd. 

Allora allora, oggi ho deciso di fare un tentativo e pubblicare il primo post dedicato al mondo html/css. È un mondo, anzi un universo molto vasto quindi pensavo di suddividerlo in tanti "piccoli" post e, ogni settimana, vi mostrerò le ultime scoperte fatte.

Soggetto di questo primo post è l'intestazione data (.date-header). 

Prima di tutto però, anche se molti di voi già lo sanno, questi sono i due "luoghi" dove potete aggiungere i nuovi codici:

1. Modello → Personalizza → Avanzato → Aggiungi CSS 

2. Modello → Modifica HTML 

Il modo più semplice, ovviamente, è il primo: dovete semplicemente fare copia/incolla e salvare.

Per qualche strana ragione, però, io preferisco lavorare direttamente sul "foglio" html. Sembra difficile ma i creatori ci hanno lasciato alcune note e suggerimenti dove possiamo aggiungere, in modo pulito e ordinato, i nuovi codici. 

In quest'ultimo caso, dovete inserire tutto quello che vi piace all'interno di <b:skin>...</b:skin>. Riuscite a trovarlo? È sempre all'inizio della pagina e, se ci cliccate sopra, vi si aprirà "l'universo css".  

Se provate a scendere troverete delle piccole sezioni (es. /* Header ----------------------------------------------- */, /* Headings ----------------------------------------------- */, /* Posts ----------------------------------------------- */, ecc ecc.) e sono proprio queste che ci aiutano a rendere il tutto più ordinato: se vogliamo abbellire i post dobbiamo semplicemente aggiungere i nuovi codici nella sezione  /* Posts ----------------------------------------------- */. In questo modo, inoltre, ci sarà più semplice individuare tutto quello che abbiamo inserito. Inoltre, anche voi potete utilizzare questo metodo: se aggiungete un codice e volete ricordarvi di cosa si tratta, basta aggiungere -  /*.......*/  e, all'interno, potete scrivere tutto quello che considerate utile (codice che riguarda il titolo, la data, le citazioni, e così via).

Ritorniamo, però, all'argomento principale: la data. Qui sotto ho inserito tre diversi codici che potete utilizzare per modificare questo elemento. 

*.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:*

PRIMO ESEMPIO

.date-header span {
     background-color: transparent;
     color: #C51E1E;
     padding: 0.4em;
     letter-spacing: 2.5px;
     margin: inherit;
}
.date-header {
     font: normal bold 12px Indie Flower;
     font-weight: 300;
    text-align: center;
}

1. background-color = è, ovviamente, il colore dello sfondo. In questo caso deve rimanere trasparente quindi "adottare" il colore del vostro blog;
2. color = è il colore del font;
3. letter-spacing = è lo spazio tra le lettere;
4. font = è il testo. Potete scegliere voi la grandezza, lo stile. A volte, però, la piattaforma non legge alcuni font. In questo caso potete fare un elenco dei vostri preferiti (Indie Flower, Ariel, Giorgia); la prima scelta sarà Indie Flower, se non dovesse funzionare il blog proverà con Ariel e così via. 
5. text-align = è dove volete piazzare il testo: center, right, left (al centro, a destra, a sinistra).

*.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:*

SECONDO ESEMPIO

h2.date-header span {
    border: 0.33em solid #E08DAC;
    padding: 10px;
    background: #ffffff;
}
h2.date-header {
    margin: .5em 0 0.25em;
    font: normal normal 78% Georgia, Arial, Sans-serif;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1em;
    text-align: center;
    padding: 10px;
    padding-bottom: 40px; important!

}

1.border = è la cornice mentre 0.33em è lo spessore e se provate a sostituirlo con 0.50em, ad esempio, lo spessore della cornice aumenterà;
2. padding: 10px; = è lo spazio tra la cornice e la data; anche in questo caso se provate a scrivere 20px lo spazio aumenterà;
3. background = come al solito, potete scegliere voi il colore dello sfondo o mettere direttamente "transparent"
4.  padding-bottom: 40px; important! = il padding-bottom è lo spazio che c'è tra la data e il titolo del post. Potete non aggiungerlo ma nel mio caso è indispensabile. A volte il blog non dà ascolto a quello che scriviamo ed è per questo che è utile utilizzare important!.

*.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:*

TERZO ESEMPIO

h2.date-header {
    margin: 0px;
    color: #000000;
    font: normal normal 12px 'Lato', serif;
    text-align: center;
    text-transform: uppercase;
    padding: 8px;
    background: url(http://i64.tinypic.com/23waf85.png) center no-repeat;
    letter-spacing: 2px;
}

In quest'ultimo caso, la cosa più interessante è inserire un'immagine di sfondo {background: url(http://i64.tinypic.com/23waf85.png) center no-repeat;} da noi scelta dietro l'intestazione data; un'immagine centrale che non deve ripetersi. Per il resto, invece, potete dare libero sfogo alla vostra creatività. 

ps. tra le parentesi tonde inserite il link della vostra immagine. 

*.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:*

E, questo è tutto...

Spero di esservi stata almeno un pochino utile. Ricordate che la cosa più importante è sperimentare, fare diversi tentativi, essere creativi. 

Dopo questo lunghissimo e stressante post io vi saluto e vado a riposarmi. 

Adios!