Autore Topic: cambio font (Letto 14014 volte)

fabio61 · « **il:** 24 Set 2011, 18:57:22 »

premetto che sono nuovo all'uso di joomla e anche alla creazione di siti.
Comunque dopo aver trovato un template che potrebbe fare al caso mio volevo modificare il colore del font usato dall'autore del template per il logo del sito, è nero e lo vorrei far diventare blu.

Che cosa ho fatto:
1. dal codice html ho trovato l'id relativo al testo che voglio modificare = "logo"
2. nel foglio stile template.css nella cartella del template che ho utilizzato ho individuato questo id ed ho aggiunto, nella dichiarazione "color: #CC3333"

però non funziona, è ovvio che non ho capito qualcosa!

Forse è qui il problema?

Codice: [Seleziona]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >

<head>
  <base href="http://localhost/lions/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
  <title>Home</title>
  <link href="/lions/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/lions/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <script src="/lions/media/system/js/core.js" type="text/javascript"></script>
  <script src="/lions/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/lions/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/lions/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script type="text/javascript">
function keepAlive() {	var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
  </script>
<link rel="stylesheet" href="/lions/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/lions/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/lions/templates/a4joomla-triplex-free/css/template.css" type="text/css" />
<link rel="stylesheet" href="/lions/templates/a4joomla-triplex-free/css/grey.css" type="text/css" />
<!--[if IE 6]>

vi aggiungo anche uno screenshot che mostrano la parte della pagina che voglio cambiare ed i files che diceco (il codice html e il foglio .css)

[allegato vecchio più di un anno eliminato da un amministratore]

Fabrizio Fiorita · « **Risposta #1 il:** 24 Set 2011, 22:11:25 »

Anche se sei nuovo vedo che ti muovi con scioltezza.
Fare sempre la prova degli errori stupidi di distrazione: hai messo il ; dopo la dichiarazione di colore? e non hai per caso cancellato la graffa di fine dichiarazione?
Non avrai per caso usato le virgolette " anche nella dichiarazione oltre che qui?
Ti sei ricordato di salvare il css dopo la modifica? E hai usato un programma che salva in UTF-8?
Altra cosa: il colore CC3333 è rosso scuro, ma non volevi farlo blu?
prova questa riga:
color: blue;
Buon divertimento e fammi sapere.
Fabrizio

fabio61 · « **Risposta #2 il:** 24 Set 2011, 22:35:44 »

Citazione da: Fabrizio Fiorita - 24 Set 2011, 22:11:25

Fare sempre la prova degli errori stupidi di distrazione: hai messo il ; dopo la dichiarazione di colore? e non hai per caso cancellato la graffa di fine dichiarazione?
Non avrai per caso usato le virgolette " anche nella dichiarazione oltre che qui?
Ti sei ricordato di salvare il css dopo la modifica? E hai usato un programma che salva in UTF-8?
Altra cosa: il colore CC3333 è rosso scuro, ma non volevi farlo blu?
prova questa riga:
color: blue;

niente da fare: ho controllato tutto, nell'esempio c'era il CC3333 perché nelle varie prove avevo usato il rosso che risalta di più per vedere quale parte del documento si modificava.
ho provato a mettere sia "blue" senza le virgolette, sia #3333CC e li ho messi sia in h2 e h3, poi c'e' un h2logo e h3logo, li ho messi anche lì, ho provato nelle id "logo" e in altre id. L'unica cosa che funziona è se lo metto nel "body", allora effettivamente fa diventare blu il testo. Niente per i titoli però!
sembra che ci sia qualcosa che cambia il colore a valle di questi controlli, ma nel codice html non vedo in foglio stile interno né vedo specifiche interne al documento stesso.

Inoltre ho pensato di mettere il colore all'interno del documento (in fondo voglio cambiare solo quello) ma francamente non ho trovato dove sia il file della prima pagina del sito

Fabrizio Fiorita · « **Risposta #3 il:** 24 Set 2011, 22:46:30 »

Nell'immagine della schermata del file css manca il punto e virgola dopo CC3333
prova a fare una dichiarazione nuova:
logo h2,
logo h3 {
color: blue;
}

Che cosa intendi per "file della prima pagina del sito"?

Fabrizio Fiorita · « **Risposta #4 il:** 24 Set 2011, 22:48:15 »

correggo
#logo h2,
#logo h3 {

il resto va bene

fabio61 · « **Risposta #5 il:** 24 Set 2011, 23:09:12 »

Citazione da: Fabrizio Fiorita - 24 Set 2011, 22:46:30

Nell'immagine della schermata del file css manca il punto e virgola dopo CC3333
prova a fare una dichiarazione nuova:
logo h2,
logo h3 {
color: blue;
}

Che cosa intendi per "file della prima pagina del sito"?

fatto, ma niente da fare

Codice: [Seleziona]

#logo h2,
#logo h3 {
               color: blue;
             }

e il bello è che se invece aggiungo:

Codice: [Seleziona]

font-style: italic; a

Codice: [Seleziona]

#logo { 
  text-align: left; 
  float: left; 
  display: inline;
  height: 90px; 
    width: 250px; 
    margin: 0 20px 0 0; 
    padding: 0px;
     
}

effettivamente mi cambia il font in corsivo, ma il colore non c'e' verso

In un sito scritto in html senza joomla di solito c'e' un file (ad esempio home.html) al quale giunge il visitatore quando visita il sito e dal quale poi inizia a navigare, quello è il file che intendo con "prima pagina", speravo di poter cambiare alcune specifiche all'interno di quel file ma non capisco dove lo metta joomla

Fabrizio Fiorita · « **Risposta #6 il:** 24 Set 2011, 23:15:12 »

La prima pagina, come tutte le pagine joomla, ma la prima in specie, non esiste finché non viene richiamata. A quel punto il motore di joomla preleva i pezzi dalle varie parti, compila la pagina html e la pubblica.
Scusa, che cosa fai dopo aver salvato il file css?
Hai provato a ricaricare la pagina iniziale con F5?

fabio61 · « **Risposta #7 il:** 24 Set 2011, 23:22:23 »

Citazione da: Fabrizio Fiorita - 24 Set 2011, 23:15:12

La prima pagina, come tutte le pagine joomla, ma la prima in specie, non esiste finché non viene richiamata. A quel punto il motore di joomla preleva i pezzi dalle varie parti, compila la pagina html e la pubblica.
Scusa, che cosa fai dopo aver salvato il file css?
Hai provato a ricaricare la pagina iniziale con F5?

certo! non con F5 ma con "aggiorna" sul browser

allora in joomla se voglio usare un inline style oppure semplicemente un foglio stile interno come faccio?

ma la cosa che trovo interessante è che se imposto la dichiarazione per il corsivo la esegue regolarmente mentre se imposto quelle per il colore oppure per la font-family la ignora. C'e' sicuramente qualche controllo a valle che impedisce di prendere in considerazione quelle dichiarazioni

Fabrizio Fiorita · « **Risposta #8 il:** 24 Set 2011, 23:32:07 »

CSS4 prevede che gli stili possano essere ricavati o dai fogli di stile o dalle dichiarazioni di stile collocate in testata (cosa che in Joomla non è possibile). Mettere le dichiarazioni di stile inline è "deprecated".
Ciononostante Joomla accetta alcune dichiarazioni inline, almeno le più comuni. Ma se commetti un qualsiasi errore di battitura nelle keywords, l'editor di Joomla cancella tutta la dichiarazione.
Io ho utilizzato (poche) dichiarazioni inline con , incluso color, e funzionano.
Ad es TESTO funziona.

fabio61 · « **Risposta #9 il:** 25 Set 2011, 10:09:28 »

Citazione da: Fabrizio Fiorita - 24 Set 2011, 23:32:07

Io ho utilizzato (poche) dichiarazioni inline con , incluso color, e funzionano.
Ad es TESTO funziona.

si ma fisicamente dove la scrivo?

fabio61 · « **Risposta #10 il:** 25 Set 2011, 11:27:48 »

nella speranza di risolvere il problema allego il foglio stile (a cui ho cambiato l'estensione in .txt altrimenti non lo potevo caricare qui).

In pratica se modifico il colore di "content60", di "h1,h2,h3,h4,h5,h6,p,blockquote,dl,address", e anche se aggiungo la dichiarazione ".gainlayout color: blue;" mi si modifica in blu solo il testo principale (p) ma non i titoli. Poiché il titolo è anche un link ho provato pure con a.logo ma niente da fare.
Se invece modifico #logo, #logo h2, h2, h3 non cambia assolutamente nulla.
Sembra proprio ci sia un controllo a valle che impedisce la modifica del colore limitatamente ai titoli

[allegato vecchio più di un anno eliminato da un amministratore]

Fabrizio Fiorita · « **Risposta #11 il:** 25 Set 2011, 11:36:01 »

Dalle parti fra le righe 220 e 250 del tuo css ci sono i blocchi #logo h2 e #logo h3. Hai messo qui le specifiche color? Noto che h2 è bold mentre h3 è normal, e le due intestazioni usano fonts differenti. L'hai fatto tu?
Ciao buona domenica
Fabrizio

fabio61 · « **Risposta #12 il:** 25 Set 2011, 11:41:55 »

Citazione da: Fabrizio Fiorita - 25 Set 2011, 11:36:01

Dalle parti fra le righe 220 e 250 del tuo css ci sono i blocchi #logo h2 e #logo h3. Hai messo qui le specifiche color? Noto che h2 è bold mentre h3 è normal, e le due intestazioni usano fonts differenti. L'hai fatto tu?

no, era così.

naturalmente le specifiche color le ho messe lì, tra le graffe relative a #logo h2 (anche lì! Le ho messe e tolte dappertutto ormai!)
Ora sono riuscito a cambiare la font-family di #logo h2 e finalmente ho potuto mettere un bel georgia serif che mi pare molto più adatto al mio scopo, però non c'e' verso di farlo apparire blu. Ma mi viene un dubbio: la font "georgia" deve essere installata sul computer per poter apparire, ma il color è indipendente o ci deve essere quel colore per quella font?

Fabrizio Fiorita · « **Risposta #13 il:** 25 Set 2011, 11:48:02 »

Se tu indichi un font diverso dagli standard CSS4 quel font deve essere presente sul computer che legge la pagina web, altrimenti viene sostituito da uno dei fonts standard.
Mi sembra che si possa inserire in una delle cartelle del template il font desiderato, ma non l'ho mai fatto e non so come si faccia.
A valle del template non ci sono controlli di nessun tipo, i fogli css vengono letti come sono ed utilizzati come sono, sempre che il browser in uso riconosca le funzioni css indicate (ad esempio IE non riconosce quasi nessuna funzione di text-decoration).
La questione del tuo color è un mistero: ma scusa, nel foglio css che mi hai mandato, alle righe #logo h2 e #logo h3 la specifica color non c'è proprio...

Fabrizio Fiorita · « **Risposta #14 il:** 25 Set 2011, 11:52:10 »

Scusa, mi viene un dubbio.
Dopo il tuo template.css la pagina php carica altri css e precisamente grey.css e i due IE.
Vai a vedere su questi css se per caso non c'è qualcosa, perché, essendo caricati dopo template.css, ne cancellano le opzioni omonime.

fabio61 · « **Risposta #15 il:** 25 Set 2011, 11:54:57 »

Citazione da: Fabrizio Fiorita - 25 Set 2011, 11:48:02

La questione del tuo color è un mistero: ma scusa, nel foglio css che mi hai mandato, alle righe #logo h2 e #logo h3 la specifica color non c'è proprio...

perché ho postato quello originale per evitare confusione, in quello che ti posto ora c'e', ma non funziona, magari controlla se è scritto bene o se deve prendere un posto particolare in sequenza

[allegato vecchio più di un anno eliminato da un amministratore]

fabio61 · « **Risposta #16 il:** 25 Set 2011, 11:57:37 »

Citazione da: Fabrizio Fiorita - 25 Set 2011, 11:52:10

Scusa, mi viene un dubbio.
Dopo il tuo template.css la pagina php carica altri css e precisamente grey.css e i due IE.
Vai a vedere su questi css se per caso non c'è qualcosa, perché, essendo caricati dopo template.css, ne cancellano le opzioni omonime.

infatti ci avevo pensato ed avevo guardato il grey.css che francamente ha delle notazioni colore che non capisco perché sono a tre cifre. Non ho guardato gli ie perché immagino che quelli valgano solo in caso di visualizzazione su internet explorer che non uso ora.

questo è l'ie67.css: può creare problemi?

Codice: [Seleziona]

/* Expanding box problem  */ 
div.item, 
div#logo, 
div#content60, 
div#sidebar, 
div#sidebar-2 
{ 
    overflow:hidden; 
}

Fabrizio Fiorita · « **Risposta #17 il:** 25 Set 2011, 12:05:43 »

1. Nessun problema per i css IE.
2. Le notazioni a tre cifre sono un'abbreviazione di quelle a sei, ad esempio 000 è nero, fff è bianco, f00 è rosso e così via.
3. Piuttosto ho notato che tu indichi per h2 uno stile serif, mentre nell'immagine trasmessa col tuo primo post h2 è sanserif, quasi che prenda le specifiche da un'altra parte.

Prova, così, tanto per vedere, ad inserire una riga color alla riga 107, dentro a #header
poi prova a togliere la # davanti a #logo h2 e #logo h3

fabio61 · « **Risposta #18 il:** 25 Set 2011, 12:07:54 »

TROVATO IL PROBLEMA, ora mi serve una soluzione:

commentando questa riga del grey.css

Codice: [Seleziona]

/*h2 a:link, h2 a:visited, h2 a:hover, h2 a:active { 
color: #223; 
}*/

il titolo diventa blu (anche se troppo chiaro ma questo è un dettaglio)

ora pero' immagino che il foglio grey serva per la visualizzazione in caso in cui chi legge debba leggerlo senza colori, o sbaglio?

che succede se lascio commentata questa riga? o come la posso modificare?

Fabrizio Fiorita · « **Risposta #19 il:** 25 Set 2011, 12:21:35 »

Prova a commentare tutto il blocco di grey.css
prova prima a sostituire #223 con blue o con #00f e vedi che cosa succede.