Webboard

Pełna wersja: Wygląd shoutboxa dvz
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Stron: 1 2
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.
Kod:
/* 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:
Kod:
.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ć
fastlone napisał(a):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

LikeLoveHate

To krócej można zapisać to tak:
Kod:
.avatar{
margin: 1px 0 1px 8px;
}
Supryk napisał(a):
fastlone napisał(a):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.


Tymczasowy, otwórz plik jscripts/dvz_shoutbox.js i zamień ten fragment kodu:
Kod:
$(document).on('click', '#shoutbox .head', function() {
    dvz_shoutbox.toggle(!dvz_shoutbox.status);
});
$(document).on('click', '#shoutbox .head a', function(e){
    e.stopPropagation();
});
Na ten:
Kod:
$(document).on('click', '#shoutbox .thead', function() {
    dvz_shoutbox.toggle(!dvz_shoutbox.status);
});
$(document).on('click', '#shoutbox .thead a', function(e){
    e.stopPropagation();
});
Supryk napisał(a):
fastlone napisał(a):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 :P
...

lepiej zawartość klasy thead przepisać do klasy head shoutboxa
powtarzam po raz kolejny, więc podalem roziwązanie, po co sobie robić dodatkową robote?
Supryk napisał(a):...

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
Kod:
#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"?


Linijki do podmiany z dvz_shoutbox.js są na 100% prawidłowe, upewnij się, że dobrze je skopiowałeś :)
Supryk napisał(a):
Kod:
#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

Kod:
/* 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; }
Stron: 1 2