Come intercettare pagina corrente per modificare la td?

[f4lch3tt0]

Ciao a tutti,

sto cercando di migrare un sito da statico in Joomla.

Ho capito a grandi linee il funzionamento, ma mi manca un passo fondamentale.

Utilizzo il mod_mainmenu per realizzare il menu alto del sito internet, Joomla mi permette di tracciare, nell'array $links che crea, quando si tratta della pagina attuale.

Il problema è che io ho bisogno di colorare lo sfondo di tutta la td e non solo lo sfondo dei link.

Avete qualche suggerimento su come intercettare la cosa a livello più alto nel legacy.php del modulo?

Grazie mille

[kuvier00]

Puoi provare a usare template diversi per pagine diverse, questo articolo potrebbe esserti utile: http://www.joomla.it/articoli-della-community/807-diverse-pagine-diversi-template-lassegnazione-dei-template.html

[f4lch3tt0]

Ciao e grazie per la risposta.

Purtroppo non risolve il mio problema, perché ho modificato il modulo adattandolo alle mie esigenze, quindi non posso più riusarlo.

Mi basterebbe solo sapere, se qualcuno l'ha fatto, come intercettare la pagina attiva nel vettore $links per modificare la struttura del menu (non il contenuto).

[f4lch3tt0]

UP!

[tonicopi]

Confesso che non ho capito quel che vuoi dire ma se io dovessi colorare o personalizzare cmq un qualsiasi modulo userei il suffisso :
http://www.joomla.it/articoli-della-community/4277-moduli-style-classe-e-suffisso-css.html
 

[f4lch3tt0]

Mi spiace non essere in grado di spiegarmi!

Provo postando un po' di codice, anche perché non sono riuscito a sfruttare il tuo esempio!

Ho creato un template, che ha nell'index.php

Codice: [Seleziona]

<div id="menu_up" class="link_navigazione">
<jdoc:include type="modules" name="menu_up" />
</div>
il quale crea, prelevando il menu, il seguente div

Codice: [Seleziona]

<div id="menu_up" class="link_navigazione">
<table width="800" height="83" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/home" class="mainlevel" id="active_menu">Uno</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/azienda" class="mainlevel" >Due</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/prodotti" class="mainlevel" >Tre</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/home" class="mainlevel" >Quattro</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/azienda" class="mainlevel" >Cinque</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/prodotti" class="mainlevel" >Sei</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/home" class="mainlevel" >Sette</a>
</td>
<td width="100" valign="bottom" class="link_navigazione">
<a href="/joomla/index.php/azienda" class="mainlevel" >Otto</a>
</td>
</tr>
</table>
</div>
(ho scelto di utilizzare lo "Stile menu: Legacy - Orizzontale").

Ora, io vorrei che la pagina attiva (in questo caso la Uno, identificata da [id="active_menu"]), avesse la scritta sul menu di colore e sfondo diverso.

Per il colore nessun problema, metto nel css

Codice: [Seleziona]

a.mainlevel#active_menu {
  color: #FF0000;
}
e vedo le scritte rosse.

Ma per lo sfondo non posso usare il background-color, altrimenti mi colora solo lo sfondo del link.

Dovrei in qualche modo recuperare il parent. Ho provato con Javascript, ma funziona solo su IE e non su FF.

Sapete come fare con i css?

Spero ora sia più chiaro, purtroppo non posso indicarvi un link perché il progetto è ancora locale.

[kuvier00]

Ho capito cosa intendi, usa questo codice javascript, l'ho testato sia su IE (sia 7 che sia su firefox.
Puoi metterlo in fondo alla pagina index.php del tuo template.

Codice: [Seleziona]

<script type="text/javascript">
document.getElementById('active_menu').parentNode.style.backgroundColor = 'red';
</script>

Invece di red, metti il colore che preferisci

[f4lch3tt0]

Grande, funziona perfettamente! Grazie mille!!!

[tonicopi]

Interessante davvero! 
E se volessi recuperare due valori per il parent si deve fare così?
<script type="text/javascript">
   document.getElementById('active_menu').parentNode.style.backgroundColor = 'red';
   document.getElementById('active_menu').parentNode.style.height = '100px';
</script>
Ho provato e funziona ma è la sintassi corretta?

[kuvier00]

Interessante davvero! 
E se volessi recuperare due valori per il parent si deve fare così?
<script type="text/javascript">
   document.getElementById('active_menu').parentNode.style.backgroundColor = 'red';
   document.getElementById('active_menu').parentNode.style.height = '100px';
</script>
Ho provato e funziona ma è la sintassi corretta?

Si è corretto, qui ci sono tutte le proprietà di style: http://www.w3schools.com/jsref/dom_obj_style.asp

[tonicopi]

Grazie kuvier00!
Non avevo mai utilizzato javascript per questo genere di cose 
Ho un poco gironzolato in quel sito che hai linkato ma mi ci perdo.
Se invece di avere l'ID avessimo la classe di un determinato oggetto sarebbe ugualmente possibile attribuire il valore a uno stile? Con quale sintassi?
Grazie ancora!

[kuvier00]

Si, è sempre possibile, la sintassi però diventa un filino più complicata.
Per fare un esempio, ti riporto questo html:

Codice: [Seleziona]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test js</title>
<style type="text/css">
#cont div {
width:150px;
height:150px;
border:1px solid black;
margin-bottom:30px;
}
</style>
</head>

<body>
<div id="cont">
    <div class="classe1">
        </div>
        <div class="classe1">
        </div>
        <div class="classe2">
        </div>
    </div>

</body>
</html>


<script type="text/javascript">
listaDiv = document.getElementById("cont").getElementsByTagName("div");

for (i = 0; i < listaDiv.length; i++) {
if (listaDiv[i].className == 'classe1') {
listaDiv[i].style.backgroundColor = 'red';
//...
}
else if (listaDiv[i].className == 'classe2') {
listaDiv[i].style.backgroundColor = 'green';
//...
}
}
</script>

Il codice javascript prima prende la lista tutti i div figli di #cont, poi itera sulla lista cercando i div con class="classe1" e class="classe2" per cambiare il background.