Cum pot face paginație asa

Buna tuturor cum pot face si eu paginația asa Screenshot:https://2img.net/h/s22.postimg.cc/wwtl2b88h/screenshot_34.png

Salutare,

Întrucât acest lucru nu poate fi realizat prin intermediul modificării template-urilor, am făcut mici coduri JavaScript pe care le puteți utiliza în funcție de versiunea forumului pe care o folosiți.

Pentru phpBB2:

Cod:

$(document).ready(function(){
$("img[alt='Inapoi']").parent().attr("class", "pag-prev").find("img").replaceWith("Inapoi");
$("img[alt='Urmatorul']").parent().attr("class", "pag-next").find("img").replaceWith("Inainte");
});

Pentru phpBB3:

Cod:

$(document).ready(function(){
$(".pag-img").has("img[alt='Inapoi']").attr("class", "pag-prev").html("Inapoi");
$(".pag-img").has("img[alt='Urmatorul']").attr("class", "pag-next").html("Inainte");
});

Pentru punBB:

Cod:

$(document).ready(function(){
$(".paging img[alt='Inapoi']").parent().attr("class", "pag-prev").find("img").replaceWith("Inapoi");
$(".paging img[alt='Urmatorul']").parent().attr("class", "pag-next").find("img").replaceWith("Inainte");
});

Pentru Invision:

Cod:

$(document).ready(function(){
$(".pagination img[alt='Inapoi']").parent().attr("class", "pag-prev").find("img").replaceWith("Inapoi");
$(".pagination img[alt='Urmatorul']").parent().attr("class", "pag-next").find("img").replaceWith("Inainte");
});

„Trucul” acestor coduri este că înlocuiesc iconițele standart cu text („Înainte” / „Înapoi”), care se afișează exact ca paginile „1”, „2”, „3”, „4” etc. Suplimentar, le-am adăugat și câte o clasă pentru a putea efectua schimbări prin CSS asupra lor:
- pentru textul „Înainte”:

Cod:

.pag-next{

}

- pentru textul „Înapoi”:

Cod:

.pag-prev{

}

Codurile JavaScript se adaugă în Panoul de administrare > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript, iar cele CSS în Panoul de administrare > Imagini si culori > Culori > Foaie de stil CSS. Dacă nu ați mai folosit codurile JavaScript până acum, nu uitați să activați gestiunea acestora. Detalii aici:
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

da momentan rezolvat dar eu am nevoie de codurile css.. pentru personalizare ca daca nu le am nu am rezolvat nimic

Coduri CSS pentru personalizarea fiecărui link din „paginație”.

phpBB3:

Cod:

.pagination span a{

}

punBB:

Cod:

.paging a:not([onmousedown]){

}

Invision:

Cod:

.pagination a:not(.goto){

}

În cazul în care folosiți phpBB2, e nevoie inițial de mici modificări în template-ul topics_list_box, care poate fi găsit în Panoul de administrare > Afisare > Templateuri > General. Trebuie să adăugați o clasă specifică pentru „paginare”, întrucât pe phpBB2 nu există una. Acest lucru se face înlocuind:

Cod:

<span class="gensmall">{PAGINATION}</span>

cu:

Cod:

<span class="gensmall bbtwopagination">{PAGINATION}</span>

Atenție însă la faptul că acest cod se găsește de două ori în template: unul pentru paginarea deasupra topic-urilor și alta de desubtul lor. Le înlocuiți pe ambele.

Ulterior, puteți folosi și codul CSS, având deja un selector:

Cod:

.bbtwopagination a:not([onmousedown]){

}

nu ma refeream la asta eu am nevoie de codul css in sine cu efectul ala adica cu background culoare marime font exact cum este in poza...

Folosind codurile de mai sus puteți personaliza butoanele în funcție de cum vă place, adăugând culoare la text, fundal, chenar etc. De exemplu, pentru Invision puteți folosi așa un cod:

Cod:

.pagination a:not(.goto){
background-color: #555;
border: 1px solid #363636;
color: #eee !important;
padding: 3px 6px;
}

Același cod poate fi aplicat pentru toate versiunile, schimbând numai selectorii (prima linie din cod: .pagination a:not(.goto)) cu cei corespunzători versiunii.

Pentru a personaliza căsuța cu numărul paginii pe care vă aflați, folosiți:

Cod:

.pagination strong{

}

Cod:

     <div class="pagination clearfix left ">
      <ul class="ipsList_inline left pages">
                  <li class="pagejump clickable pj0395843001" id="anonymous_element_1">{PAGE_NUMBER}</li>&nbsp;&nbsp;{PAGINATION}
                  <script type="text/javascript">
  //<![CDATA[
jQuery(function($) {
  $(".pagination ul li.pagejump").next().remove();
  $(".pagination ul li.pagejump").next().remove();
  $(".pagination ul").each(function() {
    this.innerHTML = this.innerHTML.replace(/ : |, |&nbsp;&nbsp;/g, "");
  });
  $('.pagination ul a:has(".sprite-arrow_prosilver_right")').wrap('<ul class="ipsList_inline forward left"><li class="next"></li></ul>');
  $(".pagination ul > ul").insertAfter(".pagination ul:eq(0)");
  var a = $(".ipbfs_titlebox h1").text();
  $(".pagination .next a").html("Next").attr("rel", "next").attr("title", "" + a + " - Next page");
  $(".pagination ul li").nextAll().wrap('<li class="page"></li>');
  $('.pagination ul li a:has(".sprite-arrow_prosilver_left")').unwrap();
  $('.pagination ul a:has(".sprite-arrow_prosilver_left")').wrap('<ul class="ipsList_inline back left"><li class="prev"></li></ul>');
  $(".pagination .prev a").html("Prev").attr("rel", "prev").attr("title", "" + a + " - Previous page");
  $(".pagination .back.left").insertBefore(".pagination ul:eq(0)");
  $('.pagination ul li.page:has("b")').addClass("active");
});
  //]]>
</script>
          </ul></div>

Credit Stark.

SSYT imi poti da si ocdul css complet?

Scuze, insa codul nu il mai are... am reusit sa fac rost doar de acest cod ...