Hello!

Today i'm going to show you a very cool feature for you forum. Something that you're going to like.
Demo:


1. Go to Modules > Toolbar > Configuration > Activate the toolbar
- Now, if you really want to have this but you don't want to display the toolbar, put this in your CSS:

Code:

#fa_toolbar {
  display: none;
}

2. Go to ACP > Display > Templates > General > index_body
- Add this after the {JAVASCRIPT}

Code:

<!-- BEGIN switch_user_logged_in -->
<div class="dropdown">
<a class="account">You're {LOGGED_AS}</a>
<div class="submenu">
<ul class="root">
<li><a href="/profile?mode=editprofile" >My Profile</a></li>
<li><a href="/privmsg?folder=inbox" >Mailbox</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>
<!-- END switch_user_logged_in -->
                                                                                 
<!-- BEGIN switch_user_logged_out -->
<div class="dropdown">
<img src="http://r19.imgfast.net/users/1914/10/10/84/avatars/1-97.png" style="border: 1px solid #000; position: absolute; width: 42px; height: 42px; z-index: 111; margin-left: 10px;"> <a class="account">You're {LOGGED_AS}</a>
<div class="submenu">
<ul class="root">
<li><a href="/login" >Sign In</a></li>
<li><a href="/register" >Register</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div>
<!-- END switch_user_logged_out -->   

3. Now add this to your CSS:

Code:

.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 27px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
z-index: 100;
width: 274px;
padding: 66px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  display: none;
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:darkred;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 13px;
line-height: 21px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 0 60px;
height: 28px;
width: 220px;
text-decoration: none;
background: url(http://i47.tinypic.com/30w0a2v.png) 257px 18px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

4. Add this to your Javascript (Set to homepage only)

Code:

$(window).load(function(){
var x=$('#fa_usermenu > img').attr('src');
$('.account').prepend('<span id="fa_proxy"><img src="'+x+'"/><span>');
});

Then you're done.