MyBB Talk - złe położenie buttona

wersja skryptu MyBB: 1.8.3
adres forum: www.cswarownia.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam, nie wiem czy odpowiedni dział, tak więc jeżeli zły, to prosiłbym o przeniesienie oraz przepraszam za kłopot.

Mam problem z MyBB Talk, mianowicie chodzi mi o przeniesienie elementu, już tłumaczę na screenie o co kaman.


Kod odpowiadający za button do czatu

.mtalk_main_panel {
background: rgb(127,150,240);
background-image: -o-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
background-image: -moz-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
background-image: -ms-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
z-index: 9999;
font-size: 12px;
position: fixed;
margin: auto 0px;
border-radius:0px; text-decoration: none;
-moz-box-shadow: 0px 7px 25px #000000;
-webkit-box-shadow: 0px 7px 25px #000000;
box-shadow: 0px 7px 25px #000000;}
#mtalk_main_panel .button1  {
    margin-left: 10px;
    margin-right: 10px;
    padding: 2px 3px;
    color: #FFFFFF;
    background: #499338;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.8);
    font-size: 11px;
    border-radius: 5px;
    border: solid 1px #499338;
    text-decoration: none;
}
#mtalk_main_panel .button1:hover {
    background: #317a1d;
}

#mtalk_friends { padding: 0px 0px;
    width: 200px;
    left: 5%;
    top: 35px;
    text-align: center;
}

#mtalk_friends .friend {
    cursor: pointer;
    margin-bottom: 1px;
    text-decoration: none;
    width: 100%;
    background: #ADCBE7;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #FFFFFF;
    padding: 6px 0px;
  z-index: 9999;
font-size: 12px;
position: fixed;
}

#mtalk_friends .friend:hover {
    background: #8c94de;
}

#friends_container {
    max-height: 45%;
    overflow-y: scroll;
}

#new_friend_container {
    padding: 2px;
}

.mtalk_text {
    width: 60%;
}

.mtalk_window {
    width: 250px;
    height: 300px;
    padding: 0px;
}

.mtalk_window_top {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    vertical-align: middle;
    color: #FFFFFF;
    font-size: 12px;
    display: inline-block;
    background: #ADCBE7;
    height: 40px;
    padding-top: 10px;
    border-bottom: solid 1px rgb(127,150,240);
}

.mtalk_window_username {
    padding-left: 10px;
    cursor: move;
    border-top-left-radius: 5px;
    border-right: solid 1px rgb(127,150,240);
    width: 80%;
}

.mtalk_window_minimize {
    width: 10%;
    cursor: pointer;
    text-align: center;
    border-right: solid 1px rgb(127,150,240);
}

.mtalk_window_delete {
    text-align: center;
    width: 10%;
    border-top-right-radius: 5px;
    cursor: pointer;
}

.messages_container {
    height: 200px;
    overflow-y: scroll;
}

.mtalk_window_bot {
    width: 100%;
    padding: 2px 0px;
    text-align: center;
    border-top: solid 1px rgb(127,150,240);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 60px;
}

#friends_buttons_container {
    display: inline;
    margin-left: 10px;
}

#friends_buttons_container .friend_button {
    padding: 3px 10px;
    color: #FFFFFF;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.8);
    font-size: 11px;
    margin-left: 15px;
    border-radius: 5px;
    text-decoration: none;
}

#friends_buttons_container .active {
    background: #e8de19;
}

#friends_buttons_container .inactive {
    background: #c7be14;
}

.mtalk_textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px;
    border-radius: 5px;
    width: 98%;
    height: 52px;
}

.mtalk_message_1 {
    width: 100%;
    padding-bottom: 5px;
    background: #AFC2E9;
    margin-bottom: 1px;
}

.mtalk_message_2 {
    width: 100%;
    padding-bottom: 5px;
    background: #B7AFE9;
    margin-bottom: 1px;
}

.mtalk_message_username {
    font-size: 9px;
    display: inline-block;
    margin-left: 5px;
}

.mtalk_message_date {
    font-size: 8px;
    float: right;
    display: inline-block;
    margin-right: 5px;
}

.mtalk_message_text {
    font-size: 10px;
    font-family: Tahoma, sans-serif;
    padding-top: 3px;
    margin-left: 12px;
}

.delfriend {
    float: right;
    margin-right: 10px;
    visibility: hidden;
}

Kod html

&nbsp;&nbsp;<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', null, true); return false;"><font color="#a4a1a1">Buddy list <i style="font-size: 14px;" class="fa fa-user fa-fw"></i></font></a> &nbsp;

<a href="{$mybb->settings['bburl']}/usercp.php" title="User CP"><font color="#a4a1a1">UserCP <i style="font-size: 14px;" class="fa fa-cube fa-fw"></i></font></a>&nbsp;

<font color="#a4a1a1">Messages <a href="{$mybb->settings['bburl']}/private.php" id="pm_notification" title="Private Messages"> {$mybb->user['pms_unread']}</a> <i style="font-size: 14px;" class="fa fa-bell-o fa-fw"></i></font>&nbsp;

<div class="float_right"> <a href="ucp.php" id="whatever_name"><font color="#a4a1a1">{$mybb->user['username']}  <i style="font-size: 14px;" class="fa fa-caret-down fa-fw"></i>&nbsp;</font></a>

<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" title="Logout"><font color="#a4a1a1">Logout <i style="font-size: 14px;" class="fa fa-times-circle-o fa-fw"></i></font></a>&nbsp; </div>


    <div id="whatever_name_popup" class="popup_menu" style="display: none;">
      <div class="popup_item_container">
      
        
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center">
<tr><td valign="top" width="55">
<a href="{$mybb->settings['bburl']}/usercp.php?action=avatar"><img class="panelavatar" style="vertical-align: middle; margin-top:10px; border: 2px solid #000;" src="{$mybb->user['avatar']}" height="55" width="55"></a>
</td>
<td>&nbsp;</td>
<td valign="top">

  <a href="{$mybb->settings['bburl']}/usercp.php?action=profile" class="popup_item"><font color="#686868">Edit profile</font></a>
  <a href="{$mybb->settings['bburl']}/usercp.php?action=options" class="popup_item"><font color="#686868">Edit options</font></a>
  <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" class="popup_item"><font color="#686868">Change avatar</font></a>
  
     {$admincplink}
  
</td>
<td>&nbsp;</td>
<td valign="top">
  
  <a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" class="popup_item"><font color="#686868">Change signature</font></a>
  <a href="{$mybb->settings['bburl']}/usercp.php?action=forumsubscriptions" class="popup_item"><font color="#686868">Forum subscriptions</font></a>
  <a href="{$mybb->settings['bburl']}/member.php?action=profile" class="popup_item"><font color="#686868">View my profile</font></a>
  
  {$modcplink}
  </td>
</tr>
</table>
        
        
      </div>
  </div>

<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        jQuery("#whatever_name").popupMenu();
    }
// -->
</script>&nbsp;{$mybb_talk}&nbsp;

Aktualnie wygląda tak:


A chciałbym, ab wyglądało to tak:


Kod próbowałem nieco przerobić position:fixed, oraz z-index:9999, także marginami, i bez zmian, tak jakby w ogólnie nie reagowało nic...

Podaję konto testowe:
L: Test
H: test123


Proszę o pomoc. Pozdrawiam.

Spróbuj takiego kodu css:

.mtalk_main_panel {
background: rgb(127,150,240);
background-image: -o-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
background-image: -moz-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
background-image: -ms-linear-gradient(bottom, rgb(127,150,240) 0%, rgb(2,107,177) 53%);
z-index: 9999;
font-size: 12px;
position: relative;
margin: auto 0px;
border-radius:0px; text-decoration: none;
-moz-box-shadow: 0px 7px 25px #000000;
-webkit-box-shadow: 0px 7px 25px #000000;
box-shadow: 0px 7px 25px #000000;}
#mtalk_main_panel .button1  {
    margin-left: 10px;
    margin-right: 10px;
    padding: 2px 3px;
    color: #FFFFFF;
    background: #499338;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.8);
    font-size: 11px;
    border-radius: 5px;
    border: solid 1px #499338;
    text-decoration: none;
}
#mtalk_main_panel .button1:hover {
    background: #317a1d;
}

#mtalk_friends { padding: 0px 0px;
    width: 200px;
    left: 5%;
    top: 35px;
    text-align: center;
}

#mtalk_friends .friend {
    cursor: pointer;
    margin-bottom: 1px;
    text-decoration: none;
    width: 100%;
    background: #ADCBE7;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #FFFFFF;
    padding: 6px 0px;
  z-index: 9999;
font-size: 12px;
position: fixed;
}

#mtalk_friends .friend:hover {
    background: #8c94de;
}

#friends_container {
    max-height: 45%;
    overflow-y: scroll;
}

#new_friend_container {
    padding: 2px;
}

.mtalk_text {
    width: 60%;
}

.mtalk_window {
    width: 250px;
    height: 300px;
    padding: 0px;
}

.mtalk_window_top {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    vertical-align: middle;
    color: #FFFFFF;
    font-size: 12px;
    display: inline-block;
    background: #ADCBE7;
    height: 40px;
    padding-top: 10px;
    border-bottom: solid 1px rgb(127,150,240);
}

.mtalk_window_username {
    padding-left: 10px;
    cursor: move;
    border-top-left-radius: 5px;
    border-right: solid 1px rgb(127,150,240);
    width: 80%;
}

.mtalk_window_minimize {
    width: 10%;
    cursor: pointer;
    text-align: center;
    border-right: solid 1px rgb(127,150,240);
}

.mtalk_window_delete {
    text-align: center;
    width: 10%;
    border-top-right-radius: 5px;
    cursor: pointer;
}

.messages_container {
    height: 200px;
    overflow-y: scroll;
}

.mtalk_window_bot {
    width: 100%;
    padding: 2px 0px;
    text-align: center;
    border-top: solid 1px rgb(127,150,240);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 60px;
}

#friends_buttons_container {
    display: inline;
    margin-left: 10px;
}

#friends_buttons_container .friend_button {
    padding: 3px 10px;
    color: #FFFFFF;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.8);
    font-size: 11px;
    margin-left: 15px;
    border-radius: 5px;
    text-decoration: none;
}

#friends_buttons_container .active {
    background: #e8de19;
}

#friends_buttons_container .inactive {
    background: #c7be14;
}

.mtalk_textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px;
    border-radius: 5px;
    width: 98%;
    height: 52px;
}

.mtalk_message_1 {
    width: 100%;
    padding-bottom: 5px;
    background: #AFC2E9;
    margin-bottom: 1px;
}

.mtalk_message_2 {
    width: 100%;
    padding-bottom: 5px;
    background: #B7AFE9;
    margin-bottom: 1px;
}

.mtalk_message_username {
    font-size: 9px;
    display: inline-block;
    margin-left: 5px;
}

.mtalk_message_date {
    font-size: 8px;
    float: right;
    display: inline-block;
    margin-right: 5px;
}

.mtalk_message_text {
    font-size: 10px;
    font-family: Tahoma, sans-serif;
    padding-top: 3px;
    margin-left: 12px;
}

.delfriend {
    float: right;
    margin-right: 10px;
    visibility: hidden;
}

Hmm, no taki efekt też miałem wcześniej osiągnięty Dj_Szymek, gdy dodałem ten kod, mam tak



Kiedy kliknę, aby z kimś porozmawiać na czacie, mam tak

Sprawdź czy są jakieś szablony globalne od tego pluginu.
Jeśli tak to pokaż je.

mybb_talk

<script type="text/javascript">
    mtalkVar = {time: {$mybb->user['mtalk_time']}, username: '{$mybb->user['username']}'};
    </script><script type="text/javascript" src="{$mybb->settings['bburl']}/mtalk/mtalk.js"></script>
    <div id="mtalk_main_panel" class="mtalk_main_panel"><a href="#" class="button1" onclick="return mtalk.showHideFriends()">Znajomi</a><div id="friends_buttons_container"></div>
    <div id="mtalk_friends" class="mtalk_main_panel" style="display:none"><div id="friends_container"></div>
    <div id="new_friend_container"><input type="text" class="textbox mtalk_text" id="mtalk_username"><a href="#" class="button1" onclick="return mtalk.sendUsername();">Dodaj</a></div>

    </div>
    </div>
    <object height="1" width="1" id="flashObject" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param value="mtalk/test.swf" name="movie">
     <embed height="1" align="middle" width="1" src="mtalk/test.swf" menu="true" type="application/x-shockwave-flash" name="flashObject">
    </object>

Ten jest tylko

Do głównego panelu tego chatu daj

position: fixed;
bottom: 0;
right: 0;

Nooo ładnie, tylko że po dodaniu Twojego kodu Matslom, jest coś takiego że po kliknięciu na Znajomi, wyskakuje button "Dodaj" który zakrywa button Znajomi, widać tylko "Z"

Oraz na górze bałagan, jak widać na ss

Cofnij moje zmiany i daj konto testowe.

Matslom, konto testowe podałem w pierwszym poście na samym dole masz wszystko.

Dodam jeszcze, iż kiedy od kliknę "Z" Znajomi, to ta kreska jest na górze dalej...

---

Mhmmm