Dani Llewellyn

Hi Staci,

For the first problem it looks like I wrote dodgy stylesheet code 🙂 I should not have forced a fixed width and height in an attempt to get square boxes, but should have let them auto-size. The following CSS should fix it in Chrome for now, until I put-out a release that includes the same changes (note that on modern browsers this will mean slightly rectangular, rather than exactly square, boxes):

.az-letters ul.az-links li {
    // You may modify these to support older browsers. The values here are the same
    // as those in the plugin. For your particular font it appears that 2.2em will
    // work, but you might want to make it slightly larger to account for variances
    // in browser engine, which can change the way fonts are rendered slightly
    // between different vendors.
    width: 2em;
    height: 2em;
}

// These styles below shouldn't need modification. They're what I'm going to
// include in the plugin in a future release.
@supports(display: grid) {
.az-letters ul.az-links {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-gap: 0.2em;
}
.az-letters ul.az-links li {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0.1em 0.2em;
}
}

For the second issue I think this is due to my attempt at limiting the CSS to pages where the shortcode is present or the widget is active on the site. This would explain why adding/removing the widget is causing the change in behaviour. The good news is I anticipated such things, and so you can add into your theme or child-theme’s functions.php file a snippet of code to force the stylesheet to be included:

<?php
/* If the file is already in your theme then the line above is probably already 
there. It tells the server where PHP code is to separate it from HTML (you probably
know this already, but for completeness sake I've mentioned it :-) */

add_action( 'init', 'a_z_listing_force_enable_styles', 99 );

• This reply was modified 8 years, 1 month ago by Dani Llewellyn. Reason: add some more commentary
• This reply was modified 8 years, 1 month ago by Dani Llewellyn. Reason: slightly tweaked padding on css

I’m marking this as resolved, but please come back if you need further help.

That’s being caused because you have javascript which is removing the header from the document upon scrolling (display: none;), which is confusing the viewer’s browser causing it to jump-upwards. You can possibly fix it by changing some CSS, but it looks like javascript (fusion?) is making a birds’-nest of styles, and I can’t figure out anything sane.

Hi,

To change the alphabet you can use the alphabet="Aa,Bb,Cc....." parameter. It is a list of lists. Each letter group is separated by commas ,. Each letter group needs to include all the characters you want collected together, so Aa here causes all titles beginning with A and a to be in the same group. The title of each group is the first character, so Aa will be titled A. There is no limit on the number of characters in each letter group, and there is no limit on the number of groups. There is no requirement for each group to include the same quantity of characters as the others.

<?php
the_a_z_listing( array(
    'tax_query' => array(
        'taxonomy' => 'category', //as is
        'field' => 'slug', // literally the word "slug"
        'terms' => array( 'term1-slug', 'term2-slug' )
          // a list of term slugs when 'field', above, is set to "slug";
          // if 'field' above is set to "term_id", or omitted, then this uses term ID numbers.
)
) );
?>

Reference for tax_query: https://codex.wordpress.org/Class_Reference/WP_Query#Taxonomy_Parameters

I’m marking this as resolved, but please come back if you still need help.

I’m marking this as resolved, but please come back if you still need help.

@artcorne, Please move this to a new thread.

@monimono, I’m marking this as resolved, but please come back if you still need help.