Inne Zmiana wyglądu SHOUTBOX DVZ

Witam, chciałbym zmienić wygląd napisanej wypowiedzi w czacie by DVZ.
Utworzyłem sobie już w HTML / CSS kod jak miałby nowy czat wyglądać i jest wszystko okej. Po podmianie kodu CSS czatu DVZ z moim niestety na forum nie wygląda tak jak powinno. Usunąłem z czatu niepotrzebne na tą chwilę rzeczy, próbuję na wszystkie sposoby i nic się nie dzieje. 

Chciałbym aby czat wyglądał tak:


a wygląda po mojej podmianie kodu CSS tak:


Kod CSS oraz HTML:

<img src="https://lh5.googleusercontent.com/-MlnvEdpKY2w/AAAAAAAAAAI/AAAAAAAAAFw/x6wHNLJmtQ0/s0-c-k-no-ns/photo.jpg" class="avatar" />
<div class="user">SZEF | Steven</div>
<span class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
<div class="date">10:49 AM</div>
<img src="https://lh5.googleusercontent.com/-MlnvEdpKY2w/AAAAAAAAAAI/AAAAAAAAAFw/x6wHNLJmtQ0/s0-c-k-no-ns/photo.jpg" class="avatar" />
<div class="user">SZEF | Steven</div>
<span class="text">Czat służy do luźnych pogawędek. Jeżeli masz problem bądź chcesz o coś zapytać - załóż temat na forum.</span>
<div class="date">10:49 AM</div>


body {
  background: #f4f5f7;
  color: #000;
  font-family: Segoe UI;
  font-size: 13px;
}

.avatar {
  position: relative;
  float: left;
  border: 3px solid #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  height: 39px;
  width: 39px;
}

.user {
  position: relative;
  font-weight: bold;
  font-size: 12px;
  padding: 0px 0px;
  margin-left: 55px;
}

.text {
  position: fixed;
  margin-left: 5px;
  margin-top: 5px;
  border-radius: 3px;
  background: #fff;
  padding: 8px;
}

.date {
  font-size: 10px;
  margin-top: 42px;
  margin-left: 55px;
  margin-bottom: 20px;
}

A gdzie na forum możemy to zobaczyć? To jak to dodałeś?

Obecnie z forum to usunąłem by nie psuć wyglądu. Kod który podałem jest okej bo zawsze jak coś 'modze' to robię to na codepen.io i widzę jak wszystko wygląda. Po podmianie kodu czatu na MYBB nie działa.

Pewnie źle podmieniłeś. Wgraj to na inny styl i daj nam dostęp.

Wydaje mi się, że dobrze. Podesłałem Ci na PW dane dostępu.

Szogi1910 napisał 18.08.2016, 14:35:
Dane do konta testowego, udostępniamy publicznie

Dobra, teraz każdy ma do tego dostęp i tak. Twój błąd jest w tym, że span nie posiada domyślnie wyświetlania blokowego (więc nie przechodzi do następnej linii). Nadaj display block dla daty i jest tak jak chciałeś. http://i.imgur.com/fv5l4Rn.jpg

Po samym wstawieniu display: block musiałem użyć jeszcze w innym miejscu display: inline-block i lekko poprzesuwać i teraz czat prezentuje się tak jak podałem na grafice w 1 poście. Ogólnie to jest dziwne, że w edytorach jest wszystko w porządku a jak wrzucę na MYBB to muszę wprowadzać poprawki bo nie zawsze dobrze wygląda.

Co do podawania publicznie kona testowego, zrobiłbym to lecz tworzę unikalny styl dla siebie i nie chcę by ktoś od tak ukradł to nad czym długo pracuję.:

---

Napotkał mnie jeszcze jeden mały problem. Mianowicie po napisaniu długiego tekstu, cała napisana wiadomość pokazuje się pod avatarem a chciałbym by tekst, który się nie mieści dopiero spadał w dół.

Wgraj nowy wygląd shoutboxa na główny styl lub na inny + daj konto testowe z ustawionym tym stylem.

Na przyszłość: dane podajemy tutaj, nie przez prywatną wiadomość.

Rozwiązanie: Nadaj dla klasy .text stały width.

No masz rację, width pomógł lecz nie do końca. Mam ustawiony background dla tej klasy więc jak ktoś wstawi krótki tekst do czatu, background będzie długi więc estetycznie to nie będzie wyglądało. Sprawę załatwiło max-width