A mini plugin:
<?php
/*
* Plugin Name: Mini Admin Bar
* Plugin URI: http://www.netyou.co.il/
* Description: Makes the admin bar a small button on the left and expands on hover.
* Version: 1.0
* Author: NetYou
* Author URI: http://www.netyou.co.il/
* License: MIT
* Copyright: NetYou
*/
add_action('get_header', 'my_filter_head');
function my_filter_head() { remove_action('wp_head', '_admin_bar_bump_cb'); }
function my_admin_css() {
if ( is_user_logged_in() ) {
?>
<style type="text/css">
#wpadminbar {
width: 47px;
min-width: auto;
overflow: hidden;
-webkit-transition: .4s width;
-webkit-transition-delay: 1s;
-moz-transition: .4s width;
-moz-transition-delay: 1s;
-o-transition: .4s width;
-o-transition-delay: 1s;
-ms-transition: .4s width;
-ms-transition-delay: 1s;
transition: .4s width;
transition-delay: 1s;
}
#wpadminbar:hover {
width: 100%;
overflow: visible;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-ms-transition-delay: 0;
transition-delay: 0;
}
</style>
<?php }
}
add_action('wp_head', 'my_admin_css');
?>
Hey plz can you just provide a link of the demo of your shrink/expand bar in your tutorial…??
If possible..
Thnx a lot lot lot in advance….
Hello! You probably aren’t looking for an example anymore, but if you look at my site at “cassandramaedesigns.com” I have incorporated the code at the bottom left corner of my screen.
I love the new look of it. :)
Still working, i’m using the css only from this code in custom css style with some minor modifications.
Very useful I find because the bar is ugly but useful!
I don’t want to see it all the time.
What I think is that the transition used in the plugin is nonsense because I don’t want to look at the bar animation and wait for it to happen.
I have modified the code and also the size of the initial bar “button” with the logo to be more like a square.
#wpadminbar {
width: 35px;
min-width: auto;
overflow: hidden;
-webkit-transition: .2s width;
-webkit-transition-delay: 0s;
-moz-transition: .2s width;
-moz-transition-delay: 0s;
-o-transition: .2s width;
-o-transition-delay: 0s;
-ms-transition: .2s width;
-ms-transition-delay: 0s;
transition: .2s width;
transition-delay: 0s;
}
I get an error:
syntax error, unexpected ‘<‘, expecting end of file
This is almost exactly what I was looking for! I wanted to shrink the bar down to a small button, and have it expand on clicking the button. Thank you!
Every plugin and code snippet I found before this just wanted to completely hide the bar, on either front end, or front and back end, which was annoying.
Hi – please forgive my ignorance (bit of a newbie but really need this).
Where is it I need to insert this code to use this?
Diolch | Thanks in advance.
Works like a charm. Thanks.