In questo articolo scritto per joomla.it ho cercato di spiegare come funziona la Classe pagina che può essere applicata ad ogni voce di menu dai parametri > Opzioni avanzate > Opzioni visualizzazione pagina. Dopo aver scritto la classe test-classe e dopo aver inserito nella index.php del template il codice php nel modo descritto nell'articolo, se ispezionate il codice html con firebug vedrete che nel tag body è apparso ora un ID avente valore test-classe che quindi posso formattare con un paio di regole css:

#test-classe {
background-color:#0088CC;
}

#test-classe .pull-right a {
   color: #F9C804;
}

rendendo blu il background di questa sola pagina e analogamente tingendo di giallo il Back to top a fondo pagina.

Se andate invece nella Home vedrete come la stessa classe test-classe viene utilizzata per cambiare aspetto al titolo pagina e allo sfondo dell'articolo, stavolta scrivendola nel box Classe pagina della voce di menu Home facendola precedere da uno spazio bianco.

Queste le regole di stile utilizzate per la home page:

.test-classe {
  background-color: #F5F5F5;
  border: 1px solid #E3E3E3;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  margin-bottom: 20px;
  min-height: 20px;
  padding: 19px;
  font-size:15px;
}
.test-classe h2 a {
  font-size: 36px;
  color: #F9C804;
}

Come vedete è possibile utilizzare questa proprietà della Classe pagina per interessanti personalizzazioni.