Posted Wed Dec 02, 2015 9:04 pm
Nimuzz masters
File Name: [Tutorial] IPB Dropdown Profile
Author: Red™
Functionality: All Versions
Category: Tutorials
Find this code and make sure you have this anywhereAdministration Panel → Display → General → Overall_header
/profile?mode=editprofile&page_profil=preferences
and replace with this
href="/profile?mode=editprofile&page_profil=preferences"
onclick="jQuery('[You must be registered and logged in to see this link.]').fadeToggle(); return false;"
after that add this in the end of the overall_header
- Code:
<style>#link_user{font-size:12px;color:white;padding:0 12px;height:36px;line-height:36px;display:inline-block;margin-right:15px;outline:0}</style>
<style>.ipsHeaderMenu.boxShadow {box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3)}.boxShadow {box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.58)}
.ipsHeaderMenu {background: -moz-linear-gradient(center top , #FFF 0%, #F6F6F6 70%, #EDEDED 100%) repeat scroll 0% 0% transparent;padding: 10px;border-radius: 0px 0px 6px 6px;overflow: hidden;width: 340px;z-index: 9 !important;}</style>
<script> $(document).ready($("a#user_link").click(function(){
$("a#user_link").toggleClass("opened");
}));</script>
<style>a#user_link.opened {
background: #ffffff;
color: #555;
}</style>
<div id="perfil" style="display: none;"><div id="user_link_menucontent" class="ipsHeaderMenu boxShadow" style="position: absolute; z-index: 9999; top: 32px; left: 750px;"><a href="/{USERNAME}" title="Your Profile" class="ipsUserPhotoLink left"><div id="avatar"></div></a><div class="left">
<ul id="links">
<li id="user_name" style="width: 100%;font-weight: bold;padding-bottom: 5px;">{USERNAME}</li>
<li id="user_profile"><a href="/profile?mode=editprofile" title=""> Edit Profile </a></li>
<li id="user_ucp"><a href="/profile?mode=editprofile&page_profil=preferences" title=""> Personal Settings</a></li>
<li id="user_content"><a href="/spa/{USERNAME}" title=""> My Forum Posts </a></li><li id="user_content"><a href="/st/{USERNAME}" title=""> My Topics </a></li>
<li id="user_content"><a href="/search?search_id=watchsearch" title=""> Content to Follow</a></li>
<li id="user_pm"><a href="/profile?mode=editprofile&page_profil=friendsfoes"> My Friends & Foes </a></li>
<li id="user_pm"><a href="/profile?mode=editprofile&page_profil=preferences"> My Preferences </a></li>
<li id="user_pm"><a href="/search?search_id=favouritesearch"> My Favourites Topics</a></li>
</ul></div></div></div>
<script>
jQuery(document).ready(function(){
jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
link = jQuery('.frm dl dd img', data).attr('src');
if(link){
jQuery('#avatar').html('<a href="/profile?mode=editprofile&page_profil=avatars"><img src="'+link+'" alt="" /></a>');
}else{
jQuery('#avatar').html('');
}
});
});
</script>
<style>
#avatar img {
height: 50px;
width: 50px;
padding: 1px;
border: 1px solid #f2f2f2;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
#avatar img:hover {
border-color: #a1a1a1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
#user_link_menucontent>div {
margin-left: 15px;
width: 265px;
text-align: left;
top: 50px;
}
#user_link_menucontent #links li {
width: 50%;
float: left;
margin: 3px 0;
text-shadow: 0px 1px 0 rgba(255,255,255,1);
white-space: nowrap;
}
</style>
after that go to your
Administration Panel → Modules → Html & Javascript Management → Javascript Management
Name: Avatar Profilebox
Placement: All pages
- Code:
jQuery(document).ready(function(){
jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
link = jQuery('.frm dl dd img', data).attr('src');
if(link){
jQuery('#avatar').html('<center><a id="user_links" href="/profile?mode=editprofile&page_profil=avatars"><img src="'+link+'" alt="" class="user_photo" /></a></center>');
}else{
jQuery('#avatar').html('');
}
});
});
If you have a Question About this Tutorial , Feel free to Ask Question in Support Forum :)