MyBB Community Forums

Hello everyone!

I'm trying to figure this out.

After following the above tutorial, when i use the symbol "@" on shoutbox the position on the pop up isn't same as before.

I need to change/delete the left and top but i can't find them in my template.

<div class="mentionme_popup" style="/* left: 139.547px; *//* top: 473px; */height: 156px;width: 225px;">

Here is the template of mentionme_popup:

<div id="mentionme_master_popup" class="mentionme_popup" style="display: none;">
	<div class="mentionme_spinner">
		<img src="images/spinner.gif" />
		<span>{$lang->mention_autocomplete_loading}</span>
	</div>
	<div class="mentionme_popup_input_container">
		<input class="mentionme_popup_input" type="text" autocomplete="off" />
	</div>
	<div class="mentionme_popup_body"></div>
</div>

And this is the mentionme.css:

div.mentionme_popup {
	position: absolute ;
	overflow: hidden;
	z-index: 999;
	min-width: 120px;
	background: white;
	color: black;
	
	border: 1px solid #dddddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: 0 0 5px rgba(0,0,0,.1);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#818181')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#818181');
}



div.mentionme_popup_body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	overflow-y: scroll;
	font-weight: normal !important;
	min-width: 150px;
}

div.mentionme_popup_input_container {
	border-bottom: 1px solid #DDD;
}

input.mentionme_popup_input {
	border: none;
	width: 100%;
	height: 25px;
	font-size: 15px;
	padding-left: 3px;
}

div.mentionme_popup_item {
	padding: 2px 3px 2px 3px !important;
	border-bottom: 1px solid #DDD;
}

div.mentionme_popup_item_on {
	background: #3366FF;
	color: white;
}

span.mentionme_popup_instructions {
	color: grey;
	font-style: italic;
}

span.mentionme_typed_text {
	padding-left: 3px;
}

span.mention_name_highlight {
	color: #3366FF;
	font-weight: bolder;
}

span.mention_name_highlight_on {
	color: white;
	font-weight: bolder;
}

img.mention_user_avatar {
	background: white;
	vertical-align: middle;
	height: 30px;
	width: 30px;
	margin: 2px 10px 2px 5px;

	border: 1px solid #DDD;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

div.mentionme_spinner {
	font-weight: bold;
	font-style: italic;
	color: #3D3D3D;
	padding-left: 5px;
}

div.mentionme_spinner img {
	float: right;
	padding-right: 5px;
}

.postbit_buttons a.postbit_multimention span {
	background-image: url(images/MentionMe/postbit_multimention.png);
}

.postbit_buttons a.postbit_multimention_on span {
	background-image: url(images/MentionMe/postbit_multimention_on.png);
}

a.mentionme_mention {
	/* style mention links here */
}

Who can help me?


Thanks a lot in advance.

Nobody?

I've the same problem as you with the shoutbox.
This is my code:

<div id="" class="mentionme_popup" style="left: 122.616px; top: 1227.85px; height: 249px; width: 403px;">

Did you manage to solve the problem?

Have you tried using the template search located at /admin/index.php?module=style-templates&action=search_replace

I recommend doing a search for class="mentionme_popup" in all templates.

That should yield some results unless the plugin is not installed correctly.

In template Mentionme_popup i have this

<div id="mentionme_master_popup" class="mentionme_popup" style="display: none;">
	<div class="mentionme_spinner">
		<img src="images/spinner.gif" />
		<span>{$lang->mention_autocomplete_loading}</span>
	</div>
	<div class="mentionme_popup_input_container">
		<input class="mentionme_popup_input" type="text" autocomplete="off" />
	</div>
	<div class="mentionme_popup_body"></div>
</div>

The instructions for the position of the div I assume are in the jscript, i tried to see but couldn't solve! Any idea?