Wygląd shoutboxa dvz

wersja skryptu MyBB: 1.8
adres forum: zfartem.pl
na czym polega problem (screen, opis, komunikaty, nazwa i wersja wtyczki):

Witam, otóż wydaję mi się iż shoutbox dvz nie wystwietla się poprawie.
Oto co mam w global.css w stylu.

/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry > div { border-bottom: dashed 1px rgba(0,0,0,0.05); }
#shoutbox .entry:last-child > div { border-bottom: none; }

#shoutbox .entry > div { display: table-cell; padding: 6px; }

#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; }
#shoutbox .user { border-right: solid 1px rgba(0,0,0,0.05); text-align: right; white-space: nowrap; }
#shoutbox .text { width: 100%; color: #555; }
#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox  .ip { margin-right: 10px; color: #CECECE; }

Jakieś sugestie?

Szablon dvz_shoutbox:
Zamień:
<div class="head">
na
<div class="thead">

Zamień:
<p class="right">...</p>
na
<div style="float: right;">...</div>

Dzięki wielkie ale bardziej mnie martwi problem rozciągnietych avatarów
http://iv.pl/images/33122351873213355577.png

Szablon tpt:

.avatar{
margin-left:8px;
margin-top:1px;
margin-bottom:1px;
float:left;
}

Rozciąganie powoduje linijka: float:left;

Ponownie dziękuje :p + lecą


Do Moderatorow: Wiem że się nie pisze zbednych postów ale wypada podziękować

Matslom napisał 25.01.2015, 15:47:
https://webboard.pl/thread-59104.html Możesz spokojnie dziękować za pomoc w postach

Szablon dvz_shoutbox:
Zamień:
<div class="head">
na
<div class="thead">

Zamień:
<p class="right">...</p>
na
<div style="float: right;">...</div>

taka operacja zepsuje inne funkcje shoutboxa
lepiej zawartość klasy thead przepisać do klasy head

To krócej można zapisać to tak:

.avatar{
margin: 1px 0 1px 8px;
}

Szablon dvz_shoutbox:
Zamień:
<div class="head">
na
<div class="thead">

Zamień:
<p class="right">...</p>
na
<div style="float: right;">...</div>

taka operacja zepsuje inne funkcje shoutboxa
lepiej zawartość klasy thead przepisać do klasy head

Ok, psuje, ale mogłeś się postarać znaleźć jakieś rozwiązanie tego problemu.

@topic
Tymczasowy, otwórz plik jscripts/dvz_shoutbox.js i zamień ten fragment kodu:

$(document).on('click', '#shoutbox .head', function() {
    dvz_shoutbox.toggle(!dvz_shoutbox.status);
});
$(document).on('click', '#shoutbox .head a', function(e){
    e.stopPropagation();
});

Na ten:

$(document).on('click', '#shoutbox .thead', function() {
    dvz_shoutbox.toggle(!dvz_shoutbox.status);
});
$(document).on('click', '#shoutbox .thead a', function(e){
    e.stopPropagation();
});

Szablon dvz_shoutbox:
Zamień:
<div class="head">
na
<div class="thead">

Zamień:
<p class="right">...</p>
na
<div style="float: right;">...</div>

taka operacja zepsuje inne funkcje shoutboxa
lepiej zawartość klasy thead przepisać do klasy head

Jedyną funkcją która przestała działać po zmianie kodu to zwijanie shoutboxa co myśle ze nie jest aż tak konieczne do użytkowania

fastlone
Zmieniłem kod jak kazałeś ale nie widzę różnicy

...

lepiej zawartość klasy thead przepisać do klasy head shoutboxa
powtarzam po raz kolejny, więc podalem roziwązanie, po co sobie robić dodatkową robote?

...

lepiej zawartość klasy thead przepisać do klasy head shoutboxa
powtarzam po raz kolejny, więc podalem roziwązanie, po co sobie robić dodatkową robote?

Nie chcę być złośliwy ale nie każdy pozjadał wszystkie rozumy tak jak ty. Gdybym wiedział o co 5 to bym tutaj nie pisał. Twoje rozwiązanie, które rzekomo jest proste dla mnie jest niezrozumiałe :p

#shoutbox .head {     padding: 10px;
    background: #151515 url(../../../images/revolution/thead.png) top left repeat-x;
    border-bottom: 1px solid #070707;
    text-shadow: 1px 1px 0px #070707;
     -webkit-box-shadow: inset 0 0 1px 1px #2a2a2a;
     -moz-box-shadow: inset 0 0 1px 1px #2a2a2a;
      box-shadow: inset 0 0 1px 1px #2a2a2a;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #969696;
      font-family: Source Sans Pro;
    font-size: 14px;
    font-style: normal;
}

taka zmiana w css shoutboxa powinna załatwić sprawę

Po co dostosowywać CSS dla shoutboxa dla każdego stylu, skoro zmieniając parę linijek można go zrobić "uniwersalnym"?

@Tymczasowy
Linijki do podmiany z dvz_shoutbox.js są na 100% prawidłowe, upewnij się, że dobrze je skopiowałeś

#shoutbox .head {     padding: 10px;
    background: #151515 url(../../../images/revolution/thead.png) top left repeat-x;
    border-bottom: 1px solid #070707;
    text-shadow: 1px 1px 0px #070707;
     -webkit-box-shadow: inset 0 0 1px 1px #2a2a2a;
     -moz-box-shadow: inset 0 0 1px 1px #2a2a2a;
      box-shadow: inset 0 0 1px 1px #2a2a2a;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #969696;
      font-family: Source Sans Pro;
    font-size: 14px;
    font-style: normal;
}

taka zmiana w css shoutboxa powinna załatwić sprawę

Jednak nie jest to dobre rozwiązanie :p zostawie jego kod na forum aby Supryk widział co się stało.
Wejdz na forum podane w 1 poscie i obczaj :d

nie dodales reszty css od shoutboxa
przeinstaluj wtyczke, wrzuc jeszcze raz pliki
wyrzuc stary css i dodaj

/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }
#shoutbox .head {     padding: 10px;
    background: #151515 url(../../../images/revolution/thead.png) top left repeat-x;
    border-bottom: 1px solid #070707;
    text-shadow: 1px 1px 0px #070707;
     -webkit-box-shadow: inset 0 0 1px 1px #2a2a2a;
     -moz-box-shadow: inset 0 0 1px 1px #2a2a2a;
      box-shadow: inset 0 0 1px 1px #2a2a2a;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #969696;
      font-family: Source Sans Pro;
    font-size: 14px;
    font-style: normal;
}
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry > div { border-bottom: dashed 1px rgba(0,0,0,0.05); }
#shoutbox .entry:last-child > div { border-bottom: none; }

#shoutbox .entry > div { display: table-cell; padding: 6px; }

#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; }
#shoutbox .user { border-right: solid 1px rgba(0,0,0,0.05); text-align: right; white-space: nowrap; }
#shoutbox .text { width: 100%; color: #555; }
#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox  .ip { margin-right: 10px; color: #CECECE; }