Immagine menu di navigazione

Promemoria primo messaggio :

Salve,
eccomi con un'altro problema.
Ho cercato ma non sono riuscito a trovare la soluzione per cambiare l'immagine al passaggio del mouse sulla barra di navigazione.
Se fosse possibile magari anche con una transizione tra la prima e la seconda.
Grazie mille

_cent_ ha scritto:hai attivato login Popup o forse e disativato??

non so dove guardare, non mi sembra di aver visto un'opzione simile nel PDA

amministrazione generale>configurazione soto hai Accedi popup

ok visto... è disattivato, provo ad attivarlo.
Allora, attivandolo è possibile eliminare il pulsante del login e tenere solo quello del logout.
E' una valida alternativa se non riesco a sistemare il menu ... diciamo... completo.
Adesso sono anche curioso di vedere se ci riesco con il vostro aiuto.

maurovr metti questo su Javascript In Tutte le pagine.Ho fatto il test e funziona perfetamente

Codice:

$(function() {
  x=document.getElementById('i_icon_mini_login');
  y=document.getElementById('i_icon_mini_logout');
  if(x) {
    $('#logo').after('        <form action="/login.forum" method="post" style="float:right;"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Log me on automatically each visit: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /></td></tr></tbody></table></form>');
  }
  else if(y) {
    $('#logo').after('<span class="ulogiran" style="float:right;"> <p>Welcome user <br> You have logged in, have fun bla bla!<p></span>');
  }
});

Use CSS:

Codice:

.ulogiran {
    position: relative;
    top: -250px;
    border: 1px;
}

Macchè... niente da fare, ci sono sempre i due pulsanti.


C'è qualche condizione particolare che devo dare?

alt... funziona, ma in realtà dovrei togliere il pulsante di login, perchè c'è il riquadro per il login, e poi dovrei usare il popup di connessione.
Funziona si, però non è come vorrei io... eheh veramente, desidererei avere il pulsante come l'immagine sopra.
Grazie mille _cent_, non riesci a risolvermi nel modo che vorrei il problema?

Allora ecco come togliere LogOut LogIn e tutto quello che vuoi
Vai Display>Home Page>Sopra e navigazione

Si _cent_, ma la barra di navigazione di base, l'ho già eliminata tutta, i pulsanti login/logout sono personali e desidero che si alternino quando servono.

Qua puoi mettere o togliere le url di immagine che hai messo capisci.

Si certo, ma non è quello che voglio.
Purtroppo non riesco a spiegarmi.....
Hai presente il menu di base? quando sei loggato hai l'icona/testo del LOGOUT e viceversa quando sei disconnesso hai l'icona/testo del LOGIN, ecco io desidero questo, ma con un mio menu personalizzato, tanto è vero che quello di base l'ho disattivato con il comando

Codice:

 .mainmenu{ display:none;}

Ma come no,devi cancellare da quei 2 posti le url dell imaggine.io ho provato nell mio forum e funziona maurovr.leggi le 2 posti sopra e togli le url dell imaggine nelle 2 posti

Purtroppo non cambia niente.
Loggati nel mio forum e prova, vedrai che ci sono sempre tutte e due.

maurovr ha scritto:forse ho bisogno di qualcjhe aiuto in più... allora
ho i due pulsanti di login e logout inseriti nel div questo:

Codice:

<div id="mainmenu">
<ul>
        <li><a class="mainmenu" href="/" alt="Home" title="Home" />Home</a></li>
        <li><a class="mainmenu" href= alt="portal" title="portal" />portal</a></li>
   <li><a class="mainmenu" href="/faq" alt="FAQ" title="FAQ" />FAQ</a></li>
   <li><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Search" title="Search" />Search</a></li>
        <script type="text/javascript">//<![CDATA[
   var url_search = '/search';
   insert_search_menu();//]]>
   </script>
        <li><a class="mainmenu" href="/memberlist" rel="nofollow" alt="Memberlist" title="Memberlist" />Memberlist</a>
        <li><a class="mainmenu" href="/groups" alt="Usergroups" title="Usergroups" />Usergroups</a> </li>
   <li><a class="mainmenu" href="/profile?mode=editprofile" alt="Profile" title="Profile" />Profile</a> </li>
   <li><a class="mainmenu" href="/privmsg?folder=inbox" alt="no new messages" title="no new messages" />no new messages</a> </li>
        <li><a class="logout" href="/login?logout" >Logout</a></li>
        <li><a class="login" href="/login">Login</a></li>   
</ul>
</div>

poi il tuo codice lo metto in un modulo javascrip?
e modifico nomediv con mainmenu e class con logout?
e per il login devo aggiungere un codice uguale?
scusa la mia incompetenza!

ho provato ad aggiungerlo anche nel codice html ma niente, non so cosa sbaglio.

MartinoPio? .... ehmm....dove sei?....eheh

up

Ciao,

per poter fare quello che tu chiedi è necessario usare solamente i codici css, senza assegnare alcun immagine dal pannello di amministrazione.

Se mi fornisci immagini (normali e hover) e l'indirizzo del tuo forum (Tramite Messaggio privato se preferisci) riuscirò a fornirti il codice che serve nel tuo caso

Saluti e resto in attesa

Grazie Niko, hai un MP.

Ti ricordo che è solo per passarmi le immagini (nel caso non volessi condividerle con tutti) e non per dare supporto

Attendo le immagini e provvederò a mettermi al lavoro

ok Niko,
il problema è gestire i tasti login/logout/registra in maniera corretta, cioè quando uno è loggato compare solo il tasto logout e viceversa, insomma come nel menu di base!
il menu che vorrei usare non ha immagini, ed è fatto da codice, ho disattivato quello base con l'istruzione

Codice:

 .mainmenu{ display:none;}

Ecco quello che ho messo come css:

Codice:

.mainmenu{ display:none;}
#mainmenu{
position:absolute;
left:350px;
top:250px;
}
.logout{
  top: 10px !important;
}
.login{
  top: 10px !important;
}
body {
    background: #ddd;
    margin: 30px;
}
#mainmenu    { 
    float: left;
    padding: 0;
    margin: 0;
     
    /* Box Shadow */
    box-shadow: 0 1px 0 #000;
    -moz-box-shadow: 0 1px 0 #000;
    -webkit-box-shadow: 0 1px 0 #000;
     
    /* Rounded Corners */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
     
    /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}
#mainmenu ul  {
    border-top: #f3f3f3 1px solid;
    padding: 0;
    margin: 0;
    float: left;
     
    /* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}
#mainmenu li  {
    float: left;
    list-style: none;
    background: none;
    margin-right: 1px;
}
#mainmenu a { outline: none; }
#mainmenu li a:link, #mainmenu li a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: block;
    color: #262626;
    padding: 12px 28px;
    text-decoration: none;
    text-transform: capitalize;
     
    /* CSS3 Text Shadow */ 
    text-shadow: 0px 1px 1px #fff;
     
    /* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
#mainmenu li a:hover    {
    cursor: pointer;
    color: #fff;
    text-shadow: 0px -1px 1px #000;
     
    /* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}
#mainmenu li:first-child a, #mainmenu ul {
    /* Rounded Corners */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}
#mainmenu li:last-child a, #mainmenu ul {
    /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}
a.active:link, a.active:active, a.active:visited  {   
    color: #fff !important;
    text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
     
    /* Box Shadow */
    box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
}


questo invece sul messaggio sull'indice:

Codice:

<div id="mainmenu">
<ul>
        <li><a class="mainmenu" href="/" alt="Home" title="Home" />Home</a></li>
        <li><a class="mainmenu" href= alt="portal" title="portal" />portal</a></li>
   <li><a class="mainmenu" href="/faq" alt="FAQ" title="FAQ" />FAQ</a></li>
   <li><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Search" title="Search" />Search</a></li>
        <script type="text/javascript">//<![CDATA[
   var url_search = '/search';
   insert_search_menu();//]]>
   </script>
        <li><a class="mainmenu" href="/memberlist" rel="nofollow" alt="Memberlist" title="Memberlist" />Memberlist</a>
        <li><a class="mainmenu" href="/groups" alt="Usergroups" title="Usergroups" />Usergroups</a> </li>
   <li><a class="mainmenu" href="/profile?mode=editprofile" alt="Profile" title="Profile" />Profile</a> </li>
   <li><a class="mainmenu" href="/privmsg?folder=inbox" alt="no new messages" title="no new messages" />no new messages</a> </li>
        <li><a class="logout" href="/login?logout" >Logout</a></li>
        <li><a class="login" href="/login">Login</a></li>   
</ul>
</div>


Questo menu è stato inserito nei templates giusto?
Se è così ti basterà usare questi tag ed inserirci il contenuto a seconda dello stato (registrato o ospite)

Codice:

<!-- BEGIN switch_user_logged_in -->
Inserisci contenuto da registrato
<!-- END switch_user_logged_in -->

Codice:

<!-- BEGIN switch_user_logged_out>
Inserisci contenuto da ospite
<!-- END switch_user_logged_out -->

fammi sapere!

Il codice css l'ho messo su PDA/visualizzazione/colori/foglio di stile CSS
mentre l'altro su PDA/visualizzazione/generalità/messaggio sull'indice.
Icodici che mi hai passato, dove li inserisco?
sono un pricipiante puro!!!

oh, ma quindi il menu di navigazione che hai fatto tu, lo hai aggiunto? (e un menù aggiuntivo?)

si

ah Allora questo caso la situazione diventa più complessa...

Devi inserire il contenuto che vuoi rendere visibile solo ai membri in questo tag:

Codice:

<div id="memberonly">CONTENUTO</div>

In seguito crea un nuovo codice javascript e aggiungi questo

Codice:

<script type="text/javascript">if(document.getElementById('i_icon_mini_logout')) document.getElementById('memberonly').style.display='block';</script>

Fammi sapere se funziona!

Dentro a questo div

Codice:

<div id="memberonly">CONTENUTO</div>

devo metterci il codice che ho del mio menu personale?
cioò così:

Codice:

<div id="memberonly">
<div id="mainmenu">
<ul>
        <li><a class="mainmenu" href="/" alt="Home" title="Home" />Home</a></li>
        <li><a class="mainmenu" href= alt="portal" title="portal" />portal</a></li>
   <li><a class="mainmenu" href="/faq" alt="FAQ" title="FAQ" />FAQ</a></li>
   <li><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Search" title="Search" />Search</a></li>
        <script type="text/javascript">//<![CDATA[
   var url_search = '/search';
   insert_search_menu();//]]>
   </script>
        <li><a class="mainmenu" href="/memberlist" rel="nofollow" alt="Memberlist" title="Memberlist" />Memberlist</a>
        <li><a class="mainmenu" href="/groups" alt="Usergroups" title="Usergroups" />Usergroups</a> </li>
   <li><a class="mainmenu" href="/profile?mode=editprofile" alt="Profile" title="Profile" />Profile</a> </li>
   <li><a class="mainmenu" href="/privmsg?folder=inbox" alt="no new messages" title="no new messages" />no new messages</a> </li>
        <li><a class="logout" href="/login?logout" >Logout</a></li>
        <li><a class="login" href="/login">Login</a></li>   
</ul>
</div>
</div>

se così è... non funziona, ma sicuramente sbaglio io.