Chatbox

xn · 2012-11-20 00:14:32

Nie wstawię tu gotowego kodu, bo ten może zrobić sobie każdy samemu (wystarczy odrobina znajomości htmla css3), ale kilka podpowiedzi.

Chat wbrew pozorom da się w łatwy sposób modyfikować, ja uzyskałem taki efekt:

Po najechaniu na [i] wysuwa się info z IP i liczbą CB-postów, bez użycia JS.

1. Każdy element wiadomości w chacie da się przemieścić. Każdy za wyjątkiem tytułu użytkownika (o tym za chwilę).
Układ wygląda tak:
[kod "Separacja wiadomości"][kod grupy (tytułu)][kod "Wyświetlanie wiadomości"]
Co najważniejsze - ten podział na "separację" i "wyświetlanie" nie ma ŻADNEGO znaczenia, równie dobrze można by to nazwać "pole1","tytuł","pole2".

Uwzględniając to łatwo dojść do wniosku, że skoro Mahomet (nasza grupa usera) nie przyjdzie do góry (tam gdzie chcemy), to góra przyjdzie do Mahometa.

A jak to zrobić?
<pun_username> - nazwa usera
<pun_date> - data i godzina
<pun_nbpost> - liczba postów
<pun_nbpost_txt> tekst - " chatboxpostów" (czy jakoś tak)
<pun_admin> - IP
<pun_message> - wiadomość

Najpierw robimy pełny kod wiadomości, przykładowo (mega uproszczony):

<br /><pun_nbpost><br />
<b><pun_username></b> (TUTAJ_TYTUŁ)<br />
<br />

Teraz dzielimy kod na dwie części - przed i po "TUTAJ_TYTUŁ"

To wklejamy do separacji:

<br /><pun_nbpost><br />
<b><pun_username></b> (

A to do wiadomości:

)<br />
<br />

Efekt:

Wiadomość
Nazwa użytkownika (TYTUŁ)

Teraz, wykorzystując to możemy nadać każdemu userowi KOLOR:

<strong><span class="cb_administrator">

to ustawiamy jako tytuł (NIE zamykamy strong i span) admina, analogicznie z modem

natomiast wszystkim innym grupom, nawet jeśli nie mają kolorku dajemy:

<strong><span>

Jako tytuł grupy

Teraz na samym początku "wyświetlania wiadomości" dajemy:

<pun_username></span></strong>

Teraz jeszcze regułka w CSS na kolor:

span.cb_administrator A{
    color: red;
	}

I zamiast tekstowego tytułu mamy estetyczny kolorek rangi. [dblpt])

A reszta?
Zwykła tabelka, wygląd dostosowany do stylu. ^^
Natomiast jeśli chodzi o wysuwane info to poszukajcie "menu rozwijane css3" w google

Ostatnio edytowany przez xn (2012-11-20 00:25:49)

ukaszf9 · 2012-11-20 16:13:32

Proste, a jak oko cieszy. Jak byś bardziej chciał rozwinąć modyfikację np. avatar pod nazwą użytkownika, liczba postów użytkownika przy wysuwaniu czy chociażby jakieś pole z "dodatkowych pól" typu żywioł do pbf'ów to chętnie służę pomocą. W tym przypadku js oczywiście wymagane.

No ale pogratulować trzeba, że ktoś próbuje wyrwać się z schematycznych układów w PunBB, nawet w takim chatboxie ; )

Rudik · 2012-11-20 16:38:38

Jak się chce tworzyć w miarę profesjonalnego PBFa, to wg. mnie na tego typu serwisie nie ma co szukać - zostaje tylko własny hosting (btw. wcale nie trzeba się na tym znać).
Owszem można robić te wszystkie rzeczy tak jak Wy tu kombinujecie i ja kiedyś, ale to jak podróż z Warszawy do Łodzi przez Gdańsk, w dodatku trabantem.
Taka moja skromna porada [dblpt])

P.S. a tak w ogóle - xn bardzo fajny poradnik.

@edit:
a no, racja. Specjalnie edytuje, żeby nie psuć takiej ładnej liczby [dblpt])

Ostatnio edytowany przez Rudik (2012-11-20 17:43:35)

xn · 2012-11-20 17:23:05

Dzięki. [dblpt])
Co do avatara - sam o tym myślałem, i gdyby Tomek zechciał to z pomocą dwóch-trzech linijek w php dałoby się to zrobić.

@Rudik - btw, napisałeś już 5500 postów. ^^

Ostatnio edytowany przez xn (2012-11-20 17:28:12)

mistrz2244 · 2013-04-23 02:39:37

A jak zrobić tło dla postu w chatbox'ie? Tak jak na obrazku.

mistrz2244 · 2013-04-24 00:55:18

A jeżeli chciałbym, aby obok nicku wyświetlał się również avatar ? Jest taka możliwość?

Ostatnio edytowany przez mistrz2244 (2013-04-25 02:58:56)

beniek · 2013-05-15 09:42:12

Witam, pozwólcie, że dodam małą modyfikację tego czata.

Jeśli ktoś z Was ma tak zmodyfikowanego czata jak na grafice autora to po tym
skrypcie :
.cb_left {
max-width: 140px;
min-width: 140px;
width: 140px;
}

dodajemy:

.cb_right {
max-width: 300px;
min-width: 700px;
width: 700px;
}

.cb_all {
width: 900px; }

.cb_all:nth-last-child(odd) { background-color: #RGB; }

RGB- kod rgb na kolor

.cb_all:hover { background: #RGB; }

Efekt; Przeplatane kolory tabeli na czacie oraz odznaczenie tabeli po najechaniu myszką

Oficjalne forum pomocy serwisu PUN.pl

#1 2012-11-20 00:14:32

Chatbox

#2 2012-11-20 16:13:32

Odp: Chatbox

#3 2012-11-20 16:38:38

Odp: Chatbox

#4 2012-11-20 17:23:05

Odp: Chatbox

#5 2013-04-23 02:39:37

Odp: Chatbox

#6 2013-04-24 00:55:18

Odp: Chatbox

#7 2013-05-15 09:42:12

Odp: Chatbox

Stopka