Inlocuirea imaginilor pentru sistemul de reputatie

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Inlocuirea imaginilor pentru sistemul de reputatie

Mesaj Scris de Cassius Dio la data de Mier 30 Ian - 14:50

Inlocuirea imaginilor pentru sistemul de reputatie

Cu ajutorul acestui tutorial puteti inlocui plictisitorul text "+" si "-" cu niste imagini. Este vorba despre sistemul de reputatie. Mai jos aveti si o previzualizare:



Atentie!
Daca folositi versiunea phpBB3 sau Invision, click aici pentru a urma pasii necesari

Daca folositi versiunea phpBB2 sau PunBB, click aici pentru a urma pasii necesari

Pentru versiunile phpBB3 si Invision

Pasul 1: CSS
Accesati:
Panou de Administrare => Afisare => Imagini si culori => Culori => Foaia de stil CSS

Adaugati urmatorul cod:
Cod:
.vote .vote-no-bar{
display: none;
}

.vote{
width: auto;
}

.vote-button{
width: auto;
}

.vote-button a{
font-size: 0px !important;
color: transparent !important;
}
Salvati. Pentru a face asta click pe butonul .

Pasul 2: Codul JavaScript
Accesati:
Panou de Administrare => Module => HTML & JAVASCRIPT => Gestiunea codurilor JavaScript

Creati un nou cod JavaScript ()

Adaugati urmatorul cod:
Cod:
jQuery(document).ready(function(){
jQuery("div.vote-button a:contains('+')").append(jQuery('<img src="http://i.imgur.com/VT55P.png" alt="Mesaj util" Title="Mesaj util" />'));
jQuery("div.vote-button a:contains('-')").append(jQuery('<img src="http://i.imgur.com/BE86Y.png" alt="Mesaj inutil" Title="Mesaj inutil" />'));
});
Inregistrati modificarile efectuate, click pe .

Pasul 3: Inlocuirea imaginilor

Link-urile imaginilor actuale:

Exclamare Daca doriti modificarea imaginilor, puteti face asta foarte simplu, inlocuind link-urile actuale (cele scrise cu culoarea albastra) ca in codul de mai jos:

jQuery(document).ready(function(){
jQuery("div.vote-button a:contains('+')").append(jQuery('<img src="http://i.imgur.com/VT55P.png" alt="Mesaj util" Title="Mesaj util" />'));
jQuery("div.vote-button a:contains('-')").append(jQuery('<img src="http://i.imgur.com/BE86Y.png" alt="Mesaj inutil" Title="Mesaj inutil" />'));
});


Pentru versiunile phpBB2 si PunBB

Pasul 1:Template
Accesati:
Panou de Administrare => Afisare => Template-uri => General

Click pe iconita Modifica () de la template-ul viewtopic_body.

Gasiti acest fragment (pentru butonul +):
Cod:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
si inlocuiti-l cu:
Cod:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="http://i.imgur.com/VT55P.png" alt="Mesaj util" border="0" /></a></div>
<!-- END switch_vote -->

Gasiti urmatorul fragment (pentru butonul -):
Cod:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
si inlocuiti-l cu:
Cod:
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="http://i.imgur.com/BE86Y.png" alt="Mesaj inutil" border="0" /></a></div>
<!-- END switch_vote -->

Salvati () si publicati () template-ul.

Pasul 2: Inlocuirea imaginilor

Link-urile imaginilor actuale:

Exclamare Daca doriti modificarea imaginilor, puteti face asta foarte simplu, inlocuind link-urile actuale (cele scrise cu culoarea albastra) ca in codurile de mai jos:

- pentru butonul "+":
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="http://i.imgur.com/VT55P.png" alt="Mesaj util" border="0" /></a></div>
<!-- END switch_vote -->

- pentru butonul "-":
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="http://i.imgur.com/BE86Y.png" alt="Mesaj inutil" border="0" /></a></div>
<!-- END switch_vote -->

Pasul 3: CSS

Accesati:
Panou de Administrare => Afisare => Imagini si culori => Culori => Foaie de stil CSS

Adaugati urmatorul cod:
Cod:
.vote {
float:right;
margin-left:4px;
width: 30px;
}
.vote .vote-no-bar {
text-align: center;
}

Nota: (numai pentru versiunile phpBB2 si PunBB) Daca aveti blog-urile activate, efectuati aceleasi modificari si pentru template-ul viewcomments_body.

Felicitari! Daca ati urmat cu exactitate pasii de mai sus, veti obtine si rezultatul cuvenit. Noroc

Acest tutorial a fost scris de Dana Domirani de pe forumul rus de suport, tradus si modificat de SGSS

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.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum