Using only icons on the Admin Toolbar

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
3/30/2011 3:16:18 PM
Totem
Gravatar
Total Posts 51
View Posts

Using only icons on the Admin Toolbar

I´m trying to move the top navigation on the admin toolbar and use icons instead of text. Is there is a way to style the other links with icon (login, register, home & logout)  Here is what I´ve done so far:

        <div id="toolbarbut">
            <span class="showbar"><a href="#">show bar</a></span>
        </div>
        <div id="toolbar">
            <div class="toolbarleft">
              <ul id="social">
                <li>
                    <portal:HomeLink ID="HomeLink" runat="server" RenderAsListItem="false"  ToolTip="Accueil" /><!-- icon -->
                </li>
                <li>
                    <portal:RegisterLink ID="RegisterLink" runat="server" RenderAsListItem="false" ToolTip="S´enregistrer" />
                </li>
                <li>
                    <portal:LoginLink ID="LoginLink" runat="server" RenderAsListItem="false" ToolTip="Connection" />
                </li>
                <li>
                    <portal:LogoutLink ID="LogoutLink" runat="server" RenderAsListItem="false" ToolTip="Déconnection" />
                </li>
                <li>
                    <a class="facebook" href="#"></a>
                </li>
                <li>
                    <a class="twitter" href="#"></a>
                </li>
                <li>
                    <a class="youtube" href="#"></a>
                </li>
                <li>
                    <a class="linkedin" href="#"></a>
                </li>
                <li>
                    <a class="yahoo" href="#"></a>
                </li>
                <li>
                    <a class="google" href="#"></a>
                </li>
                <li>
                    <a class="rss" href="#"></a>
                </li>
                <li>
                    <a class="addthis" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="toolbarright">
                    <span class="downarr"><a href="#"></a></span>
                <portal:AutoHidePanel ID="ah1" runat="server">
                    <portal:AdminMenuLink ID="lnkAdminMenu" runat="server" />
                    <portal:FileManagerLink ID="lnkFileManager" runat="server" />
                    <portal:NewPageLink ID="lnkNewPage" runat="server" />
                    <portal:PageEditFeaturesLink ID="lnkPageContent" runat="server" />
                    <portal:PageEditSettingsLink ID="lnkPageSettings" runat="server" />
                    <asp:ContentPlaceHolder ID="pageEditContent" runat="server">
                    </asp:ContentPlaceHolder>
                </portal:AutoHidePanel>
            </div>
        </div>

Thanks for your help

3/31/2011 2:44:32 PM
Joe Davis
Gravatar
Total Posts 2239
View Posts

Re: Using only icons on the Admin Toolbar

Hi,

You could use CSS to specify background images for the links and then set the font-size to 0 and the color transparent on the link. You'll also need padding on the link to display the background-image (icon). For instance:

#toolbar a.logoutlink{background: url('exit.png') no-repeat 5px 50% transparent; font-size: 0; padding: 12px; color: transparent;}

You will probably need to adjust this a little bit to get it exactly how you want it but it will get you started.

Also, please note that if you set UseIconsForAdminLinks to true on the StyleSheetCombiner control, that all of the normal admin links (Administration, Page Settings, Add Page, Edit This Page) will only show icons.

HTH,
Joe D.

4/1/2011 1:00:08 PM
Totem
Gravatar
Total Posts 51
View Posts

Re: Using only icons on the Admin Toolbar

Thanks Joe for your reply.

I tried your suggestion, but it doesn´t work -:( And when I view the source of the page the link has a class "sitelink". I found out it´s in stylemojo, but how to replace it or move it to /style/jqtoolbar folder is very tricky to me. I would like to use the example with the social icons in jqtoolbar folder. 

Thank for your help.

4/1/2011 1:53:53 PM
Joe Davis
Gravatar
Total Posts 2239
View Posts

Re: Using only icons on the Admin Toolbar

Hi,

You need to apply additional CSS classes to the links you are working with to differentiate them from one another. If the element is a .net control use CssClass="somespecialclassname". If the element is just a plain link, use class="somespecialclassname". For the Logout control, it would look like this:

<portal:LogoutLink id="LogoutLink" runat="server" RenderAsListItem="true" CssClass="logoutlink" />

I don't suggest changing the /style/jqtoolbar/ files. You should make changes to your stylemojo.css file which will end up overriding the rules in the /style/jqtoolbar/style.css file.

HTH,
Joe D.

4/1/2011 3:48:08 PM
Totem
Gravatar
Total Posts 51
View Posts

Re: Using only icons on the Admin Toolbar

Thanks again Joe for your advices.

You must sign in to post in the forums. This thread is closed to new posts.