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

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(https://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