Obrazek rangi wogół avatara

Inne  Założony przez  OwneleK.

wersja skryptu MyBB: 1.6.14
adres forum: chyba nie potrzebne , acz jak bedzie wymagane to zapodam
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Czy jest możliwość na mybb zrobienie takiego czegoś ? http://screenshooter.net/5600267/jthragh http://screenshooter.net/5600267/qrumcdl
Można. Trzeba zrobić rangi w kształcie ramki a następnie w środek ramki wstawić avatar, pozycjonując go najlepiej chyba absolutnie do ramki.

http://www.kurshtml.edu.pl/css/nakladani...wanie.html
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
Dla mnie było to bardzo łatwe do zrobienia, bez zbędnego pozycjonowania/nakładania.

1. Znajdź szablon postbit/postbit_classic w zależności od wersji której używasz, otwórz go, a następnie znajdź w nim linijkę:

{$post['groupimage']} 

2. Zamień ją na:

<span class="ub ub{$usergroup['gid']}">{$usergroup['title']}</span

3. Przejdź do zarządzania stylami w ACP, następnie utwórz nowy arkusz o nazwie userbars.css oraz wklej do niego:

.ub {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    color: #000;
    background: #000;
    width: 90px;
    padding: 4px 4px 0px 4px;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    text-shadow: none;
}

4. Teraz czas na dodanie kolorów grupy do paska. Jak widzisz po kodzie HTML, który dodaliśmy w szablonie postbit*, jest on zależny od ID grupy do której przypisany jest użytkownik. Wykorzystamy to teraz!

W arkuszu CSS który utworzyłeś musisz dodać klasę ubID_GRUPY, czyli przykładowo grupa administratorów ma ID=4, to w CSS dodajesz klasę o nazwie ub4 z ustalonymi przez siebie ustawieniami klasy.

Czyli gotowa klasa dla ID=4 (GID) o czerwonym kolorze grupy będzie wyglądała tak:

.ub4 {
background: #FF0000;
}

TO SAMO ROBISZ Z INNYMI GRUPAMI!

5. Stylizujemy "ramkę" avatara na kolor grupy. W tym celu musimy przejść do szablonu postbit_avatar. Następnie do img dodajemy klasę o nazwie: ubav ubav{$usergroup['gid']}. W moim przypadku całość kodu wygląda tak:

<a href="{$post['profilelink_plain']}"><img src="{$post['avatar']}" alt="" class="ubav ubav{$usergroup['gid']}" {$avatar_width_height} /></a>

6. Ustalamy CSS dla avatarów. Czyli ponownie przechodzimy do utworzonego przez nas arkusza CSS o nazwie userbars.css oraz dodajemy tam następującą klasę:

.ubav {
    display: block;
    margin: 0 auto;
    background: #000;
    padding: 4px;
}

7. Teraz dodajemy kolor do ramki avatara. Robimy dokładnie tak jak robiliśmy z paskami grup. W arkuszu CSS musimy dodać klasę ubavID_GRUPY, czyli znów dla administratorów jest to ID=4, więc w CSS dodajemy klasę ubav4 z ustalonymi przez siebie ustawieniami klasy.

Gotowa klasa dla ID=4 (GID) o czerwonym kolorze ramki będzie wyglądała tak:

.ubav4 {
    background: #FF0000;
}

TO SAMO ROBISZ Z INNYMI GRUPAMI!

No i to chyba wszystko w tym poradniku. Zawsze możesz dodać nowy font do klas CSS i wtedy będzie to ładniej wyglądało. Aktualnie wszystko prezentuje się tak:

[Obrazek: BvRrdPO.png] [Obrazek: j2xnV9y.png]
Pomoc poza forum - odpłatnie.
Dodaj poradnik do Wiki, bo może ktoś będzie chciał taki efekt :)
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI



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

1 gości