New Extension: ER Developer Toolbar
Development and Programming
This extension was born out of an embed template that I have used on nearly all of my projects. It started as just a div anchored to the top left corner of my browser window on the site front-end that gave me quick links to general site preferences, extension manager, plugin manager, etc. Then I read a tip on EE Insider by Jason Morehead about having the {elapsed_time} and {total_queries} posted in a similar fashion. After marrying the two together I turned the box into a toolbar-shape and anchored it to either the top or bottom of my window depending on the front-end design of the site I was working on at the time.
After sharing this embedded template with a few other devs I decided it just made sense to turn it into an extension.
Update: 2009/11/11
This extension is now in version 1.0 and has moved its download location to my website. You can find the docs, change log, download links and more by visiting my project page. You can also take a look at a blog entry with some information regarding where this add-on is going for ExpressionEngine 2.0.
Looking forward to your thoughts!
Very nice and extremely useful. Thanks! I did run into an issue where it covers content that I need to be able to click on at the top of the page, so maybe some way to have it retract when necessary would come in handy.
Thanks Kyle
Initially it used jQuery to auto hide and display. However, I switched it to make the CSS configurable to keep it simple for now. I ran into the same problem you describe with a couple of sites and in those cases I just change the position of the toolbar to the bottom of the window rather than the top. In the extension settings just change those CSS attributes in #er_developer_toolbar to something like this:
#er_developer_toolbar {
/* just showing the 2 attributes that matter for the example */
bottom: 0px;
border-top: 2px solid #336699;
}… in those cases I just change the position of the toolbar to the bottom of the window rather than the top.
Ah, Good call.😊
Erik,
Do you have any screenshots?
thanks, Kenny
Very nice Erik!
I’ll put the word out on the Insider tomorrow and cheers for making this.
Thanks Kenney
I’ll be sure to let you know when 1.0 is released. It will have some really fun goodies in it 😊
sweet - gonna try it out now. hoping it has a hide type of functionality in case you already have something at the bottom of the screen you need to access.
the quick link to clear the cache doesn’t appear to be working. otherwise, very nice! 😊
the quick link to clear the cache doesn’t appear to be working. otherwise, very nice! 😊
That’s odd. The cache link is working properly for me on multiple EE installs. Where does the link take you?
Just the CP home.
I’ve tinkered a little with the css styles so it auto hides to the left until you rollover the tab to make it show - useful if you already have content in the top strip you want to be able to access and test. Not really tested it massively (and I doubt it’ll work in IE6, but then who here uses IE6?!), but here it is if you want to - add the following 6 lines of CSS to the very bottom of the CSS panel:
#er_developer_toolbar {width: auto;}
#er_developer_toolbar p.toolbar_heading {padding-right: 0px;}
#er_developer_toolbar ul {text-indent: -9999px; display: none;}
#er_developer_toolbar:hover {width: 96%;}
#er_developer_toolbar:hover p.toolbar_heading {padding-right: 15px;}
#er_developer_toolbar:hover ul {text-indent: 0px; display: inline;}Also added the following to the very first element, #er_developer_toolbar to make it a little fluffier 😊
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;Just the CP home.
What version of EE?
Also added the following to the very first element, #er_developer_toolbar to make it a little fluffier 😊-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
You kids and your crazy rounded corners 😊
haha! gotta love the fluffy stuff… i would add drop shadows, but i’m not a safari user so cant be bothered!
i’m on 1.6.8
Can you compare the link in the toolbar to the page URL in the CP and see if they’re identical (with the exception of the Session get variable that is)?