Modificarea statisticilor pentru versiunea phpBB3

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Modificarea statisticilor pentru versiunea phpBB3

Mesaj Scris de Cassius Dio la data de Vin 18 Ian - 16:01

Modificarea statisticilor pentru versiunea phpBB3


Cu totii ne-am dori o modificare mai mare a statisticilor pentru versiunea phpBB3. Din pacate, clasele si/sau id-urile nu prea ne permit sa facem asta. Din acest motiv, m-am gandit ca ar fi interesant sa creez un tutorial despre cum putem sa ne modificam pe forumul nostru rubricile Cine este conectat? si Statistici. Pentru asta, vom folosi coduri JavaScript, care ne permit sa facem mult mai multe.

Mai jos va voi prezenta 3 feluri de design al statisticilor.

Cum se instaleaza?

Codul JavaScript pentru designul dorit se adauga in:
Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript

Codurile CSS asociate codului JavaScript ales se adauga in:
Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS

Design #1

~> Gestiunea codurilor JavaScript:
Cod:
$(document).ready(function(){
$('img#i_whosonline').next('p').addClass('p_cine_este_conectat');
$('div.h3:contains("Cine este conectat?")').addClass('a_cine_este_conectat');
$('div.h3:contains("Statistici")').addClass('a_statistici');
$('.a_statistici').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.p_statistici:eq(0)').addClass('p-bottom');
$('.p_statistici:eq(1)').addClass('p-bottom');
$('.p_statistici:eq(2)').addClass('p-bottom');
$('.p-bottom').wrapAll('<div class="p_statistici_toate">');
});

~> Foaie de stil CSS:
Cod:
.p_cine_este_conectat, .p_statistici_toate{
background: #EEE;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
}

.p_cine_este_conectat em{
font-style:normal!important;
padding-top: 6px;
border-top: 1px solid #DDD;
display: block!important;
}

#i_whosonline{
float: right;
}

~> Rezultat:



Design #2

~> Gestiunea codurilor JavaScript:
Cod:
$(document).ready(function(){
$('img#i_whosonline').next('p').addClass('p_cine_este_conectat');
$('div.h3:contains("Cine este conectat?")').addClass('a_cine_este_conectat');
$('div.h3:contains("Statistici")').addClass('a_statistici');
$('.a_statistici').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.p_statistici:eq(0)').addClass('p-bottom');
$('.p_statistici:eq(1)').addClass('p-bottom');
$('.p_statistici:eq(2)').addClass('p-bottom');
$('.p-bottom').wrapAll('<div class="p_statistici_toate">');
});

~> Foaie de stil CSS:
Cod:
.a_statistici, .a_cine_este_conectat{
border-bottom: none;
background: #F3F3F3;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
text-align: center;
margin-bottom: 5px;
box-shadow: inset 0px 0px 5px #DDD;
}

.p_cine_este_conectat, .p_statistici_toate{
background: #EEE;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
}

.p_cine_este_conectat em{
font-style:normal!important;
padding-top: 6px;
border-top: 1px solid #DDD;
display: block!important;
}

#i_whosonline{
float: right;
}

~> Rezultat:



Design #3

~> Gestiunea codurilor JavaScript:
Cod:
$(document).ready(function(){
$('img#i_whosonline').next('p').addClass('p_cine_este_conectat');
$('div.h3:contains("Cine este conectat?")').addClass('a_cine_este_conectat');
$('div.h3:contains("Statistici")').addClass('a_statistici');
$('.a_statistici').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.p_statistici:eq(1)').addClass('doilea');
$('.p_statistici:eq(2)').addClass('treilea');
});

~> Foaie de stil CSS:
Cod:
.a_statistici, .a_cine_este_conectat{
border-bottom: none;
background: #F3F3F3;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
text-align: center;
margin-bottom: 5px;
box-shadow: inset 0px 0px 5px #DDD;
}

.p_cine_este_conectat, .p_statistici{
background: #EEE;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
}

.p_statistici.doilea, .p_statistici.treilea{
margin-top: 3px!important;
}

.p_cine_este_conectat em{
font-style:normal!important;
padding-top: 6px;
border-top: 1px solid #DDD;
display: block!important;
}

#i_whosonline{
float: right;
}

~> Rezultat:


Acest tutorial a fost scris de catre 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.

Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 18
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 78
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