Titolo barra laretale di due colori

[peppe990]

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

[alessioa]

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

Codice: [Seleziona]

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!

[peppe990]

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]

[giusebos]

la cosa non è semplice,
se per esempio volessi avere la prima lettera di un colore diverso avrei a disposizione una pseudoclasse CSS

Codice: [Seleziona]

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 js da gitub e di implementare poi questo codice nel CSS principale del template

Codice: [Seleziona]

h3::last-word {
  color: #ffcc00;
}

[alessioa]

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

Codice: [Seleziona]

<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

Codice: [Seleziona]

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.

[peppe990]

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:

Codice: [Seleziona]



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

[giusebos]

dentro la cartella del tuo template crea una cartella chiamata
javascript
ed inseriscigli il file

Codice: [Seleziona]

jquery.lettering.js
nel file index.php del tuo template aggiungi questa stringa nella sezione head

Codice: [Seleziona]

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/jquery.lettering.js"></script>