ER Developer Toolbar
Documentation

Always do a database backup before performing upgrades, downgrades and installations to add-ons.


Instructions

  • Place ext.er_developer_toolbar.php in your system/extensions directory
  • Place lang.er_developer_toolbar.php in your system/language/english directory
  • Place the toolbar directory in your themes directory (should be themes/toolbar)
  • Enable the extension in your Extensions Manager
  • Place the following code in the 
    <head>
    of your site:
    {if er_developer_toolbar_head}{er_developer_toolbar_head}{/if} 
  • Place the following code in the 
    <body>
    of your site:
    {if er_developer_toolbar}{er_developer_toolbar}{/if} 
    I put it right before my 
    </body>
    tag.
  • Browse your site with quick details and links at your finger tips!
Important Caching Notice

If your site uses page (template) caching you will need to use embed templates that are not cached. In this case you would place the code above in individual templates (probably under their own template group) to be embedded and then use these in your 

<head>
and 
<body>
respectively:

{embed="er_developer_toolbar/.toolbar_head"}

{embed="er_developer_toolbar/.toolbar"} 

The names of the templates and template group above are examples. If you are using an MSM setup keep in mind that you only need to do this with one site. You can embed templates across any of your MSM sites. See ExpressionEngine documentation for MSM.

General Settings

Member Groups

The first and most important option with ER Developer Toolbar is which member groups can see the toolbar. Each link in the toolbar checks for permissions before being created so you can show this toolbar to other members who may not have the same access as you and they will simply not what links are not being displayed. Everyone sees the performance indicators by default (time & queries)

Toolbar Position

The toolbar can be positioned on any edge of the browser widow. When enabled it will be fixed to the top edge of the browser but you can change that under the Extension Settings.

Link Target

This toolbar is designed to minimize clicks between the front end and back end while working on the EE site. Personally I like settings the toolbar links to open in a new window so that I just make the change in the CP that I need, then close the window/tab and refresh my front end (as opposed to having to use the back button in the same window/tab). By default the toolbar will open links in the same window but you can change this to open in new windows in the settings.

LG Addon Updater

This extension can call home and check for updates if you have LG Addon Updater installed.

Branding the Toolbar

As a developer who works with clients all the time, I love brandable tools. There certain pieces of this toolbar that I would enable to my clients so I thought you might as well. Because of this I wanted to enable you to brand this toolbar on a per-site basis. You can preview the toolbar (in basic form) from within the extension settings so you do not have to save the settings to see how it looks. I have also included a layered Photoshop file to help you get the logos together along with the colors (resources/toolbar_brand.psd). Here's the what and the how:

Horizontal Logo

The horizontal logo dimensions are 100x25 and you can replace it with the path to your logo here. Either use a transparent PNG or a background color the same as your toolbar background color.

Vertical Logo

The vertical logo dimensions are 25x25 and you can replace it with the path to your logo here. Either use a transparent PNG or a background color the same as your toolbar background color.

Tooltip

This is the text that appears when the cursor is over the logo

Background Color

This will be the background color of the toolbar and the multi-layer menus. When changing the background color the arrows from the popups disappear simply because they were graphics and would no long match the background color. You lose no functionality however. The color can be in any CSS-accepted format (eg: red, #f00, #ff0000, rgb(255,0,0) all produce the same color).

Border Color

This will be the border color of the toolbar, multi-layer menus, and dividers between toolbar sections. The color can be in any CSS-accepted format (eg: red, #f00, #ff0000, rgb(255,0,0) all produce the same color).

Font Color

This changes the font color of non-linked text within the toolbar. The color can be in any CSS-accepted format (eg: red, #f00, #ff0000, rgb(255,0,0) all produce the same color).

Link Color

This changes the color of links in the toolbar. The :hover state will also be this color. The color can be in any CSS-accepted format (eg: red, #f00, #ff0000, rgb(255,0,0) all produce the same color).

Special Notes

Again, branding the toolbar is per-site with MSM. When you tab out of any branding text field the toolbar will automatically display if it is not already displayed. This helps you get the toolbar looking perfect before saving the settings.

Credits

Icons

The icons used in the toolbar are from the icon set Fugue by Yusuke Kamiyamane of pinvoke.com. The icons are licensed under a Creative Commons Attribution 3.0 license. Used with permission.