removing mini admin menu from your layout

محروم.كوم · #1 07-22-2010, 11:10 PM

Mini admin was one of the bigger advancements of phpws. Allowing you to create and edit content without going to the control panel is a huge time saver. Out of the box, mini admin requires a 2 column layout. I've made a change based on the homepage of phpwebsite that keeps the menu fixed at the bottom of the screen, applies jquery to it ala superfish and removes it from the flow of your layout. Also, no scrolling back up to find what you need in the mini admin. it's always on the screen.

I altered my templates/miniadmin/mini_admin.tpl file, but you could create a new template. remember if you revert, it will overwrite your changes.. Here is the new mini_admin.tpl:
Code:

{MODULE}

{ADMIN_LINK}

This turns mini admin into a true bulleted list instead of a bulleted list for each module under the module name. so one list instead of several.

Now add the following CSS, which is at the moment very bland. It's the positioning that is important.

Code:
#miniadmin {
position: fixed;
bottom: 0; left: 0;
z-index: 9999; /*--Keeps the panel on top of all other elements--*/
background: #758279;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 90%;
margin: 0 3%;
}

#miniadmin ul {
padding: 0;
margin:0;
list-style-type:none;
}
#miniadmin ul ul {
width:125px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#miniadmin li {
float:left;
width:125px;
position:relative;
}
/* style the links for the top level */
#miniadmin a, #miniadmin a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:139px;
height:30px;
border-left:1px solid #fff;
/* border-width:1px 1px 0 0; */
background:#758279;
padding-left:10px;
line-height:30px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html #miniadmin a, * html #miniadmin a:visited {
width:125px;
w\idth:139px;
}

/* style the second level background */
#miniadmin ul ul a.drop, #miniadmin ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
#miniadmin ul ul a.drop:hover {
background:#c9ba65;
}
#miniadmin ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
#miniadmin ul ul ul a, #miniadmin ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
#miniadmin ul ul ul a:hover{
background:#b2ab9b;
}
#miniadmin ul ul ul :hover > a {
background:#b2ab9b;
}

/* style the table so that it takes no part in the layout - required for IE to work */
#miniadmin table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#miniadmin ul ul {
visibility:hidden;
position:absolute;
bottom:30px;
left:0;
width:125px;
}
* html #miniadmin ul ul {
bottom:30px;
}
/* position the third level flyout menu */
#miniadmin ul ul ul{
left:150px;
bottom:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
#miniadmin ul ul ul.left {
left:-150px;
}

/* style the second level links */
#miniadmin ul ul a, #miniadmin ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1.5em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html #miniadmin ul ul a{
width:150px;
w\idth:129px;
}

/* style the top level hover */
#miniadmin a:hover, #miniadmin ul ul a:hover{
color:#fff;
background:#949e7c;
}
#miniadmin :hover > a, #miniadmin ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
#miniadmin ul li:hover ul,
#miniadmin ul a:hover ul{
visibility:visible;
height:auto;
}
/* keep the third level hidden when you hover on first level list OR link */
#miniadmin ul :hover ul ul{
display:none;
}
/* keep the fourth level hidden when you hover on second level list OR link */
#miniadmin ul :hover ul :hover ul ul{
display:none;
}
/* make the third level visible when you hover over second level list OR link */
#miniadmin ul :hover ul :hover ul{
display:block;
bottom:0;
}
/* make the fourth level visible when you hover over third level list OR link */
#miniadmin ul :hover ul :hover ul :hover ul {
display:block;
bottom:0;
}
You can play with the widths, heights and borders until you get the look you want. Next I added this to javascript/jquery/head.js...

Code:

$(document).ready(function(){
$("ul.miniadmin").superfish();
});
Superfish goodness. and yeah... this implies you have superfish menus. I'm not entirely sure it would work without it. probably won't as it is missing some superfish css. but all that does is make the menus fade on the screen. as a pure css solution, it will work without that.

So there you have it. no more designing around an element your visitors will never see. __DEFINE_LIKE_SHARE__