Trasformare Immagine header in componente

[darietto83]

Ciao a tutti,
vorrei sostituire l'immagine statica jpg nell'header di un template con una slideshow di immagini che sfumano una dopo l'altra.

Per fare questo ho capito che posso fare in due modi:
1) uso di flash
2) uso di un componente Joomla come SimpleImageRotation

Volendo usare l'ipotesi 2, come posso fare per sostituire l'immagine statica .jpg nell'header del template con questo componente?

Grazie

[blackhorse]

prima di tutto stiamo parlando di moduli e non di componenti

controlla che nella zona dell'header ci sia una posizione per un modulo se c'è installa il modulo e lo pubblichi li levando i riferimenti all'header statico se no devi crearti una posizione adatta modificando il codice del template.

[darietto83]

ok, grazie!
Effettivamente il modulo lo posso mettere nella zona dell'"header" (la posizione "header" esiste), ma per ora, anche pubblicandolo, non compare.
Inoltre non so come fare a "levare i riferimenti all'header statico"...
scusate ma sono alle prime armi..

[blackhorse]

se dici che template usi dai una grande mano a chi ti aiuta

[darietto83]

ok, scusate..
il template è questo
http://template.joomlart.com/ja_mageia/index.php

e ovviamente l'immagine che vorrei modificare è l'header in alto a destra, dove ci sono le 4 persone in giacca e cravatta.

[darietto83]

ragazzi qualcuno riesce a darmi una mano??
Grazie!

[Kriss]

Ciao, dopo aver fatto un backup, potresti cancellare la riga in cui si richiama l'immagine delle "quattro persone in giacca e cravatta" -o commentarla nel css- e mettere al suo posto una div (con le stesse dimensioni)
con il seguente codice:

Codice: [Seleziona]

<div id="nome"><?php mosLoadModules('nome', -1); ?></div>
Ovviamente al posto di nome metti la denominazione della posizione... poi ti basta pubblicare il modulo rotator in quella posizione!

[darietto83]

perfetto, grazie!
In serata provo e pubblico come è andata!

[darietto83]

ho fatto svariate prove e sono riuscito (usando "jdoc" e non "mosLoadModules") a caricare il modulo. Ma ho dei problemi di visualizzazione.
Riporto l'index.php...

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap" class="clearfix">
<div id="ja-header" style="background: url(templates/<?php echo $JAconfig->template."/images/header/". $JAconfig->ja_color ."/". $ja_header_img;?>) no-repeat top right;">

  <div id="ja-newsflash">
      <jdoc:include type="modules" name="user5" style="xhtml" />
   </div>

   <div id="ja-pathwaywrap" class="clearfix">
   
      <?php if($this->countModules('user4')) : ?>
      <div id="ja-searchwrap">
        <div id="ja-search">
          <jdoc:include type="modules" name="user4" style="xhtml" />
        </div>
      </div>
      <?php endif; ?>
       <div id="ja-pathway">
           <div id="ja-usertoolswrap">
               <div id="ja-usertools">
                   <?php  if($JAconfig->ja_tool & 1) $tempTools->genToolMenu(1); ?>
                   <?php  if($JAconfig->ja_tool & 2) $tempTools->genToolMenu(2); ?>
               </div>     
            </div>
      <?php if ($this->countModules('breadcrumb')) { ?>
         <jdoc:include type="modules" name="breadcrumb" style="xthml" />
      <?php } ?>
       </div>     
    </div>
</div>
</div>
<!-- END: HEADER -->

e il css...

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
   background: #5D6B74;
   position: relative;
   height: 200px;
   line-height: normal;
}

#ja-header {
   height: 200px;
}

h1.logo {
   font-size: 300%;
   display: block;
   float: left;
   margin: 0;
   padding: 0;
   width: 218px;
   height: 48px;
}

.narrow h1.logo {
   width: 172px;
}

h1.logo a {
   width: 217px;
   height: 48px;
   display: block;
   float: left;
   text-decoration: none;
   text-transform: uppercase;
   outline: none;
   text-indent: -4000px;
   background: url(../images/logo.gif) no-repeat;
}

.narrow h1.logo a {
   width: 172px;
   background: url(../images/logo-narrow.gif) no-repeat;
}

#ja-newsflash {
   line-height: normal;
   height: 170px;
   position: relative;
   width: 22.9%;
   float: left;
   background: #5D6B74 !important;
}

#ja-scroll_1, #ja-scroll_2 {
   background: #5D6B74;
}

#ja-pathwaywrap {
   background: url(../images/opaque-default.png);
   clear: both;
   height: 30px;
}

#ja-pathway {
   display: block;
   padding: 10px 0 5px;
   color: #D0D9DF;
   width: 77%;
   float: right;
   text-indent: 20px;
   position: relative;
}

#ja-pathway strong {
   margin-right: 10px;
}

#ja-pathway img {
   margin: 0 5px 0;
}

#ja-pathway a {
   font-weight: bold;
   color: #D0D9DF;
   text-decoration: none;
}

Cancellando questo:

style="background: url(templates/<?php echo $JAconfig->template."/images/header/". $JAconfig->ja_color ."/". $ja_header_img;?>) no-repeat top right;"

mi spariscono effettivamente le immagini dell'header.

Ora mi piacerebbe sapere come posso inserire in maniera pulita il modulo, tenendo conto anche della posizione che dovrà prendere (ossia quella delle vecchie immagini dell'header)

Grazie a tutti e scusate il lungo post.

[darietto83]

qualche idea?

[Kriss]

Ciao,
intanto grazie per avermi fatto notare la mia imprecisione  , ti volevo chiedere se hai provato a mettere dove hai cancellato i riferimeti all'immagine una nuova posizione (con jdoc!  ) chiamata magari header e a pubblicarci il rotator...

[darietto83]

Ciao Kriss,
è esattamente quello che ho fatto. Il modulo si carica ma tutta la parte di visualizzazione va fuori ordine. Non quella del modulo ma di tutta la parte in alto del template escluso i moduli.

Se vedi "ja-header" esiste già nel CSS ma prima comprendeva anche le immagini. Se ci carico in "ja-header" anche il modulo mi scompiglia l'ordine.

Pensavo di aggiungere un altro "div" con un altro nome di oggetto nel Css definito apposta per il modulo. Ho già provato ma non conosco bene i parametri e non saprei cosa metterci esattamente (intendo come align, position, float, border, ecc....)

qualche aiuto, indizio, intuizione?

[Kriss]

Mmmmm, se provi a modificare la classe ja-header, inserendo anche width e nella gestione del modulo metti gli stessi valori?

[darietto83]

Mmmmm, se provi a modificare la classe ja-header, inserendo anche width

già fatto. l'ordine è ok (solo se uso "float:right" nel css ja-header), ma ci sono spostamenti di qualche decina di pixel che non c'erano prima e sono brutti.

e nella gestione del modulo metti gli stessi valori?

non fatto. almeno non credo. Cosa vuol dire? dove lo vedo mettere quel valore?

in ogni caso i parametri come align, float, ecc nel css non contano nulla?

[Kriss]

Ciao, i parametri di formattazione puoi anche metterli nell'index.
Quelli di Simple Image rotator te li indico nello screenshot 

[allegato eliminato da un amministratore]

[darietto83]

ieri sera ho fatto tante prove che ora non ricordo se avevo fatto anche quella.
Comunque sono sicuro che poi avviene un problema di sovrapposizione. Nel senso che nel template c'è una linea in corrispondenza del pathway. Quella linea dovrebbe stare sopra all'immagine. A me spariva la sfondo di quella riga e mi si vedeva solamente il pathway, e i tool per il caratteri.

e poi coe faccio a mettere i parametri anche nell'index?

sono ancora un po ignorante..
grazie

Dario