Chenar elegant pentru statisticile unei categorii si ultimul mesaj ~ phpBB2

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Chenar elegant pentru statisticile unei categorii si ultimul mesaj ~ phpBB2

Mesaj Scris de Zeus la data de Mier 9 Iul - 21:45

Chenar elegant pentru statisticile unei categorii si ultimul mesaj ~ phpBB2
Bun gasit,

Datorita numarului de solicitari din partea dumneavoastra in suport, in minutele urmatoare am sa va arat cum puteti personaliza statisticile si ultimele mesaje ale categoriilor, totul in 3 pasi simpli. In tutorialul de astazi vom efectua modificari in template-ul index_box si foaia de stil css, urmand ca in final, sa admiram rezultatul mult dorit. Pasii din acest tutorial sunt valabili doar pentru versiunea phpBB2, deci haideti sa incepem.  Foarte fericit 

Demonstratie:


1. Setari necesare in panou:

Intrati in Panou de administrare => Afisare => Pagina de start => Structura si ierarhie => Ierarhie:
Afisati titlul subiectului ultimului mesaj, la index : Bifati Da
Afiseaza avatarele in coloana "Ultimele mesaje" : Bifati Da
Urmand ca imediat dupa sa apasati pe  Inregistrare .

2. Modificari in template-ul index_box:

Intrati in Panou de administrare => Afisare => Template-uri => General => index_box:

Cautati:
Cod:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>

Inlocuiti cu:
Cod:
<tr>
        <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>

Cautati:
Cod:
<td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Inlocuiti cu:
Cod:
<td class="row2" align="left" valign="middle" height="45">
         <div class="stats" style="width: 90px"><span class="gensmall">
         <font color="#465361">Subiecte<div class="stats1">{catrow.forumrow.TOPICS}</div></font></span></div>
         <div class="stats" style="width: 90px"><span class="gensmall">
         <font color="#465361">Mesaje<div class="stats1">{catrow.forumrow.POSTS}</div></font></span></div>
       </td>
        
      <td class="row3 over" align="left" valign="middle">
        <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
        <div class="stats" style="width: 200px"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
     </td>

* Inregistrati si publicati template-ul.

3. Modificari in foaia de stil css:

Intrati in Panou de administrare => Afisare => Imagini si culori => Culori => Foaie de stil css:

Adaugati:
Cod:
.stats{
  border: solid 1px #adadad;
  padding: 4px;
  margin-bottom: 2px;
  border-radius: 4px;
  background: #f9f9f9;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.10);
}

.stats font{color: #777 !important;}

.stats1{
  float: right;
  height: 0px;
  font-weight: bold;
}

.lastpost-avatar {
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

Explicarea codurilor css:
color: #777 !important; - ce este marcat cu rosu reprezinta culoarea textului, aceasta poate fi inlocuita cu cea dorita.

background: #f9f9f9; - ce este marcat cu verde reprezinta culoarea de fundal, aceasta poate fi inlocuita cu cea dorita sau poate fi dezactivata pur si simplu prin simpla inlocuire a culorii cu transparent.

border: solid 1px #adadad; - ce este marca cu albastru reprezinta culoarea chenarului, aceasta poate fi inlocuita cu cea dorita.

O lista de culori puteti gasi in acest ghid:
http://help.forumgratuit.ro/t15-coduri-culori

Si asta a fost tot!  Banana 
Tutorial scris de H4cK3R uL si Zeus

Copyright ˆ Forumgratuit.ro Nici o 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.

Zeus
Administrator
Administrator

masculin

Mesaje : 3971
Localizare : Bucuresti, Romania
Data de inscriere : 19/02/2012
Multumiri : 611
Niciun avertisment

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum