Personalizarea categoriilor pe versiunile phpBB3 si Invision

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Personalizarea categoriilor pe versiunile phpBB3 si Invision

Mesaj Scris de Cassius Dio la data de Mier 6 Mar - 11:49

Personalizarea categoriilor pe versiunile phpBB3 si Invision

Luand in consideratie faptul ca multi nu stiu sa-si personalizeze forumurile pe versiunile phpBB3 si Invision motivand ca nu au acces la editarea template-urilor, am decis sa scriem un tutorial despre cum puteti sa va personalizati usor categoriile pentru versiunile fara acces la editarea template-urilor.

Pentru versiunea phpBB3 - demonstratie

1. Instalarea codurilor JavaScript:

Vizitati:
Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript
Creati un nou cod JavaScript.

Completati rubricile astfel:
Titlu * : Personalizare categorii
Amplasare : Indexul forumului
Cod JavaScript * : Inserati urmatorul cod:
Cod:
$(document).ready(function(){
   $('.forabg ul.topiclist.forums li.row').each(function(){
      $(this).find('dd.posts').wrapInner('<div class="w_posts">');
      $(this).find('dd.topics').wrapInner('<div class="w_topics">');
      var towtopics = $(this).find('.w_topics');
      $(this).find('.w_posts').insertAfter(towtopics);
      $(this).find('.w_topics').append('subiecte');
      $(this).find('.w_posts').append('mesaje');
   });
   $('.forabg ul.topiclist li.header dd.topics').text('Statistici');
});
Salvati modificarile efectuate.

2. Instalarea codurilor CSS:

Vizitati:
Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS

Adaugati urmatorul cod:
Cod:
.forabg ul.topiclist li.header dd.posts{
  visibility: hidden;
  width: 0px;
}

.forabg ul.topiclist.forums li.row dd.posts{
  visibility: hidden;
  width: 10px;
}

.w_posts, .w_topics{
  visibility: visible !important;
}

.w_topics, .w_posts{
  background: white;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #DDD;
  top: 7px;
  position: relative;
  width: 100%;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 7px;
  font-weight: bold;
}

.forabg ul.topiclist.forums li.row dd.topics, .forabg ul.topiclist li.header dd.topics{
  width: 12%;
}

.forabg ul.topiclist.forums li.row dd.posts, .forabg ul.topiclist li.header dd.posts{
  width: 20px;
}

.forabg ul.topiclist.forums li.row dd.topics{
  padding-left: 10px;
}

.forabg ul.topiclist li.header dd.topics{
  padding-left: 10px !important;
}
Salvati modificarile efectuate.

Pentru versiunea Invision - demonstratie

1. Instalarea codurilor JavaScript:

Vizitati:
Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript
Creati un nou cod JavaScript.

Completati rubricile astfel:
Titlu * : Personalizare categorii
Amplasare : Indexul forumului
Cod JavaScript * : Inserati urmatorul cod:
Cod:
$(document).ready(function(){
   $('.borderwrap .ipbtable.index-box tbody tr').each(function(){
      $(this).find('td.row2.centered').wrapInner('<div class="w_posts">');
      $(this).find('td.row1.centered').wrapInner('<div class="w_topics">');
      var towtopics = $(this).find('.w_topics');
      $(this).find('.w_posts').insertAfter(towtopics);
      $(this).find('.w_topics').append(' subiecte');
      $(this).find('.w_posts').append(' mesaje');
      $(this).find('td.row1:last').addClass('fortdbackground');
   });
   $('.borderwrap .ipbtable.index-box thead tr th.topics').text('Statistici');
   $('.borderwrap .ipbtable.index-box thead tr th.replies').remove();
   $('.borderwrap .ipbtable.index-box tbody tr td.row2.centered').remove();
   $('.borderwrap .ipbtable.index-box tfoot tr td[colspan="4"]').attr('colspan','3');
});
Salvati modificarile efectuate.

2. Instalarea codurilor CSS:

Vizitati:
Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS

Adaugati urmatorul cod:
Cod:
td.fortdbackground{
  background-color: #EFF1F3;
}

.borderwrap .ipbtable.index-box thead tr th.topics{
  width: 14% !important;
}

.borderwrap .ipbtable.index-box thead tr th.last.post-info{
  width: 270px !important;
}

.w_posts, .w_topics{
  visibility: visible !important;
}

.w_topics, .w_posts{
  background: white;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #DDD;
  top: 7px;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 7px;
  font-weight: bold;
  padding: 5px;
}

Tutorial scris 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.

Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
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