Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Shoutbox, różne kształty avatarów

Błąd   Założony przez  Chrupek235.

29.04.2016, 17:47
#1
wersja skryptu MyBB: 1.8.7
adres forum: www.csultimatum.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam, chciałbym aby avatary w shotuboxie przybrały wyznaczone przeze mnie rozmiary i przy tym aby były okrągłe, proszę spojrzeć jak to teraz wygląda jeśli użytkownicy mają różne rozdzielczości avatarów. Myślę, że rozwiązaniem byłoby tutaj ustalenie, że każdy avatar nie zależnie od rozmiaru przybiera rozmiar ustalony przeze mnie w jakichś opcjach czy coś. Proszę oto SS:

[Obrazek: 4R5Ut.png]
29.04.2016, 17:53
#2
Ustalisz to w CSS shoutboxa.


Podmień to:
#shoutbox .avatar img { border-radius: 50%; margin: 0 auto; vertical-align: middle; max-height: 20px;2px rgba(0,0,0,0.1); cursor: pointer; }

na

#shoutbox .avatar img {
margin: 0 auto; vertical-align: middle; height: 25px; width: 25px; border: solid 1px rgba(255,255,255,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer;
border-radius: 7px;
border: solid 1px #F17E01;
}

I zmień dowolnie.
height i width odpowiada za rozmiary, border za obramowanie, kolejny border za okrągłość a kolejny za obramowanie.
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
29.04.2016, 17:59
#3
Niestety, ale to nie pomogło teraz to wygląda tak:

[Obrazek: 4Ru5V.png]

Moim zdaniem trzeba wymusić, by każdy avatar, który zostanie dodany przez użytkownika przybierał rozmiar np 30x30 a wtedy ładnie mi go zaokrągli, tylko właśnie nie wiem która funkcja za to odpowiada i gdzie się znajduje :/
29.04.2016, 18:02 (Ten post był ostatnio modyfikowany: 29.04.2016, 18:02 przez Poftorek.)
#4
Przecież ci powiedziałem,
#shoutbox .avatar img { width: 30px; height: 30px; margin: 0 auto; vertical-align: middle;2px rgba(0,0,0,0.1); cursor: pointer; }

Spróbuj tak, dwie pierwsze wartości to kolejno: długość _ i wysokość |
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
29.04.2016, 18:18
#5
Podmieniłem ten kod w global.css i nic, nadal są różne kształty.
29.04.2016, 19:10 (Ten post był ostatnio modyfikowany: 29.04.2016, 19:11 przez Poftorek.)
#6
W tym problem że nie zrobiłeś tego.

Twój global.css
blockquote {background: #1b1b1b;border-left: 3px solid #e79100;padding: 10px;border-radius: 4px;}
blockquote cite {font-weight: bold;border-bottom: 1px solid #2f2f2f;font-style: normal;display: block;padding-bottom: 3px;margin: 0 0 10px 0;}
blockquote cite span {float: right;font-weight: normal;font-size: 12px;color: #666;}
blockquote cite span.highlight {float: none;font-weight: bold;padding-bottom: 0;}
/* DVZ Shoutbox */
#shoutbox {background: #121212;   padding: 6px;   border-radius: 4px; }
#shoutbox .head {     position: relative;    height: 38px;    line-height: 38px;   padding: 0 4px 0 4px;    color: #fff;    font-family: 'Exo 2', sans-serif;    text-transform: uppercase;    font-size: 15px;
   border-radius: 3px; }
#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 {  }
#shoutbox input.text {background: #222; margin: 0; padding: 10px 8px; width: 100%; font-size: 12px; color: #fff;    width: 100%; box-sizing: border-box; margin: 0px;border: none; }
#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 { 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 { width: 30px; height: 30px; margin: 0 auto; vertical-align: middle;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; }

.ver_sub {
margin: 0;
padding: 0;
list-style: none;
}
.ver_sub li {
width: 100%;
float: left;
}

.favimg {
border-radius: 50px;
}


.main-aside .trow1 img, .main-aside .trow2 img {
width: 30px !important;
height: 30px;
border-radius: 30px;
border: solid 2px #333;
margin-right: 5px;
background: #333;
}

.signature img {max-width:600px; max-height:150px; overflow:hidden;}

.signature {border-top: 1px solid #aaaaaa; width:100%; margin-top:1em; padding-top:0.2em; max-height:400px; overflow:hidden;}

Spróbuj tak:
blockquote {background: #1b1b1b;border-left: 3px solid #e79100;padding: 10px;border-radius: 4px;}
blockquote cite {font-weight: bold;border-bottom: 1px solid #2f2f2f;font-style: normal;display: block;padding-bottom: 3px;margin: 0 0 10px 0;}
blockquote cite span {float: right;font-weight: normal;font-size: 12px;color: #666;}
blockquote cite span.highlight {float: none;font-weight: bold;padding-bottom: 0;}
/* DVZ Shoutbox */
#shoutbox {background: #121212;   padding: 6px;   border-radius: 4px; }
#shoutbox .head {     position: relative;    height: 38px;    line-height: 38px;   padding: 0 4px 0 4px;    color: #fff;    font-family: 'Exo 2', sans-serif;    text-transform: uppercase;    font-size: 15px;
   border-radius: 3px; }
#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 {  }
#shoutbox input.text {background: #222; margin: 0; padding: 10px 8px; width: 100%; font-size: 12px; color: #fff;    width: 100%; box-sizing: border-box; margin: 0px;border: none; }
#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 { 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 { border-radius: 50%; margin: 0 auto; vertical-align: middle; max-height: 20px;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; }

.ver_sub {
margin: 0;
padding: 0;
list-style: none;
}
.ver_sub li {
width: 100%;
float: left;
}

.favimg {
border-radius: 50px;
}


.main-aside .trow1 img, .main-aside .trow2 img {
width: 30px !important;
height: 30px;
border-radius: 30px;
border: solid 2px #333;
margin-right: 5px;
background: #333;
}

.signature img {max-width:600px; max-height:150px; overflow:hidden;}

.signature {border-top: 1px solid #aaaaaa; width:100%; margin-top:1em; padding-top:0.2em; max-height:400px; overflow:hidden;}
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
30.04.2016, 20:36
#7
Ten kod, który podałeś przez pewien czas działał. Wszystkie avatary były co prawda kwadratowe, nie okrągłe, ale ważne, że były takiego samego rozmiaru. Nic nie ruszałem w global.css i po jakimś czasie znowu wygląd avatarów powrócił do tego z poprzedniego ssa :/
30.04.2016, 20:42 (Ten post był ostatnio modyfikowany: 30.04.2016, 20:43 przez myCreedo.)
#8
Global.css, linia 1 zamień całą klasę na to
#shoutbox .avatar img {
    border-radius: 50%;
    margin: 0 auto;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
„Lecz biorę całą odpowiedzialność na siebie. Być może się pomyliłem. Ale przecież mylić się jest rzeczą ludzką.”
30.04.2016, 21:33
#9
Dziękuję! Udało się, wszystko działa :) +sik dla Ciebie.

Teraz mógłbym zapytać jak zrobić to w panelu bocznym topstats oraz w profilu usera? by również były okrągłe avki? :)
30.04.2016, 21:41
#10
1. Szablon index do sidebara dodaj klase sidebar (po forums, która w sumie jest u ciebie zbędna, więc możesz ją zastąpić; pamiętaj, że tylko w sidebarze)
2. Do style.css dodaj:
.sidebar trow1 img { border-radius: 50%; }
.member-avatar img { border-radius: 50%; }
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.



Użytkownicy przeglądający ten wątek:

1 gości