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 => : peppe990 10 Jan 2014, 21:57:23
-
Buona sera, sto modificando un pò questo bel template:
http://demo.hurricanemedia.net/joomla04/
Vorrei chiedere il vostro aiuto perché vorrei che i titoli delle barre laterali fossero di due colori, per esempio osservando la demo vorrei che:
About fosse giallo
Joomla fosse blu
Secondo voi come si può ottenere in joomla un effetto simile?
Grazie mille
-
Ciao,
dal backend :
1- menu\tuo menu
2- apri la voce "home"
3- dal menu a dx dove trovi la voce "Opzioni di tipo link" nel campo "classe CSS del link" scrivi "home"
4- Salva e chiudi
CSS
1- apri il css del template che di norma trovi in /templates/css/nome.css
2- aggiungi questa riga
a.home{background:yellow;}
3- Salva e chiudi
Ripeti lo stesso procedimento per eventuali altre "colorazioni", tieni presente che il valore scritto in "classe CSS del link" deve essere lo stesso che scriverai nel file css e non possono essere uguali, nel css io ho usato "yellow" ma tu puoi passare qualunque valore esadecimale tipo #444444.
Ciao!
-
Ciao alessioa, grazie per la risposta.
Forse mi sono spiegato male, io vorrei cambiare il colore della barra laterale.
I titoli dei moduli vorrei che avessero due colori, posto uno screen per essere più chiaro
Grazie
[allegato eliminato automaticamente dopo un anno]
-
la cosa non è semplice,
se per esempio volessi avere la prima lettera di un colore diverso avrei a disposizione una pseudoclasse CSS
h3:first-letter {color: white; font-weight: bold;}mentre se vogliamo avere la prima parola purtroppo non esiste nessuna pseudoclasse first-word.
il titolo del modulo è un H3 è per poter formattare come desiderato dovrebbe essere eseguito un override del file che si occupa di farci vedere il titolo, perdendo probabilmente il tag H.....
una soluzione è quella di scaricare questa libreria (https://github.com/davatron5000/Lettering.js) js da gitub e di implementare poi questo codice nel CSS principale del template
h3::last-word {
color: #ffcc00;
}
-
Adesso è chiaro.
O utilizzi la soluzione proposta da giusebos, oppure il menu lo crei a mano con il modulo html customizzato in questo modo :
HTML
<div id="lateral_menu">
<h3 class="yellow">about <span class="blue">joomla</span></h3>
<ul>
<li><a href="pippo.html">Pippo</a></li>
<li><a href="paperino.html">Paperino</a></li>
<li><a href="topolino.html">Topolino</a></li>
</ul>
</div>
CSS
div#lateral_menu{......}
div#lateral_menu ul li {......}
div#lateral_menu h3.yellow{color:yellow;}
div#lateral_menu span.blue{color:blue;}
in questo modo non perdi l'h3 se ti serve, anzi puoi anche usare un altro tag.
-
Per prima cosa grazie mille ad entrambi per l'aiuto ed i consigli che mi avete dato.
@alessioa
La tua soluzione va bene per i moduli personalizzati ma non riuscirei ad usarla per, tipo, il login form o altri moduli joomla. Comunque è una soluzione valida, come hai detto anche tu, per i moduli customizzati.
@giusebos
Si, immaginavo che non fosse una cosa semplice da implementare su un template di un CMS.
Sto provando ad usare la tua soluzione anche se di JS sono a digiuno.
Io ho fatto cosi:
Nel foglio di stile ho aggiunto:
h3::last-word { color: #ffcc00;}
Poi sono andato nel sito che mi hai suggerito ed ho scaricato lo zip. Nella cartella nel template c'era già una cartella denominata JS.
Dentro questa cartella ho inserito i file:
1. jquery.lettering.js
2. bower.json
e li ho richiamati nell'index.php del template, ma non funziona.
Il mio dubbio è che sbaglio nel richiamare il file bower.json oppure che ho sbagliato dove inserirli.
Sapresti darmi qualche indicazione?
Grazie mille per il supporto
-
dentro la cartella del tuo template crea una cartella chiamata
javascript
ed inseriscigli il file
jquery.lettering.js
nel file index.php del tuo template aggiungi questa stringa nella sezione head
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/jquery.lettering.js"></script>