Support » Plugin: List category posts » request: add span to paginator's current page

  • The code generated by paginator is roughly as follows (assuming #2 is current page:
    <li><a>1</a></li><li>2</li><li><a>3</a></li>
    The code I would prefer is:
    <li><a>1</a></li><li><span>2</span></li><li><a>3</a></li>

    The reason is that the span would give me an additional CSS hook. For example, adding padding to the
    <li> is very different from adding padding to the <a> selector (larger clickable area, hover effect, etc.) and being able to add the same padding to span would make it consistent with the links.

    This change should not affect current installs.
    https://wordpress.org/plugins/list-category-posts/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Fernando Briano

    (@fernandobt)

    Hi Eric, thanks for this suggestions. This was actually added to the latest code and will be available on the next version of the plugin. The current page will be different by having a class in the li so you can style it with CSS. It will look like this:

    <li class='lcp_currentpage'>current_page</li>

    The css on this page is seriously messed up.

    Unfortunately, by not allowing a <span> element inside the

    <li> element we won’t be able to properly style that element as the other pages have an <a> element inside that can be modified independent of the
    <li> element.
    Therefore, without an internal element only the font/text can be different than the remaining “buttons”.

    If you redesign the code as:
    <li><span class='lcp_currentpage'>current_page</span></li>

    Then we can modify the entire element (width, height, background color, border) independent of the </li> element and the other “buttons”.
    Thanks,
    Chad

    It looks like the page is interpreting <li> in the original text as an html tag.
    Mod should be able to fix. My mistake.

    I fixed. Any time you’re using ANY code in your posts, please use the code tags.

    <code gets codified> 🙂

    Thanks Mika. Lesson learned.

    Fernando, I agree with Chad. A span would be more flexible than simply adding a class to the <li> element. Although adding the class to the list item is more consistent with WordPress practice, so this would work for all:

    <li class='lcp_currentpage'><span>current_page</span></li>

    Plugin Author Fernando Briano

    (@fernandobt)

    Eric,
    We discussed this issue further with Chad on GitHub and it seems -for now- there’s no specific reason to add a span to the current page:
    https://github.com/picandocodigo/List-Category-Posts/issues/180

    Is there any specific styling you would like on the current page li that you need some help with?

    Thanks Fernando,
    It’s true that you the hook you added allows almost any customization you want. It’ll just take a tiny bit extra work since in some cases I’ll be styling the container <li> and in some cases I’ll be styling the content <a>.

    The span would have allowed me to style them both together

    .lcp_paginator li {
        padding: 5px;
    }
    .lcp_paginator li a,
    .lcp_paginator li span {
        padding: 10px;
    }

    Instead, I have to do a little math

    .lcp_paginator li {
        padding: 5px;
    }
    .lcp_paginator li a {
        padding: 10px;
    }
    .lcp_paginator li.lcp_currentpage {
        padding: 15px;
    }

    Have the same issue as Eric3D, it would be much less “messy” in the css to have an inside element.

    But, I am willing to work around anything you finally decide. Ultimately, it’s 6 of one and half dozen of the other.

    Chad

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘request: add span to paginator's current page’ is closed to new replies.