Personnaliser la pagination

[alv]

Bonjour,
J'aimerai personnaliser la pagination des sujets. Ceci : [ Aller à la page: 1, 2, 3]
Comment enlever : [ Aller à la page:, les virgules et ] ? Pour qu'il n'y ai plus que les chiffres, comme sur ce forum.
Merci d'avance.

[alv]

up

[alv]

up svp

[alv]

Up

[wims]

Salut,

Je pense que c'est inhérent à la version de ton forum (mais je peux me tromper).

[alv]

Ah, zut !
Je vais attendre voir si quelqu'un me confirme ça.
Merci.

[alv]

Up

[WhyNot]

Hello,

Dans le template topics_list_box, tu peux trouver cette ligne :

Code:

<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>

et la remplacer par :

Code:

<span class="gensmall paginer">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>

Tu peux enregistrer et mettre dans le CSS

Code:

.paginer {
    font-size: 0;
}
.paginer img {
    display: none;
}
.paginer a {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    color: #000000;
    display: inline-block;
    font-size: 9px;
    margin: 0 3px;
    padding: 0 2px;
    text-decoration: none;
}

Tu peux bien sûr modifier les couleurs de fond / d'écriture / de bordure

[alv]

Merci beaucoup.

Comment enlever "Aller à la page :" dans les sujets ?
J'ai essayé avec ton code, mais ça met "Aller à la page :" de la même apparence que les "1", "2", "3"...

[alv]

Up

[WhyNot]

Hello,

Dans viewtopic_body il faut remplacer (présent 2 fois dans le template) :

Code:

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

par :

Code:

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

Et le CSS précédent est à remplacer par :

Code:

.paginer,.paginer_topic {
   font-size:0;
}
.paginer img,.paginer_topic img {
   display:none;
}
.paginer a,.paginer_topic a,.paginer_topic b {
   background-color:#FFFFFF;
   border:1px solid #000000;
   color:#000000;
   display:inline-block;
   font-size:9px;
   margin:0 3px;
   padding:0 2px;
   text-decoration:none;
}
.paginer_topic a[onmousedown^='createPagination'] {
   display: none;
}

[alv]

Parfait.
Dernière question : j'ai mis une image vide à la place de la flèche "Précédent" dans "Gestion des images". Le petit problème est que d'avoir mis "padding: 0px 2px 1px 2px" pour les liens, ça met ça aussi pour l'image vide. Comment faire pour que "padding: 0px 2px 1px 2px" ne soit pas sur l'image vide ?

[alv]

Up

[alv]

Up

[alv]

Up svp

[alv]

Up   

[Invité]

Salut alv,

avec la css cela ne sera pas possible,
par contre ce petit javascript fera l'affaire   .

On va dans un premier temps modifier la C.S.S :
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Supprimes le contenu donné par WhyNot (que je salue au passage)et remplace le par celui-ci:

Code:


.paginer,.paginer_topic
{
font-size:0;
}
.paginer a,.paginer_topic a,.paginer_topic b
{
background-color:#FFFFFF;
border:1px solid #000000;
color:#000000;
display:inline-block;
font-size:9px;
margin:0 3px;
padding:0 2px;
text-decoration:none !important;
}


Penses à cliquer sur le bouton



Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite : comme (Modifier la pagination)

Cocher "Sur les sujets" .

Dépose ce contenu:

Code:


//on supprime le texte allez a la page
$(function(){
$(".paginer_topic a:first ").remove();
});
//on supprime le  bloc precedent
$(function(){
$(".paginer_topic a:nth-child(2) ").remove();
});

//on supprime le  bloc suivant
$(function(){
$(".paginer_topic a:last-child ").remove();
});



Penses à cliquer sur le bouton


a++

[alv]

Merci beaucoup.

Un petit problème :

Sur l'image d'en haut (qui correspond à la pagination au début d'un sujet), tout est bon, mais sur l'image d'en bas (qui correspond à la pagination à la fin d'un sujet), le bloc précédent n'a pas disparu.
J'ai fais toutes les étapes que t'as indiqué.

2ème chose : le javascript ne s'exécute que vers la fin du chargement total de la page. Est-il possible que la suppression des blocs se fasse dès le début du chargement ?

Merci.

[WhyNot]

Hello,

C'est le problème du javascript : il ne s'exécute qu'après chargement de la page pour pouvoir agir sur l'élément (sinon il n'existe pas encore).
Mais en CSS il est possible de supprimer cette image, et là c'est instantané.

Du coup, tu peux remplacer le CSS précédent par celui-ci :

Code:

.paginer, .paginer_topic {
    font-size: 0;
}
.paginer img, .paginer_topic img {
    display: none;
}
.paginer a, .paginer_topic a, .paginer_topic b {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    color: #000000;
    display: inline-block;
    font-size: 9px;
    margin: 0 3px;
    padding: 0 2px;
    text-decoration: none;
}
.paginer_topic a:last-child {
    display: none;
}
.paginer_topic a[onmousedown^="createPagination"] {
    display: none;
}

Et normalement le JS donné par Milouze14 (que je salue également) peut être supprimé aussi. Je viens de tester, ça me semble fonctionner.

[alv]

Merci.
Pour supprimer le bloc précédent, j'ai mis ceci en plus :

Code:

.paginer_topic a:nth-child(2) {
        display: none;
        }

mais ça n'a pas marché.
Je dois mettre quoi ?

[WhyNot]

Quel bloc précédent ? J'ai testé en phpBB2 et je n'ai plus rien que les chiffres des pages

[alv]

Je suis aussi en phpbb2.

Je parle du bloc qui comprend la flèche "précédente". La case vide de l'image du bas :

[WhyNot]

Tu peux me donner le lien d'une page où je peux voir ça ? Je ne l'ai pas sur mon forum, bizarrement

[alv]

L'adresse de mon forum est dans mon profil mais tu ne pourra pas voir le problème, je suis entrain de refaire toute l'apparence et je n'ai pas encore publié le template.

[alv]

Up

[alv]

Up

[WhyNot]

Hello,

Sans voir directement, et sans l'avoir moi-même sur mon forum de test, ça m'est plus difficile de te proposer une solution

[alv]

Merci pour ton aide
Peut-être que quelqu'un pourra trouver une solution.

[WhyNot]

Hello,

Je persiste parce que ça m'intrigue, je n'ai pas l'image non plus, avant les pages, comme sur ton image :


A la limite, je veux bien le code source de cette partie (au cas où : sélectionne la ligne complète : CTRL + clic sur la colonne, clic droit, "Code source de la sélection")

[alv]

Voilà le code sur une page liste des sujets :

Code:

<td valign="bottom"><div align="right"><table style="font-size: 11px; text-align: left" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><span class="gensmall paginer_topic"><script type="text/javascript">
//<![CDATA[
var agt = navigator.userAgent.toLowerCase();
var originalFirstChild;
var display = false;

function msg(message)
{
   if( typeof(console) == "undefined" )
   {
      alert(message);
   }
   else
   {
      console.info( message );
   }
}
function createPagination(which, string, x, y)
{
   if ( display == true )
   {
      destroyPagination();
      display = false;
   }
   else
   {
      display = true;

      if (typeof(originalFirstChild) == "undefined")
      {
         originalFirstChild = document.body.firstChild;
      }

      /* Pour maximiser les compatbilit�s IE6/7/8 en quirk/doctyped */
      var de = !document.documentElement.clientWidth?document.body:document.documentElement;
      x = document.all ? (event.clientX + de.scrollLeft) : x;
      y = document.all ? (event.clientY + de.scrollTop) : y;

      element = document.createElement("div");
      element.style.position = "absolute";
      element.style.zIndex = 1000;
      element.style.visibility = "hidden";
      excessWidth = 0;

      excessHeight = 20;
      element.innerHTML = '<table cellspacing="0" cellpadding="0" border="0" style="width:auto;"><tr><td><span class="gen">' + string + "</span></td></tr></table>";
      renderedElement = document.body.insertBefore(element, document.body.firstChild);
      renderedWidth = renderedElement.offsetWidth;
      renderedHeight = renderedElement.offsetHeight;

      overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth;
      x = overFlowX > 0 ? x - overFlowX : x;

      overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset;
      y = overFlowY > 0 ? y - overFlowY : y;

      renderedElement.style.top = (y + 15) + "px";
      renderedElement.style.left = (x + 15) + "px";

      if (agt.indexOf("gecko") != -1 && agt.indexOf("win") != -1)
      {
         setTimeout('renderedElement.style.visibility = "visible"', 1);
      }
      else
      {
         renderedElement.style.visibility = "visible";
      }
   }
}

function Pagination()
{
}

function do_pagination_start()
{
   var start = document.go_page.start.value;
   start = (start > 2) ? 2 : start;
   start = (start - 1) * 40;
   start = (isNaN(start) || start < 0 ) ? 0 : start;

self.location.href = start ? ['','f42p'+start+'-l-asse-80-ans-saint-etienne-3208-matchs-depuis-1933'].join('/') : ['','f42-l-asse-80-ans-saint-etienne-3208-matchs-depuis-1933'].join('/');

}

function destroyPagination()
{
   if (document.body.firstChild != originalFirstChild)
   {
      document.body.removeChild(document.body.firstChild);
   }
}
//]]>
</script><a href="javascript:Pagination();" onmousedown="createPagination(this, '<form name=&quot;go_page&quot; ><table class=&quot;forumline&quot; cellpadding=&quot;5&quot; cellspacing=&quot;1&quot; border=&quot;0&quot; width=&quot;150&quot;><tr><th class=&quot;thHead&quot;>Aller à la page</th></tr><tr><td class=&quot;row1&quot; align=&quot;center&quot;><input type=&quot;text&quot; class=&quot;bginput&quot; name=&quot;start&quot; size=&quot;5&quot; onKeyPress=&quot;if (event.keyCode==13) { do_pagination_start();return false; }&quot; /> <input type=&quot;button&quot; class=&quot;button&quot; value=&quot;Aller&quot; onclick=&quot;do_pagination_start();return false;&quot; /></td></tr></table></form>', event.pageX, event.pageY);">Aller à la page</a> : <b>1</b>, <a href="/f42p40-l-asse-80-ans-saint-etienne-3208-matchs-depuis-1933?tt=1">2</a>  <a href="/f42p40-l-asse-80-ans-saint-etienne-3208-matchs-depuis-1933?tt=1"><img src="http://2img.net/i/fa/empty.gif" alt="Suivant"></a></span><br><span style="font-size: 5px"><br></span></td></tr></tbody></table></div></td>