Creare modulo che cambi l'immagine a seconda del login/logout

[Xabaras78]

Ciao a tutti, sul mio sito ho creato una variante del modulo di login tramite un effetto slide del mootools... Per questo ho creato un altro modulo ad hoc contenente unicamente un'immagine su cui cliccare per fare aprire o chiudere il pannello per loggarsi... Vorrei rendere la cosa un po' piu' "precisa" facendo in modo che, prima di loggarsi, appaia un'immagine con su scritto "login" e, dopo che ci si e' loggati, appaia al suo posto un'immagine con su scritto "logout"... ovviamente occorre qualche riga di php, ma non ho idea di come si possa fare la cosa.... qualche suggerimento?
Grazie
 

[.Andrea S.]

Ciao,
Puoi usare un mambot: rokaccess

Nel modulo contenente la sola img ci piazzi:

Codice: [Seleziona]

{rokaccess guest}codice img login{/rokaccess}
{rokaccess !guest}codice img logout{/rokaccess}

Carino il modulo, perchè non lo condividi?
 

[Xabaras78]

Grazie andrea, ho risolto agevolmente modificando in 1 minuto il classico mod_login di joomla...
Per quanto riguarda la mia personalizzazione, ho modificato il template del mio sito inserendo nell'index.php, prima di </head>

Codice: [Seleziona]

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.js"></script>

e

Codice: [Seleziona]

<script type="text/javascript">
window.addEvent('domready', function(){
var yourSlides = $$('.login');
var togslide = $$('.tog');

yourSlides.each(
function(el, i){

var slider = new Fx.Slide(el);
slider.hide();

togslide.each(
function(elem, j){
if ( j == i )
elem.addEvent('click', function(){
slider.toggle();
});

if (j != i)
elem.addEvent('click', function(){
slider.slideOut();
});
});
});
});
</script>

Quest'ultima e' la funzione che crea lo slide verticale di un certo div che abbia "login" come id e che si attivi cliccando su qualunque cosa sia di classe "tog" (nel mio caso l'immagine che voglio cambiare a seconda del login)

Infine, attorno al div che contiene il mio normale mod_cblogin ho messo

Codice: [Seleziona]

<div class="login">
       <?php mosLoadModules('advert2', -2); ?>
</div>

Piccola avvertenza: cosi' facendo lo slide ha effetto su tutta la posizione intera nel template, per questo ho dovuto crearne 2 nuove in cima... una che contenga la sola immagine su cui cliccare per far apparire/sparire il modulo del login; un'altra sottostante che contenga il modulo login stesso; e sotto ancora quelle che c'erano di default (right).

Spero sia chiaro... 

[thkcq73]

Ciao mephisto, avevo gia visto il tuo modulo nel tuo sito e sono arrivato a questo topic cercando propio un modulo per avere il login a scomparsa....

ho modificato index.php del template inserendo questo codice prima di </head>

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
   var yourSlides = $$('.login');
   var togslide = $$('.tog');   
   
   yourSlides.each(
      function(el, i){
                  
      var slider = new Fx.Slide(el);
      slider.hide();
         
      togslide.each(
         function(elem, j){
            if ( j == i )
            elem.addEvent('click', function(){
               slider.toggle();
            });

            if (j != i)
            elem.addEvent('click', function(){
               slider.slideOut();
            });
         });         
      });
});
</script>

ma, avendo poca esperienza con php non capisco l'ultimo passaggio?

il codice da aggiungere è sempre nell'index del template?

ti sarei grato se mi spiegassi in un modo un po diverso....

[Xabaras78]

Premessa banale, ma ovviamente devi anche aver scaricato il mootools.js da mettere in una cartella js all'interno di quella del tuo template... 

Cmq, sì, anche quell'altra piccola modifica va fatta all'interno dell'index.php del tuo template; in sostanza devi andare a trovare il codice relativo alla posizione in cui c'e' il modulo di login e su cui vuoi che appaia l'effetto di slide. Mettiamo il caso la posizione sia user2... dovrai andare a cercare nel codice  qualcosa tipo

Codice: [Seleziona]

<?php mosLoadModules('user2', -2); ?>

e farlo diventare

Codice: [Seleziona]

<div class="login">
       <?php mosLoadModules('user2', -2); ?>
</div>

Questo fa sì che tutto cio' che sta in user2 sia etichettato come "login" e risponda all'effetto slide di sopra... Ovviamente per questo dovresti tenere SOLO il modulo di login in quella posizione, per non vederti sparire anche altra roba... Dipende tutto da com'e' messo il tuo template e quante posizioni ti offre... Per adattare tutto al mio template, ho dovuto creare una posizione in piu' nella colonna di destra, per farle ospitare unicamente il modulo login e far si che l'effetto slide non intaccasse altro...
Infine, per quanto riguarda l'immagine/scritta su cui cliccare per attivare lo slide, la crei dove ti pare e come ti pare, anche con un piccolo modulo, purche' contenga qualcosa di classe  "tog" (nel mio caso ho creato una piccola immagine con su scritto LOGIN, e l'ho dichiarata di classe tog) perche' cosi' come e' configurata la funzione di slide, "tog" e' il pulsante di accensione e "login" e' l'oggetto da far slidare...
Spero sia un po' piu' chiaro ora.. 


p.s. piccola nota: ovviamente l'effetto si visualizza benissimo su FF e simili... mentre e' facile immagine su quale browser a volte funzioni a volte no... bah

[thkcq73]

Mi sembra un po troppo complicato per le mie conoscenze, lo terrò come esercizio di studio per le prossime settimane, e spero di riuscirci x il momento ti ringrazio.... 

[thkcq73]

Sono passati quasi 2 mesi ma con la buona volontà si raggiungono tutti i risultati...... sono riuscito ad aggiungere il modulo a scomparsa/login nel mio sito...... 

ho scaricato mootools da qui
http://mootools.net/download
(ho spuntato tutti gli elementi xchè non sapevo quale era + adatto a me, xchè con quello base non funzionava. Mi consigliate di scaricare solo quello necessario per alleggerire il sito, e quale?)

ho caricato questo file in:
/templates/semplice/includes/js/

poi sono andato a modificare INDEX del template aggiungendo questo prima di </head>

Codice: [Seleziona]

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
   var yourSlides = $$('.login');
   var togslide = $$('.tog');   
   
   yourSlides.each(
      function(el, i){
                 
      var slider = new Fx.Slide(el);
      slider.hide();
         
      togslide.each(
         function(elem, j){
            if ( j == i )
            elem.addEvent('click', function(){
               slider.toggle();
            });

            if (j != i)
            elem.addEvent('click', function(){
               slider.slideOut();
            });
         });         
      });
});
</script>
ora ho creato un modulo con dentro questo...(ricordate di creare un'immagine nel percorso con scritto LOGIN)

Codice: [Seleziona]

<img src="http://miosito/templates/miotemplate/images/login.jpeg" class="tog" alt="login" />
ora questo modulo crea un'immagine con classe tog per lo script, potete metterlo all'interno del sito dove vi pare....
quando clikkate sull'immagine -login- di questo modulo, parte lo script.....

ora bisogna inserire il modulo per effettuare il login in una posizione particolare del template e tutto quello dichiarato in questa posizione tenderà a puff /puff (scomparire)

andate in SITO/GESTIONE TEMPLATE/POSIZIONE BLOCCO MODULO e create una posizione chiamata
login

ora inserite questo codice nell' index del vostro template tra <body> </body> nella posizione che vi fa comodo....

Codice: [Seleziona]

<div class="login">
<?php mosLoadModules('login',-2 ); ?>
</div>
andate in moduli, richiamate il vostro modulo LOGIN e dategli come posizione template LOGIN

a questo punto il modulo login a scomparsa è funzionante..... rimane una piccola modifica per fare in modo che, avvenuto il login l'immagine cambia con una con scritto LOGOUT

create un altro modulo con scritto questo(ricordatevi di creare un'immagine in questo percorso con scritto LOGOUT)

Codice: [Seleziona]

<a href="http://miosito/index.php?option=logout">
<img src="/templates/semplice/images/logout.jpeg" alt="logout" />
</a>

posizionate questo modulo nello stesso posto del modulo con l'immagine LOGIN e mettete come permessi la visibilità hai solo registrati....

ora seguite questa guida per fare in modo che l'immagine con scritto LOGIN e lo stesso modulo del login scompaino quando l'utente e loggato....

http://forum.joomla.it/index.php/topic,19006.0.html

potete vedere il modulo qui

http://www.oromagna.it

x mephisto78: hai usato anche tu questa procedura? mi sono permesso di prenderti in prestito per un attimo il tuo modulo login (arancione) fino a quando ne faccio uno, l'hai creato tu o c'è un sito dove attingere? mi sono permesso anche di aggiungere nel css del mio sito una dichiarazione per l'immagine del login per fare in modo che quando il mouse c passa sopra si vede il ditino del clik

cursor:pointer;

[Xabaras78]

Ohila',
si bene o male la procedura e' simile... Per trovare ispirazione ho guardato nel classico mod_login di joomla (basta guardarci dentro per capire immediatamente come fare), e ho creato un modulo unico che visualizza l'immagine login (di classe tog per attivare lo slide) quando l'utente e' sloggato, mentre visualizza l'immagine di logout (che fa sloggare direttamente al click) quando l'utente e' loggato, il tutto molto semplice e in poche righe... Sostanzialmente e' una cosa del tipo:

Codice: [Seleziona]

if ( $my->id ) {
?>
<div align="center">
         <?php if($tstyle==light_orange) : ?>
             <a href="index.php?option=logout"><img src="<?php echo $mosConfig_live_site;?>/images/button2.png" border="0" /></a>
         <?php endif; ?>
      </div>
.
.
.
<?php
} else {
// Login output
?>
<div align="center">
         <?php if($tstyle==light_orange) : ?>
                <img src="<?php echo $mosConfig_live_site;?>/images/button1.png" class="tog" />
.
.
.

(poi questo modulo mi e' stato utilissimo per personalizzare i pulsanti anche in base alle varie colorazioni del mio sito e per mettere orologi swf diversi a seconda delle colorazioni...)

Quanto alle immagini, le ho fatte io, rielaborando qualche pulsante che avevo trovato in rete, non sono niente di che, ma se ti servono usale pure tranquillamente...

Infine, un consiglio: tanto per cambiare se c'e' un browser che puo' litigare con gli effetti mootools, e' IE... e molti utenti che lo usano potrebbero vedere NON aprirsi completamente il modulo con lo slide... e quindi non riuscire a loggarsi... Ti suggerisco quindi di mettere ben visibile da qualche parte un link al login classico che permetta agli utenti IE in difficolta' di loggarsi cmq...

[thkcq73]

In effettti un modulo non sempre compatibile con tutti i browser (sopratutto quello del login ) non è consigliato, anche io avevo notato che non si apriva regolarmente con cEx_PLORER...pensavo di aver risolto inserendo nella posizione del modulo una finta immagine di spaziatura.....

Codice: [Seleziona]

<div class="ombra"/>
</div>
con il suo css

Codice: [Seleziona]

div.ombra
background:#FFFFFF none repeat scroll 0%;
clear:both;
margin:0pt;
padding:2px 0pt;
}
quindi, il codice da inseriri all'interno dell'index del template per il modulo login sarebbe.....

<div class="login">
<?php mosLoadModules('login',-2 ); ?>
<div class="ombra"/>
</div>
</div>

....... a questo punto sarebbe interessante sapere se qualcheduno, con browser diversi non riesce a visualizzare questo modulo

grazie

ps. cmq grazie x il consiglio inserirò un collegamento login alternativo