Support » Plugin: Query Multiple Taxonomies » [Plugin: Query Multiple Taxonomies] Feature request: label styling

  • Resolved mrarrow


    I found that from a visual presentation, the ragged nature of the dropdowns appearing immediately after the label name was very messy (especially if some label names were quite short and others were quite long). I wanted the label for each line to be a consistent width, so that the dropdowns were always neatly aligned left, going down the sidebar.

    So in query-multiple-taxonomies/widget.php, under private function generate_dropdowns( $taxonomies ), I added a new li class called QMTlabel which now separates the label from the dropdown so I can style it accordingly.

    So the query-multiple-taxonomies/widget.php template now looks like

    ......$out .=
                html( 'li class="QMTlabel"',
                     get_taxonomy( $taxonomy )->label . ':</li><li> '
                    .html( 'select', array( 'name' => qmt_get_query_var( $taxonomy ) )....

    And I used the following CSS to set the label width:
    .QMTlabel { width: 120px; float: left; display: inline; }

    However, in my instance I also wanted the background of each line to subtly change colour as the mouse was hovered over it, so I had to do some monkey-business with minus right-margin to get this to work correctly, namely:
    .QMTlabel { width: 100%; margin: 0 -130px 0 0; float: left; display: inline; }

    In anycase, separating out the label from the dropdown has allowed me to do all of this.

    It’d be really good if the li class="QMTlabel" etc could be added in as core code as I’m sure others would benefit from being able to style the label separately too. The CSS wouldn’t need to be included as this can be kept in a separate file which wouldn’t get overwritten after a plugin update.

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


    You could also do it like this:

    .taxonomy-drilldown-dropdowns li { width: 120px; float: left; display: inline; }

    Except .taxonomy-drilldown-dropdowns li { width: 120px; float: left; display: inline; } would set the width of the whole line so you’d still need a method of setting the width of the label and therefore dictating where the dropdown appears i.e. in line with each other.

    Plugin Author scribu


    Ah, I just saw the ':</li><li> ' now.

    I’ve added an actual <label> tag instead:

    Hope that works for you.

    Hmmmm, that made my dropdowns disappear! So I removed my funky CSS styling and still the same.

    And looking in the source code for that page, the dropdowns weren’t even being parsed and displayed in raw HTML so they definitely weren’t there…

    Plugin Author scribu


    Oh, I forgot to mention that the development version (1.4-alpha) requires WP 3.1-alpha.

    If you need this now, you’ll have to do the modification manually on version 1.3.1.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: Query Multiple Taxonomies] Feature request: label styling’ is closed to new replies.