posicionamento do início e fim da pagination mobile

Endereço do fórum: rpgplayers.forumeiros.com Versão do fórum: ModernBB 

Descrição:
Boa noite.
Este é um código que insere a pagination mobile completa.

O js está 99% finalizado.
Porém o >> (fim) e o << (início) ficaram com os locais trocados, estando um no lugar do outro.



Ademais, os dois estão como texto, e gostaria que fossem alterados para os ícones padrões da forumeiros.
Já fiz isso para as setas simples, mas não sei quais são os links do double arrow right e do double arrow left.




Passagem:

Código:


      if (d == 0 && current > 1) newPage('omobile_prev_button block', '<p><<</p>', '/t' + tid + tname, title);

      else if (d == 1 && current != last) newPage('omobile_next_button block', '<p>>></p>', '/t' + tid + 'p' + Number(perpage * last - perpage) + tname, title);


js Completo:

Código:


$(function() {
      var perpage = 10, // amount of messages before a new page is added
      p = document.getElementsByTagName('P'), l = window.location.pathname, current, last, tid = l.replace(/\/t(\d+).*/,'$1'), tname = l.replace(/(\/t\d+|\/t\d+p\d+)(-.*)/,'$2'), style = document.createElement('STYLE'), css = '.pagi {height:auto;color:#FFF;position:static;margin:2px}.pagactif{color:#FF8;cursor:default}.scroller{position:absolute;width:30px;height:35px;cursor:pointer}.left.scroller{background:url(https://2img.net/i/fa/mobile/inner-left-arrow.png) no-repeat center #444;top: 7px;left:51px}.right.scroller{background:url(https://2img.net/i/fa/mobile/inner-right-arrow.png) no-repeat center #444;top: 7px;right:51px}', i,j;

      if (style.styleSheet) style.styleSheet.cssText = css;
      else style.appendChild(document.createTextNode(css));
      document.getElementsByTagName('HEAD')[0].appendChild(style);
    
      for (i=0; i<p.length; i++) {
        if (/mobile_title_content/.test(p[i].className)) {
          current = Number(p[i].innerHTML.replace(/.*?<strong>(\d+)<\/strong>.*?<strong>\d+<\/strong>/i,'$1'));
          last = Number(p[i].innerHTML.replace(/.*?<strong>\d+<\/strong>.*?<strong>(\d+)<\/strong>/i,'$1'));
        }
      }
    
      if (last >= current) {
        var b = document.getElementsByTagName('DIV'), title = document.createElement('DIV'), cen = document.createElement('DIV'), left = document.createElement('DIV'), right = document.createElement('DIV'), c = 1, d = 0;
        title.className = 'mobile_title', left.className = 'left scroller', right.className = 'right scroller', cen.className = '{PAGINATION}', cen.setAttribute('style','left:85px;right:85px;text-overflow:clip;');
        for (j=0; j<b.length; j++) if (/mobile_title/.test(b[j].className)) if (/\d+/.test(b[j].nextSibling.id) || /poll/.test(b[j].nextSibling.className)) b[j].parentNode.insertBefore(title,b[j].nextSibling);
        title.appendChild(cen), title.appendChild(left), title.appendChild(right);
    
        left.onmousedown = function() { cen.scrollLeft -= 100 };
        right.onmousedown = function() { cen.scrollLeft += 100 };
    
      while (d < 2) {
          if (d == 0 && current > 1) newPage('omobile_prev_button block', '<p><<</p>', '/t' + tid + tname, title);
          else if (d == 1 && current != last) newPage('omobile_next_button block', '<p>>></p>', '/t' + tid + 'p' + Number(perpage * last - perpage) + tname, title);
          d += 1;
        } while (last + 1 > c) {
          if (c == current) newPage('.mobile_next_button block', c, 'javascript:void(0);', cen, 'currentPage');
          else newPage('.mobile_next_button block', c, '/t' + tid + 'p' + Number(perpage * c - perpage) + tname, cen);
          c += 1;
        }
        cen.scrollLeft = document.getElementById('currentPage').offsetLeft;
      }
      function newPage(classname, html, href, par, id) {var page = document.createElement('A'); page.className = classname, page.innerHTML = html, page.href = href, par.appendChild(page); if (id) page.id = id}
    });


Css completo:

Código:


.\.mobile_prev_button.block, .\.mobile_next_button.block {
        background-color: #09796f;
        border-radius: 100px;
        color: #FFF;
        font-size: 1.5rem;
        font-weight: 400;
        margin: 0 3px 0 0;
        padding: 10px;
        text-align: center;
        text-decoration: none;
    }
    .\{PAGINATION\} {
        overflow: hidden;
        position: absolute;
        display: flex;
        line-height: 20px;
        top: 4px;
    }

    a#currentPage {
        background: #e91e63;
    }

    a.omobile_next_button.block {
     top: 0px;
        background: #cecece;
        position: absolute;
        left: 0;
        width: 40px;
        height: auto;
        cursor: pointer;
    }

    a.omobile_prev_button.block {
    top: 0px;
        background: #cecece;
        position: absolute;
        right: 0;
        width: 40px;
        height: auto;
        cursor: pointer;
    }


Local para exemplo:
https://rpgplayers.forumeiros.com/t1124p820-qual-rpg-voce-esta-jogando

Era apenas uma questão de CSS.
Já consegui corrigir.

Código:


    a.omobile_prev_button.block {
        background: #000000 !important;
        color: white !important;
        left: 0 !important;
        right: auto !important;
    }
    a.omobile_next_button.block {
        background: #000000 !important;
        color: white !important;
        right: 0 !important;
        left: auto !important;
    }


Podem fechar o tópico.