When Joe Audette released mojoPortal 2.3.3.4 he wrote an article called "Creating An Admin Toolbar" in the mojoPortal Skinning Documentation. The toolbar uses jQuery to easily show and hide itself and is skinned entirely by using CSS.
If you follow Joe's directions or you are using a skin that came with 2.3.3.4 with the toolbar enabled, you will have a toolbar that looks like this:
While this serves a perfectly good function, there are a few things about it I don't like. It is gray and there are no icons depicting the links. I happen to like icons and bright colors so, I came up with this:
Skinning the toolbar was very easy because it is all controlled by CSS. This article is meant to help you understand how to skin the toolbar but if you like what I've done, you can just download it here.
Create a copy of the jqtoolbar UI resources
The CSS and images for the toolbar are located in the \Data\style\jqtoolbar directory. The CSS is in the style.css file so I created a copy of this file and named it style-7.css.
Set site skin to use new CSS file
For the skin to use the new css file (style-7.css), I had to change the line below in my style.config file located inside of my skin directory (\data\sites\1\skins\myskin). Notice I am referencing style-i7.css and not style.css.
<file cssvpath="/Data/style/jqtoolbar/style-i7.css" imagebasevpath="/Data/style/jqtoolbar/">none</file>
Change the background color of the toolbar
To change the color of the toolbar, I simply changed the background-image CSS rule on the div#toolbar and div#toolbarbut selectors to a background-color rule and set the color to #FFFF99.
Add icons to the links
To add the icons, I added an attribute to each of the controls for the links in the layout.master. To keep the markup valid, I used the rel attribute. I set the value of the rel attribute to a descriptor of the link itself (e.g.: rel="admin" for the admin link). I then used this new attribute to apply a different background image to each link.
It is important to note that this approach will not work with IE6 as it doesn't understand how to select an element based on it's attributes. The next release of mojo will allow you to use the CssClass attribute on the controls so that you can style them more easily. The value of the CssClass attribute will be added to the classes for the link.
Link Controls in Layout.master file
<portal:AdminMenuLink id="lnkAdminMenu" runat="server" rel="admin"/>
<portal:FileManagerLink id="lnkFileManager" runat="server" rel="filemgr"/>
<portal:NewPageLink id="lnkNewPage" runat="server" rel="addpage" />
<portal:PageEditFeaturesLink id="lnkPageContent" runat="server" rel="pageedit"/>
<portal:PageEditSettingsLink id="lnkPageSettings" runat="server" rel="pagesettings"/>
CSS for icons
div#toolbar a[rel=admin]{
background: transparent url('administration.png') no-repeat scroll left center;
padding-left: 32px;
}
div#toolbar a[rel=addpage]{
background: transparent url('newpage.png') no-repeat scroll left center;
padding-left: 32px;}
div#toolbar a[rel=filemgr]{
background: transparent url('filemgr.png') no-repeat scroll left center;
padding-left: 32px;
}
div#toolbar a[rel=pageedit]{
background: transparent url('editpage.png') no-repeat scroll left center;
padding-left: 32px;
}
div#toolbar a[rel=pagesettings]{
background: transparent url('pagesettings.png') no-repeat scroll left center;
padding-left: 32px;
}
The icons are from the Crystal Project but you can use any you like.
Hiding the menu by default
Personally, I do not want the toolbar to be displayed all the time. I would rather have a link which opens the toolbar when I need it. To accomplish this, I moved the display:none; rule from the div#toolbarbut selector to the div#toolbar selector.
Conclusion
I hope this gives you a head-start on skinning the new admin toolbar. Keep in mind that all of this was accomplished easily with CSS.
Happy mojo-ing!