Skocz do zawartości
Szukaj na Pecetowiczu
  • Utwórz konto

Wstążka z nazwą rangi w postach MyBB


Rekomendowane odpowiedzi

Cześć, w tym poradniku pod MyBB pokaże wam jak zrobić na forum efekt wstążki w postach z nazwą rangi, inaczej Ribbon.

Z góry informuję, że cały pomysł jest "inspirowany" (jeśli tak można powiedzieć) wtyczką do forum IPS (której nazwy nie znam przepraszam) jednak cały kod oraz wykonanie jest moje.

Zaczniemy od kodu HTML.

Wchodzimy w:

Templates & Style -> Templates -> *Wasz motyw* -> Post Bit Templates -> postbit

i w tym pliku wklejamy poniższy kod:

<div class="wstazka{$usergroup['gid']}"></div>

Klasa “wstążkaX” - możesz zmienić na co ci się podoba ale pamiętaj o zmienieniu też nazw w pliku CSS)

Kod ten najlepiej umieścić pod div z klasą “post {$unapproved_shade}”:

obraz.png.e34b42304e49ad65197ba826d7dc6dd7.png

Dodanie kodu CSS

Następnie wchodzimy w

Templates & Style -> Themes -> *Wasz motyw* -> Add Stylesheet

Plik nazywamy jak chcemy (na przykład “wstazki.css”).

Kiedy plik CSS zostanie utworzony wklejamy poniższy kod:

/* WŁAŚCICIEL */
.wstazkaX{
  width: 115px;
  background-color: #ad7aff;
  z-index: 1;
  height: 20px;
  position: absolute;
  transform: (70deg);
  transform: rotate(-30deg);
  text-align: center;
  left: 12%;
}

.wstazkaX:before{
  content: "";
  position: absolute;
  width: 124px;
  background-color: #ad7aff;
  height: 15px;
  z-index: -1;
  left: -4px;
  top: 4px;
}

.wstazkaX:after{
  content: "NAZWA RANGI";
  position: absolute;
  width: 101px;
  height: 15px;
  z-index: -1;
  left: 10px;
  top: 0px;
}

W nazwach klas mamy literę X - w jej miejsce umieszczasz numer grupy jaki ma mieć tą wstążkę.
Przykładowo: na moim forum ranga właściciel ma ID grupy 4 wiec X zmieniam na 4 przez co finalnie klasa wygląda tak ".wstazka4".
W klasie .wstazkaX:after we właściwości "content" wpisujemy nazwę rangi - w naszym przypadku będzie to Właściciel.

Jeśli chcesz mieć inny kolor wstążki to musisz zmienić w każdej z regule zmienić background-color na kolor który ci się podoba.
Podobnie jest z umiejscowieniem wstążki - aby to zrobić możesz modyfikować wartości "left", "top", "right" oraz "bottom".
Wstążka była robiona pod styl RedBlue.

Chcesz aby inne grupy posiadały wstążkę? Wystarczy powtórzyć wszystkie kroki od początku, wstawić inny numer grupy pod X, zmienić kolor oraz nazwę która ma się wyświetlać 😉

To wszystko - w razie jakichkolwiek problemów pisz poniżej najlepiej od razu z linkiem do forum - pomożemy 😉

Podgląd:

obraz.png

Odnośnik do komentarza
Udostępnij na innych stronach

  • Premium

Szukam i Szukam i w końcu się przyda 🙂

Odnośnik do komentarza
Udostępnij na innych stronach

Dzięki za dodanie poradnika na pewno przyda się wielu osobom 😉

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...