Multi Tree Menu

[marcomoles]

Buongiorno. Ho un problema. Utilizzo un'estensione di Joomla di un menu Dj Multi Tree Menu. Come posso fare per personalizzarla e quindi modificarne i Css oppure configurare il menu affinche al menu vengano assegnati gli attributi css del template?
grazie

[56francesco]

rinomina il loro file ad esempio così  --componente.css
non trovando il suo prenderà il css del template, se non ti piace il risultato allora ripristini il componente.css e lo modifichi come ti serve.

[giovi]

ciao marcomoles, una semplice override non è sufficiente? modifichi il file dando ai vari elementi una nuova classe css, che poi definirai nel css del template

[marcomoles]

Ciao Giovi, ciao Francesco, ho provato rinonimando il nome del file css, ma più che riscrivere il file css avrei la necessità che questo file leggesse gli attributi del template. Sarei più orientato sull'override, ma, sulla guida del sito di Joomla dice di copiare i file defalut.css nella cartella html del template, e quindi se nella cartetella del template non ci sono sottocartelle che faccio le creo?

[giovi]

certamente comunque non è la cartella html del template, è la cartella html/mod_nomedelmodulo/

[marcomoles]

e se non c'è? Creo la cartello html/nome_mod_etc  copio il file al suoi interno e poi?

[giovi]

Le crei.. e poi modifichi quei file che ci hai incollato dentro.

Mi sembra che la guida chiarisca già tutto:

Come funziona
L'override si esegue inserendo degli appositi file nella cartella html del proprio template.
La struttura dev'essere la seguente:

NOME_TEMPLATE/html/NOME_ESTENSIONE/NOME_VISUALIZZAZIONE/NOME_FILE.php
Se ad es. desiderate cambiare la visualizzazione degli articoli (gestiti dal componente com_content di Joomla) copiate il file default.php presente nel vostro sito percorrendo via ftp questo percorso

components/com_content/views/article/tmpl/default.php

all'interno della cartella del vostro template

NOME_TEMPLATE/html/com_content/article/default.php

Una volta copiato il file, potrete effettuare le modifiche al nuovo file e questo sovrascriverà il layout predefinito del componente.
Allo stesso modo, se volete cambiare il layout del modulo di Login (mod_login), copiate il file

modules/mod_login/tmpl/default.php

all'interno della cartella del vostro template

NOME_TEMPLATE/html/mod_login/default.php

Anche in questo caso, una volta copiato il file potrete cominciare a modificarlo.

[marcomoles]

Ok Giovi, ci sono, ma ora un volta fatto che modifiche vanno fatte al file default.php? E solo quello va modificato?

[giovi]

se ad esempio in quel file hai un div a cui vuoi dare un bordo nero, lo modifichi da così (esempio):

Codice: [Seleziona]

<div><?php ......................... ?><div>a così:

Codice: [Seleziona]

<div class="bordonero"><?php ......................... ?></div>

e nel file template.css del tuo template ci scriverai

Codice: [Seleziona]

.bordonero{border: 1px solid black;}

Se l'effetto che vuoi ottenere è quello opposto cioè di annullare lo stile attribuito dal css del modulo e dargli quello predefinito per il template cancelli l'eventuale classe assegnata al div:

Codice: [Seleziona]

<div class="results"><?php ......................... ?></div>
diventa:

Codice: [Seleziona]

<div><?php ......................... ?></div>Puoi fare qualunque modifica sul file creato perchè qualora volessi annullare tutto ti basterà cancellarlo e joomla cosidererà automaticamente quello originale che si trova nella sua cartella

[marcomoles]

Bene, e a me proprio quello interessa, assegnargli gli attributi del template di default. Però la guida mi dice di fare modifiche al file default.php, ma ci sono due righe php e non c'è codice html, qui non capisco...

[giovi]

ma non hai un link al sito cosìcchè tutto possa diventare più semplice 

[marcomoles]

Si, per favore, anche perchè sto modificando come mi hai detto tu, ma non vedo modifiche:

insomma il link è:

http://www.scavoneweb.it/new1

[marcomoles]

Sto modificando il file Css ma non mi fa fare modifiche, invece per attribuire al menu gli attributi del css di origine? C'è un modo?

[giovi]

Quali sono gli aspetti che vorresti modificare di quel menu? Cioè quali sono gli attributi del css di origine? Che intendi con non ti fa fare modifiche?

[marcomoles]

Intendo che se modifico il file css multi tree non vedo modifiche al menu.  Questo è il file che vorrei ne attribuisca gli effetti:

.dj-main {
   padding:0;
  margin:0;
  list-style:none;
  background:none;
  position:relative;
  z-index:500;
  width:auto;
}

.dj-main li.dj-up {
   display:block;
  float:left;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}


.dj-main li a.dj-up_a {
  display:block;
  float:left;
  line-height: 42px;
  color: #fff;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: normal;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  letter-spacing: normal;
  cursor:pointer;
}


.dj-main li a.dj-up_a span {
    float:left;
  display:block;
  padding: 0 23px;
}

.dj-main li a.dj-up_a span.dj-drop {
     float:left;
  display:block;
}

.dj-main li:hover a.dj-up_a,
.dj-main li.active a.dj-up_a {
  color: #fff;
  border-bottom: solid 4px #fbb802;
  background: url(../images/menu_h.png) no-repeat center bottom;
}

.dj-main li:hover a.dj-up_a span,
.dj-main li.active a.dj-up_a span {
  background: none;
}

.dj-main li:hover a.dj-up_a span.dj-drop,
.dj-main li.active a.dj-up_a span.dj-drop {
}

.dj-main li.separator > a {
    cursor: default;
}

.dj-main li a.dj-up_a span span.image-title {
  background: none;
  padding: 0 0 0 5px;
  display: inline;
  float: none;
  height: auto;
}

.dj-main img {
  border: 0;
  margin: 0;
  vertical-align: middle;
}

/* Default list styling */

.dj-main li:hover {
   position: relative;
    z-index: 200;
    background: none;
}

.dj-main li:hover ul.dj-submenu {
    left: 0px;
  top: 42px;
    border-top: none !important;
  padding: 0;
  width: 226px;
  height:auto;
  z-index:300;
  border: none;
}

.dj-main li:hover ul.dj-submenu li {
  display:block;
  height:auto;
  position:relative;
  float: left;
  width: 216px;
  font-weight:normal;
  padding: 0 0 0 10px;
  margin: 0;
  background: none;
}

.dj-main li:hover ul.dj-submenu li a {
    display: block;
  line-height: 15px;
  font-size: 1.1em; 
  height:auto;
  color:#fff;
  text-decoration:none;
  background: none;
  padding: 5px 0;
  text-align: left;
}

.dj-main li ul.dj-submenu li a.dj-more {
     background: url(../images/submenu_arrow.png) 200px center no-repeat;
}

.dj-main li:hover ul.dj-submenu li:hover,
.dj-main li.active ul.dj-submenu li a.active,
.dj-main li ul.dj-submenu li.active,
.dj-main li ul.dj-submenu li li.active,
.dj-main li ul.dj-submenu li li li.active {
  color: #fbb802;
}

.dj-main li:hover ul.dj-submenu li a:hover{
  color: #fbb802;
}

.dj-main li:hover ul.dj-submenu li.active a.dj-more:hover{
  color: #fbb802;
}

.dj-main li:hover ul.dj-submenu li a.dj-more:hover {
  color: #fbb802;
}

.dj-main li:hover ul.dj-submenu li a.dj-more-active {
    background: url(../images/submenu_arrow.png) 200px center no-repeat;
    color: #fbb802;
}

.dj-main li:hover ul.dj-submenu li a.dj-more-active:hover {
  color: #fbb802;
}

.dj-main li:hover li:hover ul,
.dj-main li:hover li:hover li:hover ul,
.dj-main li:hover li:hover li:hover li:hover ul,
.dj-main li:hover li:hover li:hover li:hover li:hover ul {
    left: 226px;
  top: -1px;
  width: 226px;
  padding: 0;
  margin: 0;
  z-index:400;
  height:auto;
}

.dj-main ul,
.dj-main li:hover ul ul,
.dj-main li:hover li:hover ul ul,
.dj-main li:hover li:hover li:hover ul ul,
.dj-main li:hover li:hover li:hover li:hover ul ul {
    position:absolute;
  left: -9999px;
  top: -9999px;
  width:0;
  height:0;
  margin:0;
  padding:0;
  list-style:none;
}

.dj-main li:hover li:hover a.dj-more,
.dj-main li:hover li:hover li:hover a.dj-more,
.dj-main li:hover li:hover li:hover li:hover a.dj-more,
.dj-main li:hover li:hover li:hover li:hover li:hover a.dj-more {
  color: #fbb802;
}

.dj-main li:hover li:hover li a.dj-more,
.dj-main li:hover li:hover li:hover li a.dj-more,
.dj-main li:hover li:hover li:hover li:hover li a.dj-more {
    color: #fff;
    background: url(../images/submenu_arrow.png) 200px center no-repeat;
}

[56francesco]

non serve che mandi tutto il file!
chi vuole aiutarti sa come fare per vederlo, basta il link al sito on line.
se poi controlli se hai la cache attiva o meglio la disabiliti quando devi far modifiche è meglio.
cache del sito e del browser ovviamente.

[marcomoles]

Ok scusa Francesco, qual'è il file dove devo agire per le modifiche, vorrei il menu blu eccetera..