Collapse all buttons in Mod CP [AwesomeBB]

Dear all

The following tutorial will help you collapse all buttons in Mod CP using only CSS

BEFORE:

AFTER:

1. Search in the modcp_body template, replace

Code:

    <fieldset class="form-buttons">
        {S_HIDDEN_FIELDS}
        <!-- BEGIN switch_delete --><input class="btn btn-default" type="submit" name="delete" value="{L_DELETE}"/> 
        <!-- END switch_delete -->
        <input class="btn btn-default" type="submit" name="trash" value="{L_TRASH}"/> 
        <input class="btn btn-default" type="submit" name="move" value="{L_MOVE}"/> 
        <input class="btn btn-default" type="submit" name="lock" value="{L_LOCK}"/> 
        <input class="btn btn-default" type="submit" name="unlock" value="{L_UNLOCK}"/>
        <!-- BEGIN switch_sticky --><input class="btn btn-default" type="submit" name="sticky" value="{L_STICKY}"/> 
        <!-- END switch_sticky -->
        <!-- BEGIN switch_announce --><input class="btn btn-default" type="submit" name="announce" value="{L_ANNOUNCE}"/> 
        <!-- END switch_announce -->
        <!-- BEGIN switch_normal --><input class="btn btn-default" type="submit" name="normal" value="{L_NORMAL}"/>
        <!-- END switch_normal -->
    </fieldset>

    <div class="pagination">
        {PAGINATION}
    </div>

With:

Code:

    <fieldset class="collapse-form-buttons">
      <ul>
        {S_HIDDEN_FIELDS}
        <!-- BEGIN switch_delete --><input type="submit" name="delete" value="{L_DELETE}"/>
        <!-- END switch_delete -->
        <input type="submit" name="trash" value="{L_TRASH}"/>
        <input type="submit" name="move" value="{L_MOVE}"/>
        <input type="submit" name="lock" value="{L_LOCK}"/>
        <input type="submit" name="unlock" value="{L_UNLOCK}"/>
        <!-- BEGIN switch_sticky --><input type="submit" name="sticky" value="{L_STICKY}"/>
        <!-- END switch_sticky -->
        <!-- BEGIN switch_announce --><input type="submit" name="announce" value="{L_ANNOUNCE}"/>
        <!-- END switch_announce -->
        <!-- BEGIN switch_normal --><input type="submit" name="normal" value="{L_NORMAL}"/>
        <!-- END switch_normal -->
      </ul>
    </fieldset>
  <br /><br />
      <div class="pagination">
        {PAGINATION}
    </div>

2. Add CSS

Code:

<style>
.collapse-form-buttons:hover{margin-top:-.7em;margin-left:-1.1em}
.collapse-form-buttons{float:right;position:relative;width:16px;height:16px;background:url(//i.servimg.com/u/f56/18/59/49/93/align_10.png) no-repeat center transparent;z-index:20}
.collapse-form-buttons input{display:none;width:230px;color:#000;background:#FFF}
.collapse-form-buttons:hover input{display:block;font-size:15px;padding:7px}
.collapse-form-buttons ul{border:1px solid #DDD}
.collapse-form-buttons input:hover{color:#FFF;background:#0095FF;cursor:pointer}
</style>

After

Code:

{JUMPBOX}

3. Save and publish

4. Note:
- Replace

Code: #0095FF

with your color code
- Only tested on AwesomeBB version. Other versions can be similarly replaced according to the tutorial above

That's exactly what they should be

Thanks for sharing

Great idea! Thank you for sharing this with us!