ALERT!
Click here to register with a few steps and explore all our cool stuff we have to offer!
Home
Upgrade
Credits
Help
Search
Awards
Achievements
 1818

Drop-down menu on the postbit style nickname vbulletin for mybb

by MarkSelux - 02-13-2018 - 06:51 PM
#1
Hello everyone, today I do a guide made by me how to do drop-down menu on the nickname on postbit style vbulletin.

it is very easy to follow the guide well.

So before starting I'll show you a demo:


Original (vbulletin):

[Image: aYLPEyu.png]

Here is our (mybb):

[Image: ky53cH3.png]

(the images are in Italian, because I am Italian and it is my guide that I created and published on my Italian site, below I will give the images with the name in English)

Now let's start the guide.

First go to the Admin Panel of your forum
and go to Templates & Themes> Themes> [YOUR THEME]> global.css
and paste this css code:


Code:
.siteicon_profile {
   background: url(/images/profile.png) left 2px no-repeat;
  color:#3E3E3E;
}

.siteicon_message {
   background: url(/images/messagesa.png) left 2px no-repeat;
  color:#3E3E3E;
}

.siteicon_forummas {
   background: url(/images/forummas.png) left 2px no-repeat;
  color:#3E3E3E;
}

.siteicon_postse {
   background: url(/images/postse.png) left 2px no-repeat;
  color:#3E3E3E;
}

.siteicon_emaile {
   background: url(/images/emaile.png) left 2px no-repeat;
  color:#3E3E3E;
}

.siteicon_amicig {
   background: url(/images/amicig.png) left 2px no-repeat;
  color:#3E3E3E;
}

.popupbody {
  width: 280px;
   background: #FFFFFF;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
-moz-box-shadow: 0px 4px 7px #9c9c9c;
   -webkit-box-shadow: 0px 4px 7px #9c9c9c;
   box-shadow: 0px 4px 7px #9c9c9c;
   font: normal 11px Tahoma, Calibri, Verdana, Geneva, sans-serif;
   color: #3E3E3E;
   padding: 2px;
   
   border: 1px solid #E1E1E1;
   position: absolute;
   z-index: 1000;
   top: 1.5em;
   left: 0;
   display: none;
   min-width: 200px;
}

.popupbody a:link {
   color:#3E3E3E;
 padding: 4px;
   padding-left: 20px;


}


.popupbody a:hover {
   color:#3E3E3E;
   background:#FFEB90;
 padding: 2px;
padding: 4px;
   padding-left: 20px;
text-decoration: underline;
}

you can also change the color and put the color you like best

Now you have to download these images and insert them on ftp in the images folder of mybb, the images will not be seen obviously, and they are:

View Profile:
[Image: profile.png]

Send MP:
[Image: messagesa.png]

View threads:
[Image: forummas.png]

Send email:
[Image: emaile.png]

View Messages:
[Image: postse.png]

Add:
[Image: amicig.png]

You must upload them to the images folder

Now the most difficult part for the less experienced begins.
So save all the code you have on postbit_classic on a notepad or export your theme for security.


Go to Templates & Themes> Template> [YOUR TEMPLATE]> Post Bit Templates> postbit_classic

Now look for this code:

Code:
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />

if there is no desire to write that is written in another way


you must replace it with this code:

Code:
<strong><span class="largetext"><a href="#" id="profilelink_{$post['pid']}" class="nametaghe"><span style="color: #3E3E3E;">{$post['username_formatted']}</span></span></strong></a>

<div id="profilelink_{$post['pid']}_popup" class="popupbody" style="display: none;">
<table style="text-align:left; padding:5px 2px 2px 1px;">

<tr><td ><a href="{$post['profilelink_plain']}" class="siteicon_profile"><span style="color: #3E3E3E;">Visualizza il profilo</span></a></td>


<td><a href="private.php?action=send&amp;uid={$post['uid']}"  class="siteicon_message"><span style="color: #3E3E3E;">Invia MP</span></a></td></tr>


<tr><td><a href="search.php?action=finduserthreads&amp;uid={$post['uid']}"  class="siteicon_forummas"><span style="color: #3E3E3E;">Visualizza discussioni</span></a></td>


<td> <a href="member.php?action=emailuser&amp;uid={$post['uid']}"  class="siteicon_emaile"><span style="color: #3E3E3E;">Invia email</span></a></td></tr>


<tr><td> <a href="search.php?action=finduser&amp;uid={$post['uid']}"  class="siteicon_postse"><span style="color: #3E3E3E;">Visualizza Messaggi</span></a></td>

<td> <a href="/usercp.php?action=editlists"  class="siteicon_amicig"><span style="color: #3E3E3E;">Aggiungi</span></a></td></tr></table>

   </div>
</div>



</div><br />

<script language="javascript" type="text/javascript">

new PopupMenu("profilelink_{$post['pid']}");

</script></span></strong>


I recommend you have to put all the script code that is below at the end.

and then after you save everything and it's done, you have the drop-down menu on the nickname on the postbuses equal to vbulletin


If you have a problem, please comment below.


PREVIEW:
[Image: ky53cH3.png]

goodbye  Blush 
Reply

Users browsing: 1 Guest(s)