We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Editar botões de paginação

    • 29723
    • 52 Posts
    thelon Reply #1, 15 years, 11 months ago
    Boa tarde.
    Fazia tempo que eu não enchi por aqui né ?! rs

    Estou com outro problema agora
    Comecei um novo site e nele vou usar um sistema de paginação na página principal como pode ser visto nesse link: http://usion.ind.br/novo_site

    Eu gostaria de editar a fonte e cor dos botões.

    Da para personalizar o visual da paginação incluindo os parametros na chamada do Ditto:

    tplPaginatePrevious Template para o proximo link
    tplPaginateNext Template para o link para a pagina anterior
    tplPaginateNextOff Template para usar se não tiver proxima pagina
    tplPaginatePreviousOff Template para usar quando nnao tiver pagina anterior
    tplPaginatePage Template para o link da pagina
    tplPaginateCurrentPage Template para o link da pagina atual

    Apenas é necessario usar este parametros se o formatação padrão não agradar.

    Seguem os tpls padroes como exemple para criar o seu:

    $tplPaginatePrevious : "<a href='[+url+]' class='ditto_previous_link'>[+lang:previous+]</a>";
$tplPaginateNext  : "<a href='[+url+]' class='ditto_next_link'>[+lang:next+]</a>";
$tplPaginateNextOff : "<span class='ditto_next_off ditto_off'>[+lang:next+]</span>";
$tplPaginatePreviousOff : "<span class='ditto_previous_off ditto_off'>[+lang:previous+]</span>";
$tplPaginatePage : "<a class='ditto_page' href='[+url+]'>[+page+]</a>";
$tplPaginateCurrentPage : "<span class='ditto_currentpage'>[+page+]</span>";

    Eu tentei fazer isso mas não entendi onde vai o código de alteração.
    Tentei por em diversos lugares mas nada deu resultado.

    Obrigado smiley
      conhe
      • 7231
      • 4,205 Posts
      dev_cw Reply #2, 15 years, 11 months ago
      Para editar as fontes e cores use um estilo css. Vemos que o codigo esta usando as classes padrões do Ditto, então podemos usar estas classes para controlar o visual. Se colocar isso no seu CSS voce vai ver os links com estilo:
      a.ditto_previous_link, a.ditto_next_link {
	text-decoration:none;
    padding: 10px;
    font-size: 86%;
    color: black;}

a.ditto_page { 
    padding: 10px;
    font-size: 86%;
    color: black;}

span.ditto_currentpage {
    border: 1px solid black;
    padding: 1px 5px 2px;
    margin-right: 1px;
    background-color: #008CBA;
    color: #fff;}
    
a.ditto_previous_link:hover, a.ditto_next_link:hover {
	text-decoration:underline;
    color: red;}

      Dai é so modificar a vontade. grin

      Obs: voce tem um comentario HTML dentro do seu CSS que pode causar problemas. Dentro do CSS use /* comentario */ inves de <!-- comentario --> wink
        [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx
        Something is happening here, but you don&#39;t know what it is.
        Do you, Mr. Jones? - [bob dylan]
        • 29723
        • 52 Posts
        thelon Reply #3, 15 years, 11 months ago
        Agora deu certo tongue
        Vou fuçar aqui e ver o que consigo

        Muito obrigado novamente.


        Obs: voce tem um comentario HTML dentro do seu CSS que pode causar problemas. Dentro do CSS use /* comentario */ inves de <!-- comentario -->

        Desconhecia isso. Obrigado pelo aviso smiley
          conhe