Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Personalizarea categoriilor pe versiunile phpBB3 si Invision

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Personalizarea categoriilor pe versiunile phpBB3 si Invision

Mesaj Scris de Cassius Dio Mier Mar 06, 2013 11:49 am

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

Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 1. Instalarea codurilor JavaScript:

Vizitati:
Panou de Administrare Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Module Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow HTML & JAVASCRIPT Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 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.

Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 2. Instalarea codurilor CSS:

Vizitati:
Panou de Administrare Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Afisare Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Imagini si culori Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Culori Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 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

Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 1. Instalarea codurilor JavaScript:

Vizitati:
Panou de Administrare Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Module Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow HTML & JAVASCRIPT Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 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.

Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 2. Instalarea codurilor CSS:

Vizitati:
Panou de Administrare Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Afisare Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Imagini si culori Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow Culori Personalizarea categoriilor pe versiunile phpBB3 si Invision Arrow 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 realizat de Cassius Dio, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Cassius Dio

Cassius Dio
Membru onorific
Membru onorific

Mesaje : 10826
Varsta : 26
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Mulțumiri : 84
Internet Explorer phpBB3

http://beatles.forummo.com/
Cassius Dio a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum