Create a Snazzier Devel Toolbar

Although not necessary, I always like to modify the Devel development block menu to display the same way as the Administration Menu module. This is pretty easy if your developing a theme from scratch. If you're using a pre-built template, you might have to mess with it a bit to get it to display properly depending on the css rules declared.

Just a word of warning, I work on a Mac. I have not tested this in IE since I do no administration in that browser. This definitely works on Mac Safari and Firefox.

This is how I do it:

1) Download the Administration Menu module, and the Devel module, upload the folders to the sites/all/modules folder, and enable them in on your site.

2) Go to admin/setting/admin_menu and check off "Adjust top margin" and "Keep menu at top of page."

3) Create a region called "development." If you don't know how to do this, here is a quick tutorial.

4) Place the region right after the "body" tag in your page.tpl.php file like so:

<body>
<?php if ($development): ?>
  <div id="development">
    <?php print $development ?>
  </div>
<?php endif; ?>

5) In your stylesheet, put:

body.admin-menu { margin-top:40px !important; }
#development { position: fixed; top: 21px; left: 0px; font-size: 9px; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; background: url(http://YOUR_URL/sites/all/modules/admin_menu/images/bkg.png) bottom left repeat-x #101010; width: 100%; height:21px; text-align: left; }
#development, #development ul { padding: 0; margin: 0; list-style: none; line-height: 1.4em; z-index: 999; }
#development ul { position: static; }
#development ul a { display: block; border-right: 1px solid #323232; border-bottom: none; padding: 4px 8px; font-weight: normal; color: #eee; text-decoration: none; text-align: left; }
#development li { float: left; height: 100%; margin: 0 !important; padding: 0; list-style-image: none; list-style-type: none; background-image: none; }
#development .block { padding-bottom:17px; }

Make sure to replace "YOUR_URL" with, well, your url. This example assumes you have the Administration Menu module installed, and it is located in the sites/all directory.

6) Now, go to your blocks page and put the Devel development block menu in your newly created development region.

All done! You should now have a development menu right under your admin menu. This really makes my workflow a lot smoother since there is now no need to have blocks in the way of my theme development. Everything that I need is placed neatly at the top of the page, out of the way of my actual site styling.

archive

recent posts

Create a Snazzier Devel Toolbar

comments:

Post new comment

follow me

twitter updates

get hosted!