Suggestion: adding additional classes

  • Resolved dylanjameswagner

    (@dylanjameswagner)


    12 years, 3 months ago

    Developers,

    Currently this plugin outputs a unordered list with a different class for each shortcode used – list-pages, sibling-pages, child-pages.

    I believe it would be quite useful for styling purposes if they all lists had a class in common so they could all be selected and styled easily. Then applied a specific class for child-pages and sibling-pages lists.

    Example: Part I – HTML

    <ul class=”list-pages”>

    <ul class=”child-pages”>

    <ul class=”sibling-pages”>

    Example: Part II – CSS
    Currently i have to select each class version to style all of them with the same base styles.

    .list-pages,
    .sibling-pages,
    .child-pages {
    text-align: center; }
    .list-pages li,
    .sibling-pages li,
    .child-pages li {
    list-style: none;
    display: inline-block; }
    .list-pages a,
    .sibling-pages a,
    .child-pages a {
    padding: 1em; }

    Solution: Part I
    Provide a class for all lists that are created, as well as more specific classes

    <ul class=”list-pages”>

    <ul class=”list-pages child-pages”>

    <ul class=”list-pages sibling-pages”>

    Solution: Part II
    With a base class available I could select all types and style base styles.

    .list-pages {
    text-align: center; }
    .list-pages li {
    list-style: none;
    display: inline-block; }
    .list-pages a {
    padding: 1em; }

    Solution: Part III
    Secondary classes allow me to target child-pages or sibling-pages and add styles or override existing styles.

    .sibling-pages {}
    .sibling-pages li { }
    .sibling-pages a {}

    .child-pages {}
    .child-pages li { }
    .child-pages a {}

    Thanks for taking the time to read this. I have been using your plugin for some time, it is super simple to use and maintain, and it saves me quite a lot of headache. I hope you can see the usefulness of my suggestion.

    https://ww.wp.xz.cn/plugins/list-pages-shortcode/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Ben Huson

    (@husobj)

    12 years, 3 months ago

    I think your approach makes sense and certain simplifies the styling process.

    It may have a slight impact on some existing users if they have chosen to style ‘list-pages’ and ‘sibling-pages’ completely differently where ‘sibling-pages’ could unintentionally inherit some of the styling of ‘list-pages’.

    For that reason I would consider it might be better to add a new style ‘list-pages-shortcode’ to all lists and append the existing style so you would end up with:

    .list-pages-shortcode.list-pages {}
.list-pages-shortcode.sibling-pages {}
.list-pages-shortcode.child-pages {}

    More verbose but is backward compatible.

    What do you think?

    Thread Starter dylanjameswagner

    (@dylanjameswagner)

    12 years, 3 months ago

    I had considered this, but couldn’t think of a good class name since .list-pages was already being used. I think your solution works to solve that and retain clear backward compatibility.

    Thanks Ben for hearing me out, hope to see this in a future update!

    Plugin Author Ben Huson

    (@husobj)

    12 years, 3 months ago

    It’s a simple tweak so I’ll make sure it’s in the next release.

    Thread Starter dylanjameswagner

    (@dylanjameswagner)

    12 years, 3 months ago

    Awesome!

    Plugin Author Ben Huson

    (@husobj)

    12 years, 3 months ago

    Now released in version 1.7

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Suggestion: adding additional classes’ is closed to new replies.