[RISOLTO] Modificare titoli H1 tramite CSS

[maxime]

Salve ragazzi. Buttandomi un po' (proprio un minimo) nel SEO ho capito l'importanza dei tag H1; mi sono reso conto che il template che sto utilizzando per il mio sito, utilizza tag H2 per i titoli degli articoli.
Ho letto varie guide per fare l'override in modo che i titoli siano assegnati al tag H1 anziché H2, ma mi rimane il problema che nel mio template i titoli H1 utilizzano uno stile (font, dimensione, colore) che vorrei cambiare. Siccome non so nulla di CSS, volevo sapere se c'è qualche anima pia che mi dice dove poter intervenire per assegnare ai tag H1 il font, la dimensione ed il colore che voglio io.
P.S.: come faccio per vedere quale font, dimensione e colore è attualmente assegnato ai tag H2 nel mio template?
Grazie per l'aiuto!  

[adottauncane]

Ciao maxime,
utilizza Firebug per Firefox che ti èermette di visualizzare i css del template e dove vengono scritti. Se hai bisogno di una mano metti un link al sito.

[maxime]

Ciao maxime,
utilizza Firebug per Firefox che ti èermette di visualizzare i css del template e dove vengono scritti. Se hai bisogno di una mano metti un link al sito.

Grazie 1000. Firebug lo uso, ma solo per determinate cose, non sono capace di utilizzarlo per quello che chiedo in questa dsicussione.
Il sito lo sto lavorando ancora in locale, ma l'ho uploadato su un server di appoggio, così magari mi puoi dare qualche indicazione. Ricapitolando, i titoli degli articoli vorrei fossero in H1, ma nel CSS h1 è un font Arial di colore Nero. Io vorrei modificare il CSS in modo che i titoli H1 siano esteticamente uguali agli H2.
Ari Grazie 1000!
LINK

[tonicopi]

Ciao maxime, apri questo file:
http://www.sysformdata.it/innova/templates/shape5_vertex/css/template.css
e circa a riga 17 troverai le regole per l'H1 e l'H2:

Codice: [Seleziona]

h1 {font-size:1.7em;font-weight:normal;}h2 {font-size:1.4em;font-weight:normal;margin-bottom:18px;
}Se vuoi applicare le stesse regole dell'h2 all'h1 non devi far altro che cancellare la prima regola e riscrivere la seconda così:

Codice: [Seleziona]

h1, h2 { font-size:1.4em; font-weight:normal; margin-bottom:18px;
 }La brava, buona e dolce Carla non me ne vorrà se sono arrivato prima... 

[maxime]

Ciao maxime, apri questo file:
http://www.sysformdata.it/innova/templates/shape5_vertex/css/template.css
e circa a riga 17 troverai le regole per l'H1 e l'H2:

Codice: [Seleziona]

h1 {font-size:1.7em;font-weight:normal;}h2 {font-size:1.4em;font-weight:normal;margin-bottom:18px;
}Se vuoi applicare le stesse regole dell'h2 all'h1 non devi far altro che cancellare la prima regola e riscrivere la seconda così:

Codice: [Seleziona]

h1, h2 { font-size:1.4em; font-weight:normal; margin-bottom:18px;
 }La brava, buona e dolce Carla non me ne vorrà se sono arrivato prima... 

Ciao Tonicopi e grazie dell'intervento. Quei parametri li avevo già cambiati anche io, ma purtroppo non si occupano ne' del font utilizzato, ne' del colore.Se ad esempio con Firebug fai l'analisi del titolo "Information Technology" (menù servizi) ti accorgerai che font-family (Oswald) e color (#73A0CF) fanno riferimento a due righe (405 e 389) ma non riesco a capire di quale file (vedi immagine qui sotto). Suggerimenti?


[allegato eliminato automaticamente dopo un anno]

[maxime]

C'è quel #2 che non so a cosa faccia riferimento...

[adottauncane]

@tonicopi: ma figurati... Sei il mio Maestro. 

@maxime,
hai delle pagine .php che formano il css on line, quindi non trovi il file css perché stampato in remoto.

Per ovviare puoi correggere il .php oppure scrivere la regola e aggiungerla al fonto del file template.css aggiungento !important. Ad esempio (il titolo che dici è in h3):

Codice: [Seleziona]

.s5_mod_h3, .module_round_box .s5_h3_first {
font-family:Georgia !important;
font-size:18px;
color:#000000 !important;
}
Questa parte

Codice: [Seleziona]

.module_round_box .s5_h3_firstè relativa alla prima parte del titolo.

Però, se vuoi rendere gli h2 o gli h3 degli h1 devi fare l'ovverride. probabilmente direttamente nella cartella html del template ci sarà già il file che lo fa per renderli bicolore.
Altrimenti solo con il css rimangono graficamente uguali ma l'importanza per Google non cambia.

tonicopi, correggimi se sbaglio. 

[maxime]

@tonicopi: ma figurati... Sei il mio Maestro. 

@maxime,
hai delle pagine .php che formano il css on line, quindi non trovi il file css perché stampato in remoto.

Per ovviare puoi correggere il .php oppure scrivere la regola e aggiungerla al fonto del file template.css aggiungento !important. Ad esempio (il titolo che dici è in h3):

Codice: [Seleziona]

.s5_mod_h3, .module_round_box .s5_h3_first {
font-family:Georgia !important;
font-size:18px;
color:#000000 !important;
}
Questa parte

Codice: [Seleziona]

.module_round_box .s5_h3_firstè relativa alla prima parte del titolo.

Però, se vuoi rendere gli h2 o gli h3 degli h1 devi fare l'ovverride. probabilmente direttamente nella cartella html del template ci sarà già il file che lo fa per renderli bicolore.
Altrimenti solo con il css rimangono graficamente uguali ma l'importanza per Google non cambia.

tonicopi, correggimi se sbaglio. 

Perdonatemi sin d'ora se utilizzerò dei termini inappropriati, spero di farmi capire.
Intanto queli che voglio modificare da H2 a H1 sono i titoli degli articoli
Per quello che voglio ottenere io devo compiere 2 azioni:
1. impostare nel CSS una "regola" che assegni ai tag H1 la formattazione giusta, ovvero: font family Oswald, color  #73A0CF
2. eseguire l'override per trasformare i titoli degli articoli da H2 a H1


Per il secondo punto ho trovato numerose guide e spero di riuscire a farlo seguendo quelle, mentre è il primo punto di cui io ho bisogno e sto chiedendo aiuto qui.

[Gokuale - Takumi]

Ciao Tonicopi e grazie dell'intervento. Quei parametri li avevo già cambiati anche io, ma purtroppo non si occupano ne' del font utilizzato, ne' del colore.Se ad esempio con Firebug fai l'analisi del titolo "Information Technology" (menù servizi) ti accorgerai che font-family (Oswald) e color (#73A0CF) fanno riferimento a due righe (405 e 389) ma non riesco a capire di quale file (vedi immagine qui sotto). Suggerimenti?

prova nella tua modifica a mettere alla fine della riga del css es. quella del font prima del ; la scritta !important

dovrebbe prenderti di default questa e non piu quella che sta leggendo ora

ciao

[adottauncane]

Per il secondo punto ho trovato numerose guide e spero di riuscire a farlo seguendo quelle, mentre è il primo punto di cui io ho bisogno e sto chiedendo aiuto qui.

Ed è quello a cui ho risposto. Fai come ho scritto e sostituisci font e px come vuoi. Chiedevi per l'h3, ho risposto per quello, i titoli che indicavi sono in h3, la stessa cosa puoi farla sull'h2.
Hai provato?

[maxime]

Ed è quello a cui ho risposto. Fai come ho scritto e sostituisci font e px come vuoi. Chiedevi per l'h3, ho risposto per quello, i titoli che indicavi sono in h3, la stessa cosa puoi farla sull'h2.
Hai provato?

Perdonami probabilmente sono un po' fuso io, ma tutti i titoli degli articoli sono in H2 e carattere Oswald, basta vedere lo screenshot che ho allegato poco più sopra.
Io credo che tu stia parlando dei 4 moduli in homepage, visto che parli di h3 (che io non ho mai nominato) e font bicolore!

queli che voglio modificare da H2 a H1 sono i titoli degli articoli

Rivedendo la prima linea del codice che hai postato, vedo che fa riferimento a delle "voci" (non so qual'è il termine corretto) che riportano "h3", quindi non so è corretto

Codice: [Seleziona]

.s5_mod_h3, .module_round_box .s5_h3_first {font-family:Georgia !important;font-size:18px;color:#000000 !important;
}
[/font]

[adottauncane]

Se ad esempio con Firebug fai l'analisi del titolo "Information Technology" (menù servizi)
Sì, mi riferivo a quelli dei moduli.In ogni caso fai la stessa cosa sugli h2 o sugli h1:

Codice: [Seleziona]

h2, h1{
    font-family: Georgia !important;
    font-size:22px !important;
}
e metti i css che ti servono. Come aveva già scritto tonicopi, aggiungendo !important alle voci che aggiungi e non correggi.

[maxime]

GRAZIE 1000!!! Allora, ce l'ho quasi fatta!
ho modificato template.css in questo modo:

Codice: [Seleziona]

h1 { font-family:Oswald !important;color:#73A0CF !important;font-size:1.2em !important;font-weight: normal !important;margin-bottom:18px!important;}




Il font lo prende, il colore anche, tutto benissimo, ma mi scrive solo in MAIUSCOLO.. perchè?

[Gokuale - Takumi]

Codice: [Seleziona]

#s5_menu_wrap, .s5_mod_h3 {    text-transform: uppercase;}
questo fa scrivere tutto in minuscolo

se lo vuoi standard metti

text-transform: none !important;


ciao

[maxime]

Perfetto Takumi!!!

Grazie a tutti ragazzi, siete stati preziosissimi!!!

Adesso vado ad adoperarmi per fare l'override in modo da trasformare tutti gli H2 in H1... sicuramente ci sentiremo su un altro post! ahahahaha spero proprio di no!


A presto