Inserare autor, avatar si data postarii inainte de mesaje

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Inserare autor, avatar si data postarii inainte de mesaje

Mesaj Scris de Omu la data de Joi 24 Ian - 21:29

Inserare autor inainte de mesaje + avatarul si data postarii

Urmând cu atenție pașii acestui tutorial puteți adăuga înaintea mesajelor postate intr-un subiect, un chenar ce cuprinde avatarul celui ce a deschis subiectul, data deschiderii și titlul subiectului.

Tutorialul functioneaza pentru toate versiunile deci pentru a-l aplica la versiunea dumneavoastra nu trebuie decit sa urmati pasii indicati mai jos:
=> Pasii pentru versiunea phpBB3 - click aici;
=> Pasii pentru versiunea phpBB2 - click aici;
=> Pasii pentru versiunea PunBB - click aici;
=> Pasii pentru versiunea Invision - click aici.

Versiunea phpBB3 - demonstratie


1. Codurile Javascript
Mergeti in
:
Panou de Administrare => Module => Gestiunea codurilor javascript =>

La amplasare, bifati: Topicuri


Cod:
jQuery(document).ready(function(){
$('.page-title').after('<div class="casuta_titlu"></div>');
$('#main-content .page-title:first').removeClass('page-title').addClass('tip_titlu');
$('.postprofile dl dt a:first').clone().prependTo('.casuta_titlu');
$('.casuta_titlu a img').addClass('left');
$('.tip_titlu').appendTo('.casuta_titlu');
$('.casuta_titlu').append('<div class="chenar_postator"></div>');
$('.author:first').clone().appendTo('.chenar_postator');
});

$(document).ready(function(){
      var x=$('.chenar_postator .author')[0];
          if(x){x.innerHTML=x.innerHTML.replace(/Scris de/,'Deschis de');}
        });

$(document).ready(function(){
      var x=$('.chenar_postator .author')[0];
          if(x){x.innerHTML=x.innerHTML.replace(/la data de/,' - ');}
        });

2. Personalizarea cu ajutorul foii de stil CSS
Mergeti in
:
Panou de Administrare => Afisare => Culori => Foaie de stil CSS
Inserați conținutul chenarului următor:
Cod:
.casuta_titlu {
border: 1px solid #CADCEB;
background: #E1EBF2;
border-radius: 6px;
padding: 3px;}

.casuta_titlu a img {
padding-right: 7px;
max-width: 45px;
max-height: 45px;}

Versiunea phpBB2 - demonstratie


1. Codurile Javascript
Mergeti in
:
Panou de Administrare => Module => Gestiunea codurilor javascript =>

La amplasare, bifati: Topicuri


Cod:
jQuery(document).ready(function(){
$('table:has("td.nav")').after('<div class="casuta_titlu"></div>');
$('#page-body .cattitle:first').removeClass('cattitle').addClass('tip_titlu');
$('.postdetails.poster-profile a:first').has('img').clone().prependTo('.casuta_titlu');
$('.casuta_titlu a img').addClass('left');
$('.tip_titlu').appendTo('.casuta_titlu');
$('.casuta_titlu').append('<div class="chenar_postator"></div>');
$('.data-postarii:first').clone().insertAfter($('.tip_titlu'));
$('.name:first').clone().insertAfter('.casuta_titlu .sprite-icon_miniposted');

$('.casuta_titlu .sprite-icon_miniposted').after(' Deschis de ');
$('.casuta_titlu .name').after(' la date de ');
});

2. Personalizarea cu ajutorul foii de stil CSS
Mergeti in
:
Panou de Administrare => Afisare => Culori => Foaie de stil CSS
Inserați conținutul chenarului următor:
Cod:
.casuta_titlu {
border: 1px solid #069;
background: #EFEFEF;
padding: 3px;
padding-bottom: 8px;
margin-bottom: 5px;}

.casuta_titlu a img {
padding-right: 7px;
max-width: 45px;
max-height: 45px;}

.data-postarii { display: inline-block !important;}
.casuta_titlu .data-postarii { font-size:10px !important;}

3. Modificarea template-urilor
Mergeti in
:
Panou de Administrare => Afisare => Template-uri => General => viewtopic_body

Găsiți acest fragment de cod:
Cod:
<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
și înlocuiți-l cu:
Cod:
<div class="data-postarii"><img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</div>
Salvați și publicați template-ul. Noroc

Versiunea PunBB - demonstratie


1. Codurile Javascript
Mergeti in
:
Panou de Administrare => Module => Gestiunea codurilor javascript =>

La amplasare, bifati: Topicuri


Cod:
jQuery(document).ready(function(){
$('#main-content .pun-crumbs.noprint').after('<div class="casuta_titlu"></div>');
$('.posthead a:first').addClass('tip_titlu');
$('.user-ident .user-basic-info a:first').clone().prependTo('.casuta_titlu');
$('.casuta_titlu a img').addClass('left');
$('.tip_titlu').clone().appendTo('.casuta_titlu');
$('.casuta_titlu').append('<div class="chenar_postator"></div>');
$('.data-postarii:first').clone().appendTo('.chenar_postator');
$('.chenar_postator .data-postarii').prepend('<img class="icon-postare" src="http://illiweb.com/fa/prosilver_grey/icon_participate.gif">');
$('.chenar_postator .icon-postare').after(' <dfn style="font-style:normal; display: inline-block;">Deschis de</dfn> ');
$('.user-ident .username:first').clone().appendTo('.chenar_postator').insertAfter('.chenar_postator dfn').css('display','inline-block').css('margin-left','3px');
});

2. Personalizarea cu ajutorul foii de stil CSS
Mergeti in
:
Panou de Administrare => Afisare => Culori => Foaie de stil CSS
Inserați conținutul chenarului următor:
Cod:
.casuta_titlu {
border: 1px solid #069;
background: #EFEFEF;
padding: 3px;
padding-bottom: 18px;
margin-bottom: 5px;}

.casuta_titlu a img {
padding-right: 7px;
max-width: 45px;
max-height: 45px;}

.data postarii h4.username, .data postarii dfn, .data-postarii{
display: inline-block !important;
}

.casuta_titlu .data-postarii{
font-size:10px !important;
}

3. Modificarea template-urilor
Mergeti in
:
Panou de Administrare => Afisare => Template-uri => General => viewtopic_body

Găsiți acest fragment de cod:
Cod:
{postrow.displayed.POST_DATE_NEW}
și înlocuiți-l cu:
Cod:
<div class="data-postarii">{postrow.displayed.POST_DATE_NEW}</div>
Salvați și publicați template-ul. Noroc

Versiunea Invision - demonstratie


1. Codurile Javascript
Mergeti in
:
Panou de Administrare => Module => Gestiunea codurilor javascript =>

La amplasare, bifati: Topicuri


Cod:
jQuery(document).ready(function(){
$('#main-content #navstrip').after('<div class="casuta_titlu"></div>');
$('.borderwrap .post-container .postbody-head h3:first').addClass('tip_titlu');
$('.postprofile dl dt a:first').clone().prependTo('.casuta_titlu');
$('.casuta_titlu a img').addClass('left');
$('.tip_titlu').appendTo('.casuta_titlu');
$('.casuta_titlu').append('<div class="chenar_postator"></div>');
$('.author:first').clone().appendTo('.chenar_postator');
});

$(document).ready(function(){
      var x=$('.chenar_postator .author')[0];
          if(x){x.innerHTML=x.innerHTML.replace(/Scris de/,'Deschis de');}
        });

$(document).ready(function(){
      var x=$('.chenar_postator .author')[0];
          if(x){x.innerHTML=x.innerHTML.replace(/la data de/,' - ');}
        });

2. Personalizarea cu ajutorul foii de stil CSS
Mergeti in
:
Panou de Administrare => Afisare => Culori => Foaie de stil CSS
Inserați conținutul chenarului următor:
Cod:
.casuta_titlu {
border: 1px solid #979BA0;
background: #E4E6E9;
padding: 10px;}

.casuta_titlu a img {
margin-top: -6px;
margin-left: -7px;
padding-right: 7px;
max-width: 45px;
max-height: 45px;}


Tutorial scris de Omu & 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
Omu
Membru onorific
Membru onorific

masculin

Mesaje : 6317
Varsta : 21
Data înscrierii : 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