G4Plaz Romania
 
AcasaAcasa  CalendarCalendar  FAQFAQ  CautareCautare  MembriMembri  GrupuriGrupuri  InregistrareInregistrare  ConectareConectare  

 Tutorial: Categoria stil descriere hover IPB

Inapoi Inainte  Mergi jos! 
AutorMesaj
CoreeN

avatar
Rank:
Administrator
Utilizator Utilizator : 08/11/2014
Mesaje Mesaje : 199
MesajSubiect: Tutorial: Categoria stil descriere hover IPB   Mier Dec 24, 2014 10:01 pm

Acest tutorial va pune în aplicare un stil hover, atunci când sunt pe forum mouseover titlu. Tutorial de Wagner



-> Tutoriale, sfaturi și trucuri <-
stil Categorie descriere hover IPB


1º - Template
1. Deschideti index_box ,cautati

{Catrow.forumrow.FORUM_NAME} și înlocuiți-l cu:

Cod:
<Span class = "FORUM_NAME" >
   <H {catrow.forumrow.LEVEL} class = "ierarhie" > <o href= "{catrow.forumrow.U_VIEWFORUM}"  class= "forumtitle" > {catrow.forumrow.FORUM_NAME} </a> </h{catrow.forumrow.LEVEL}>
</ Span>

În cadrul acestui cod gasiti <br/>, Ștergeți-l! Acum cautati

{Catrow.forumrow.FORUM_DESC} și înlocuiți cu:


Cod:
<Span class = "forum_desc_pos" >
   <Span class = "forum_desc_con"  style = "left: 10px; opacitate: 0; display: none;" >
      <Span class = "forum_description" > {catrow.forumrow.FORUM_DESC} </ span>
   </ Span>
</ Span>




2º - CSS
In CSS adaugati codul de mai jos


Cod:
.forum_desc_pos {
   Poziția : relativă;
}
.forum_desc_con {
   Lățime :  350px ;
   afișare : nici unul;
   stânga :  10px ;
   float : stânga;
   Poziția : absolută;
   top : - 4px ;
   padding-stânga :  10px ;
   fundal : url ( "http://i.imgur.com/E4lHPSe.png" ) nu-repeta  6px  9px ;
   Z-index :  10.000 ;
}
.forum_description {
   Culoare : #FFF;
   border-radius :  3px ;
   - Moz-border-radius :  3px ;
   - WebKit-border-radius :  3px ;
   fundal : url ( "http://i.imgur.com/zkoWf4I.png" ) se repetă;
   fundal : RGBA ( 15 ,  15 ,  15 ,  0,9 );
   - WebKit-box-shadow : RGBA ( 0 ,  0 ,  0 ,  0,3 )  0px  1px  7px ;
   - Moz-box-shadow : RGBA ( 0 , 0 , 0 , 0,3 )  0px  1px  7px ;
   box-shadow : RGBA ( 0 ,  0 ,  0 ,  0,3 )  0px  1px  7px ;
   font-size :  11px ;
   padding :  5px ;
   afișare : bloc;
   float : stânga;
}


3º - Javascript
Plasare : În toate paginile


Cod:
jQuery ( document de ) .ready ( funcția ( ) {
jQuery ( ".forum_name" ) .hover ( funcția ( )  {
      jQuery ( acest ) .Etapele ( ".forum_desc_pos" ) .children ( ".forum_desc_con" ) .stop ( )
      .animate ( { stânga :  "0" , opacitatea : 1 } ,  "rapid" )
      .css ( "afișaj" , "bloc" ) ;
   } ,  funcția ( )  {
      jQuery ( acest ) .Etapele ( ".forum_desc_pos" ) .children ( ".forum_desc_con" ) .stop ( )
      .animate ( { stânga :  "10" , opacitate :  0 } ,  "rapid" ,  funcția ( ) {
         jQuery ( acest ) .hide ( ) ;
      } )
   } ) ;
} ) ;


4º - Previzualizare

Mergi sus! Mergi jos!
Vezi profilul utilizatorului      http://g4play.board.st   
 
Tutorial: Categoria stil descriere hover IPB
Inapoi Inainte Mergi sus! 
Pagina 1 din 1
 Subiecte similare
-
» [Tutorial] Cum sa faci un sistem de logare/inregistrare!

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum