WordPress.org

Ready to get started?Download WordPress

Forums

Query Multiple Taxonomies
[resolved] Feature request: label styling (6 posts)

  1. mrarrow
    Member
    Posted 3 years ago #

    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.

  2. scribu
    Member
    Plugin Author

    Posted 3 years ago #

    You could also do it like this:

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

  3. mrarrow
    Member
    Posted 3 years ago #

    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.

  4. scribu
    Member
    Plugin Author

    Posted 3 years ago #

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

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

    http://plugins.trac.wordpress.org/changeset/304008/query-multiple-taxonomies

    Hope that works for you.

  5. mrarrow
    Member
    Posted 3 years ago #

    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...

  6. scribu
    Member
    Plugin Author

    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic