Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > MyBB Talk - złe położenie buttona
Pełna wersja: MyBB Talk - złe położenie buttona
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

ScantraX

19.02.2015, 09:02
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
Kod:
.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
Kod:
&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:
[Obrazek: 28kjbtd.jpg]

A chciałbym, ab wyglądało to tak:
[Obrazek: idg6br.jpg]

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.

Dj_Szymek

19.02.2015, 12:55
Spróbuj takiego kodu css:

Kod:
.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;
}

ScantraX

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

[Obrazek: 2r2rygg.jpg]

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

[Obrazek: zxs4lj.jpg]

Dj_Szymek

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

ScantraX

19.02.2015, 16:59
mybb_talk
Kod:
<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

Matslom

19.02.2015, 17:13
Do głównego panelu tego chatu daj
Kod:
position: fixed;
bottom: 0;
right: 0;

ScantraX

19.02.2015, 17:26
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 :P

[Obrazek: t5k9og.jpg]

Matslom

19.02.2015, 17:27
Cofnij moje zmiany i daj konto testowe.

ScantraX

19.02.2015, 17:30
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...

[Obrazek: 2ewo3so.jpg]
Mhmmm
Webboard > Wsparcie MyBB > Style, szablony i grafika > MyBB Talk - złe położenie buttona