Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : fabio61 24 Sep 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?
<!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&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/lions/index.php?format=feed&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]
-
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
-
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
-
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"?
-
correggo
#logo h2,
#logo h3 {
il resto va bene
-
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
#logo h2,
#logo h3 {
color: blue;
}
e il bello è che se invece aggiungo:
font-style: italic; a
#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
-
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?
-
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
-
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 <span>, incluso color, e funzionano.
Ad es <span style="color: red;">TESTO</span> funziona.
-
Io ho utilizzato (poche) dichiarazioni inline con <span>, incluso color, e funzionano.
Ad es <span style="color: red;">TESTO</span> funziona.
si ma fisicamente dove la scrivo?
-
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]
-
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
-
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?
-
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...
-
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.
-
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]
-
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?
/* Expanding box problem */
div.item,
div#logo,
div#content60,
div#sidebar,
div#sidebar-2
{
overflow:hidden;
}
-
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
-
TROVATO IL PROBLEMA, ora mi serve una soluzione:
commentando questa riga del grey.css
/*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?
-
Prova a commentare tutto il blocco di grey.css
prova prima a sostituire #223 con blue o con #00f e vedi che cosa succede.
-
Prova a commentare tutto il blocco di grey.css
prova prima a sostituire #223 con blue o con #00f e vedi che cosa succede.
si ma posso vedere cosa succede sulla visualizzazione a colori, ma a che cosa serve il foglio grey?
-
mandamelo in formato txt e vedo
-
mandamelo in formato txt e vedo
le righe commentate le ho commentate io
[allegato vecchio più di un anno eliminato da un amministratore]
-
comunque ancora qualcosa non va:
sto provando a cambiare il colore che era diventato blu chiaro, ma ancora non si cambia: ora non è più nero ma rimane blu chiaro
-
comunque ancora qualcosa non va:
sto provando a cambiare il colore che era diventato blu chiaro, ma ancora non si cambia: ora non è più nero ma rimane blu chiaro
ora ce l'ho come dico io: ho capito che se devo modificare il colore lo devo fare sul foglio grey nelle id logo h2 e logo h3; ancora non capisco però il perché, credevo fossero due fogli alternativi invece è ovvio che non lo sono. A che serve esattamente questo foglio grey? non si poteva mettere tutto nel foglio template.css?
-
Se mi mando la copia del foglio grey.css cerco di capirci qualcosa.
Comunque, nel foglio grey viene dato lo stesso stile ai links, visti, non visti, cliccati o attivi e questo non va bene.
Dopo averlo visto ti darò qualche altro consiglio.
-
Se mi mando la copia del foglio grey.css cerco di capirci qualcosa.
te l'avevo mandato: è sulla risposta #22 o #23
-
L'ho visto, ma non avendo a disposizione tutto il tuo sito non posso capire a cosa serve.
Di solito chi scrive un foglio css in testata ci mette un po' di informazioni, ma qui non ce ne sono.
C'è un solo modo di capire:
1. metti a commento tutto il foglio, dalla prima all'ultima riga.
2. Fatti un giro su tutto il sito e guarda se ci sono delle anomalie.
3. Individua a quali voci sono ascrivibili le anomalie e riabilitale una per volta.
4. Quando avrai trovato tutto quello che ti serve copia le voci utili, trasferiscile su template.css e disabilita grey.css
Buon lavoro
-
Scusami, ma non sarò disponibile fino alla fine del GP di Formula 1.
Ciao a più tardi
-
Prova a commentare tutto il blocco di grey.css
prova prima a sostituire #223 con blue o con #00f e vedi che cosa succede.
tutto sommato, per il momento, se il foglio gray non è alternativo ma complementare al template.css posso pure lasciare le cose come stanno e, avendo modificato quel che mi serviva, andare avanti nella elaborazione del sito, no?
-
Se a te va bene così fai pure. Tieni solo presente che, se in futuro troverai qualcosa che non va, sai già dove andare a cercare.
Buon lavoro
Fabrizio
-
Ciao,
anche io ho avuto lo stesso problema, su un altro template ma evidentemente costruito con lo stesso principio. Ho capito che il colore si imposta solo sul foglio grey.css, che non è dunque alternativo a template.css. La questione del colore impostato sul link è perché il template imposta i titoli come link, ma se tu togli questa opzione dalle impostazioni generali degli articoli e li rendi testo normale, ecco che puoi cambiare il colore sugli header h1, h2 etc etc.
Grazie comunque, la vostra discussione mi è stata molto utile.
-
Ciao emacito.
Le tue osservazioni sono giuste.
Se vai su index.php del template vedi che i fogli css sono caricati in un certo ordine.
Se due fogli css hanno definizioni diverse per lo stesso elemento, viene tenuto conto dell'ultimo foglio css caricato.
Io di solito cerco di ridurre il numero dei fogli css, ma può essere utile averne diversi per diverse esigenze, a parte ovviamente quelli specifici per le colonne e per Internet Explorer.
Inoltre cerco sempre di capire, leggendo i sorgenti pagina, quali definizioni non vengono utilizzate. In questo caso prima le asterisco come commenti e poi, quando sono sicuro che non servono, le cancello. In questo modo riesco ad accelerare il caricamento delle pagine.
Buon lavoro
Fabrizio
-
Ciao Fabrizio,
ok, grazie ancora e buon lavoro anche a te.