Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #5493

    Can anyone tell me how I would move the display buttons (Compact, Detailed, Large) so that they appear under the first h3 in the widget. Currently they appear above the first h3 in the first sidebar widget but I would like them to appear below the first h3.

    I would like to move them because I wish to style the widget h3’s differently and the style I wish to change them to will not work if the Display Buttons are appearing above the h3 element.



    open up sidebar.php and search for following code:

    //gallery controlls:
    echo "<div class='display_buttons'>";
    echo "<a href='#' id='item_small' class='display'><span>Compact</span></a>";
    echo "<a href='#' id='item_medium' class='display'><span>Detailed</span></a>";
    echo "<a href='#' id='item_large' class='display'><span>Large</span></a>";
    echo "</div>";

    You can move it around and insert it between two widget areas, after all widget areas, etc. If all widgets are in the same widget area it’s not possible to display the buttons between the widgets.


    Hey Dude,

    Thanks for getting back to me. I am not sure I understand you correctly. Firstly, I do have all my widgets in the ‘Displayed Everywhere” widget area. However I don’t want to move the Display Buttons between the widget areas I want to move their position within the widget so that they appear under the <h3 class=”widgettitle”> and not above it.

    I have done a quick screenshot of what I am talking about here:



    Ok in this case try to add a text widget which following content:

    <div class='display_buttons'>
    <a href='#' id='item_small' class='display'><span>Compact</span></a>
    <a href='#' id='item_medium' class='display'><span>Detailed</span></a>
    <a href='#' id='item_large' class='display'><span>Large</span></a>

    You can place this widget before or after any other (text) widget and enter a custom headline, etc. You need to remove the code from sidebar.php (code snippet in my last post) to avoid a redundant output.


    Perfect, that will work for my purposes. Thanks Dude!


    Ah unfortunately that doesn’t work because those buttons are displayed dynamically on gallery category pages. Your solution works on those pages but when you are on other pages the text widget shows up with its title and no content. Even using the Widget Context plug in does not help because it cannot differentiate between a category page and a ‘gallery category’ page and I have way too many ‘gallery category’ pages to be able to link them all individually.

    However in case anyone else needs a solution to this I was able to acheive the desired result and move the ‘Display Buttons’ to under the widgettitle h3 by adjusting the custom.js file.

    I changed line 174:

    linkContainer.prependTo(‘.sidebar .box:first’).slideDown();


    linkContainer.prependTo(‘.sidebar .box ul:first’).slideDown();

    In my case the first widget area on the gallery category pages always contains a ul directly under the <h3 class=”widgettitle”>. Adjusting this javascript code seems to have done the trick.


    Thanks for posting your solution :)

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Move Display Buttons to under first h3’ is closed to new replies.