ted serbinski – a blog about drupal, macs, productivity, health, and bmws
a blog about drupal, macs, productivity, health, and bmws
Drupal admin menu bar released
One of the biggest problems I run into when creating Drupal sites is a proper admin theme. Sure, there are various techniques to have a different admin theme, but often I want to integrate that into the current design. Many times that is ok, but the real problem was the admin menu--where the heck could I place it, it often didn't fit the design I was working on.
Well I thought about it a bit, then I took some HTML, theming logic, and a bit of CSS (and JS to help out our IE friends), and voila, an admin menu bar for Drupal that doesn't interfere with your design.
The admin menu bar is a semantic list of links styled with CSS and uses the position: fixed property to always appear at the top of the page (except in IE, because well, yeah you know :-)). It uses the :hover property to create the cascading menu effect and for you IE folks, there is some JS to emulate this.
So have a download and let me know what you think. This is for Drupal 4.7.
And be sure to READ the README.txt, it has all you need to know.
| Attachment | Size |
|---|---|
| admin.zip | 10.19 KB |
16 comments
Subscribe to updates
Latest posts
Tags
Recent comments
- Earl, yes even more good
3 days 8 hours ago - It’s worth noting that
4 days 19 hours ago - The Paulding Lights (also
5 days 2 hours ago - Cheating huh? I didn’t
5 days 8 hours ago - @Jordan, yes on Drupal that
5 days 8 hours ago - This might be one of the
5 days 9 hours ago - Well that’s
6 days 9 hours ago - Brian thanks for the tip!
1 week 1 day ago - Hi Ted,
Never seen that one
1 week 1 day ago - Well you only fill it once
1 week 6 days ago
Looks good. We’ve been using a similar implementation with some of our Drupal 4.6 instances, and it really streamlines administration tasks.
One thing I’d recommend is to go to admin => menu and edit the “settings” menu item — moving it one level higher (to the same level as “administer”) makes for much nicer workflow, we’ve found.
Brillant! It cuts the clutter out of Drupal which always been problem in terms of UI. -It should be integrated to the Drupal core without handcoded into each theme seperately -imo
Awsome! Brillant wok Ted, have been hanging for this for a while! Very Clean Implementation – Cheers!
Thanks for the compliments guys!
A teaser of what is to come in version 2 (for the next major release of Drupal), integration with Jquery, thanks to Moshe for the link.
So please continue to post feedback and feature requests. It’s time for Drupal to work how designers see fit—not coders :-)
install problem -no php coder here) should not be
<?php ...... ?>included for the install/include instructions on below2. Open up page.tpl.php and somewhere between the tags add:
print theme(‘stylesheet_import’, base_path() . path_to_theme() . ‘/admin/admin.css’); print ‘‘;otherwise it gives error but
<?php print theme('stylesheet_import', base_path() . path_to_theme() . '/admin/admin.css'); ?>still gives an error, where is the mistake? – thanks for any help in advance
opps.. I forgot the code tagging.. post above should be
<?php print theme('stylesheet_import', base_path() . path_to_theme() . '/admin/admin.css');print ''; ?>Great theming work. It looks perfect. The one problem is that when the menu is longer than the height of the screen, there is no way to get to the items off screen. I’ve seen other menus allow scrolling but don’t know how they do it.
BTW: I’ve achieved similar effect with setting up a Nice menu for my Navigation block but I like this solution better.
Dominik
Wow this is neat just what the UI doctor ordered :)
I made a little toggle hack that somebody might could use, os i thought i would share it its just a fast way to toggle the mighty admin menu on & off. —— in admin.js
/*toggle*/function toggle(divid){ if (document.getElementById(divid).style.display == "block") { document.getElementById(divid).style.display = "none"; } else { document.getElementById(divid).style.display = "block"; }}— admin.css — find #admin-nav add the display prop: display: none / display: blocknow you cann call in the admin menu with
a href="#" onclick="toggle('admin-nav')"/mdk
There’s a bug in the README.txt sample code in the _phptemplate_variables() function. There’s an extra closing brace ( } ) ... taking that out should fix the bug. (case ‘page’: gets an indent, but doesn’t have an opening brace, thus doesn’t need a closer).
Also, at the end of the readme, for consistency, I’d do:
<?php if ($admin) print YOUR_THEME_NAME_admin_menu(); ?>
instead of ted_admin_menu()...
Actually, there’s another bug in the sample template.php _phptemplate_variables function in the readme. It doesn’t return $vars. If you haven’t already defined a _phptemplate_variables() function in your template.php file, this code works if you want to restrict the menu to just the admin user:
/** * Intercept template variables * *If you want to extend it to a role, change the if() statement to something like (if you have a role labeled “admin”):param $hook * The name of the theme function being executed *param $vars * A sequential array of variables passed to the theme function. */function _phptemplate_variables($hook, $vars = array()) { switch ($hook) { case 'page': global $user; //you can easily extend this to test for other users and other roles if ($user->uid == 1) { $vars['admin'] = TRUE; } } return $vars;}if( in_array("admin", $user->roles) ) {Hi Ted,
Awesome module!!! Wow, I really needed something like this. It helps me get things done twice as fast as I whiz through menu items.
A couple bugs that I’ve been trying to fix but can’t seem to figure out – does anyone have suggestions?
1) The bar is pushed to the bottom in IE 6- 2) The menu is making the blinking cursor for text fields/ areas disappear in Firefox – anyone know what could be causing this? I’m guessing it’s a style rule that is only being applied by FF – I played around with z-index and that didn’t seem to change anything. Any thoughts?
Hey Alex, thanks!
You might want to look into version 2, but that is only Drupal 5 compatible.
I’m in the process of rewriting that module to be 100% jQuery, instead of mixed JS/CSS, which solve a majority of these issues.
Because of IE’s lackluster CSS support, you might be some weird effects like this. I’m hoping with the rewrite in jQuery I can fix those issues. Stay tuned for updates!
Awesome, thanks Ted!
Meanwhile I came across a CSS-only method to fix the problems I mentioned. For anyone interested, simply add this to your page.tpl.php file:
<style type="text/css">#admin-nav { /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this / position: absolute; left: 0; top: 0;}body > div#admin-nav { / used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser / position: fixed;}</style><!—[if gte IE 5.5]><![if lt IE 7]><style type="text/css">div#admin-nav { / IE5.5+/Win – this is more specific than the IE 5.0 version */ left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );}</style><![endif]><![endif]—>Cheers, Alex
I can’t get the code tags to work here – the code above is missing IE only declarations. I’ve reposted the CSS snippet on my site – simply search for “adminmenu” in the search box or click on 1/9 in the archives.
Thanks for all your hard work on this excellent module Ted :) Alex
Thanks for the awesome code Alex!
Posting a number of bug fixes to the 5.0 version tonight. Hopefully will have that rewrite soon :-)
install problem -no php coder here) should not be
<?php ...... ?>included for the install/include instructions on below2. Open up page.tpl.php and somewhere between the tags add:
print theme(‘stylesheet_import’, base_path() . path_to_theme() . ‘/admin/admin.css’); print ‘‘; otherwise it gives error but
<?php print theme('stylesheet_import', base_path() . path_to_theme() . '/admin/admin.css'); ?>still gives an error, where is the mistake? – thanks for any help in advance
Add your comment