Lista membrii Invision pentru PunBB si phpBB2

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Lista membrii Invision pentru PunBB si phpBB2

Mesaj Scris de Omu la data de Dum 16 Sept - 11:38

Lista membri in format tip Invision - pentru Punbb

Demonstratie:
1) Găsirea template-ului:
Panou de Administrare Afisare Template-uri General memberlist_body
2) Identificarea și înlocuirea codurilor:
Căutați, apoi ștergeți:
Cod:
               <thead>
                  <tr>
                     <th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
                     <!-- BEGIN switch_th_group -->
                     <th class="tc2">{L_GROUPS}</th>
                     <!-- END switch_th_group -->
                     <th class="tc3">{L_INTERESTS}</th>
                     <th class="tc2">{L_JOINED}</th>
                     <th class="tc2">{L_VISITED}</th>
                     <th class="tc3">{L_POSTS}</th>
                     <th class="tc3">{L_PM}</th>
                     <th class="tc3">{L_WEBSITE}</th>
                  </tr>
               </thead>
Acum, căutați:
Cod:
                  <!-- BEGIN memberrow -->
                  <tr>
                     <td class="tcl avatar-mini"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG} <span>{memberrow.USERNAME}</span></a></td>
                     <!-- BEGIN switch_td_group -->
                     <td class="tc2">{memberrow.GROUPS}</td>
                     <!-- END switch_td_group -->
                     <td class="tc3">{memberrow.INTERESTS}</td>
                     <td class="tc2">{memberrow.JOINED}</td>
                     <td class="tc2">{memberrow.LASTVISIT}</td>
                     <td class="tc3">{memberrow.POSTS}</td>
                     <td class="tc3">{memberrow.PM_IMG}</td>
                     <td class="tc4">{memberrow.WWW_IMG}</td>
                  </tr>
                  <!-- END memberrow -->
Și înlocuiți cu:
Cod:
                  <!-- BEGIN memberrow -->

 <div class="tableUsers">
   <div class="userNames">{memberrow.USERNAME}</div>

        <div class="userAvatar">
                <a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a>
        </div>
  
        <div class="infoUsers">
                {L_JOINED}: {memberrow.JOINED}<br />
                {L_VISITED}: {memberrow.LASTVISIT}<br />
                {L_POSTS}: {memberrow.POSTS}
        </div>
  
        <div class="contactUsers">
                {memberrow.PM_IMG} 
                {memberrow.WWW_IMG}
    </div>
  </div>
                  <!-- END memberrow -->
3) Găsirea Foii de stil CSS:
Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS
4) Inserarea stilului în foaia de stil CSS:
Adaugați în interiorul foii de stil CSS, ( la început, la mijloc sau la sfârșit ), conținutul codului urmator:
Cod:
/* Butoane contact */

.contactUsers {
padding:2px;
border-top: 1px solid #ddd;
margin-top: -45px;}

.contactUsers img {
width: auto;
height: auto;}

/* Tabel general */
.infoUsers {
margin-left: 55px;
padding: 5px !important;
top: -50px;
position: relative;}

.tableUsers {
box-shadow: 0px 0px 4px #ccc;
background: #f3f3f3;
border: 1px solid #ddd;
display: inline-table !important;
width: 250px;
font-size:11px;
margin: 5px;
font-family: Verdana,Arial,Helvetica,sans-serif;
border-radius: 4px;
-moz-border-radius: 4px;
padding: 5px;
-webkit-border-radius: 4px;}

/* Avatar user */

.userAvatar img {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;  
border: 1px solid #ddd;
width: 50px;
height: 50px;}

.userAvatar img:hover { box-shadow: 0px 0px 4px #ccc;}

/* Nume useri */

.userNames {
border-bottom: 1px solid #ddd;
padding: 2px;
margin-bottom: 4px;}
 
Acest tutorial a fost scris de catre Omu
Ultima actualizare: 13.01.2013

   Copyright ˆ Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Omu
Membru onorific
Membru onorific

masculin

Mesaje : 6310
Varsta : 20
Data de inscriere : 04/11/2010
Multumiri : 153
Niciun avertisment

http://www.tech-titans.net/

Sus In jos

Tutorial Lista membri Insivion pentru Phpbb2

Mesaj Scris de Omu la data de Dum 16 Sept - 12:03

Lista membri format Invision pentru Phpbb2

Demonstratie:

1) Găsirea template-ului:
Panou de Administrare Afisare Template-uri General memberlist_body
2) Identificarea și înlocuirea codurilor:
Căutați:
Cod:
   <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">#</th>
      <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
      <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
      <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
      <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
      <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
      <th class="thTop" nowrap="nowrap">{L_PM}</th>
      <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
   </tr>
Și înlocuiți cu:
Cod:
   <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">Lista membri</th>
   </tr>
Acum, căutați:
Cod:
   <!-- BEGIN memberrow -->
   <tr>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>
      <!-- BEGIN switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
      <!-- END switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td>
   </tr>
   <!-- END memberrow -->
Și înlocuiți cu:
Cod:
   <!-- BEGIN memberrow -->
   <tr>
          <td>
       <div class="tableUsers">
   <div class="userNames">{memberrow.USERNAME}</div>

   <div class="userAvatar">
                <a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a>
        </div>
   
        <div class="infoUsers">
                {L_JOINED}: {memberrow.JOINED}<br />
                {L_VISITED}: {memberrow.LASTVISIT}<br />
                {L_POSTS}: {memberrow.POSTS}
        </div>
   
        <div class="contactUsers">
                {memberrow.PM_IMG}
                {memberrow.WWW_IMG}
        </div>

            </div>
          </td>
        </tr>
   <!-- END memberrow -->
3) Găsirea Foii de stil CSS:
Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS
4) Inserarea stilului în foaia de stil CSS:
Adaugați în interiorul foii de stil CSS, ( la început, la mijloc sau la sfârșit ), conținutul codului urmator:
Cod:
/* Butoane contact */

.contactUsers {
padding:2px;
border-top: 1px solid #ddd;
margin-top: -45px;}

.contactUsers img {
width: auto;
height: auto;}

/* Tabel general */
.infoUsers {
margin-left: 55px;
padding: 5px !important;
top: -50px;
position: relative;}

.tableUsers {
box-shadow: 0px 0px 4px #ccc;
background: #f3f3f3;
border: 1px solid #ddd;
display: inline-table !important;
width: 250px;
font-size:11px;
margin: 5px;
font-family: Verdana,Arial,Helvetica,sans-serif;
border-radius: 4px;
-moz-border-radius: 4px;
padding: 5px;
-webkit-border-radius: 4px;}

/* Avatar user */

.userAvatar img {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px; 
border: 1px solid #ddd;
width: 50px;
height: 50px;}

.userAvatar img:hover { box-shadow: 0px 0px 4px #ccc;}

/* Nume useri */

.userNames {
border-bottom: 1px solid #ddd;
padding: 2px;
margin-bottom: 4px;}
Acest tutorial a fost scris de catre Omu
Ultima actualizare 13.01.2013

Copyright © Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Omu
Membru onorific
Membru onorific

masculin

Mesaje : 6310
Varsta : 20
Data de inscriere : 04/11/2010
Multumiri : 153
Niciun avertisment

http://www.tech-titans.net/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum