Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Trele Morele

[MyBB] Rangi użytkowników w CSS

Promowane odpowiedzi

Trele Morele    176

Rangi użytkowników w CSS

Przejdź do:
ACP -> Strona główna ->  Style -> (Twój styl) -> twojaklasa.css   

(polecam dodać to do css3.css lub stworzyć nową)

Następnie na końcu dodaj kod css:

.gid-x {
	background-color: #3366FF;
	color: #fff;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 10px;
}

gdzie x to ID grupy np. 4 (domyślnie jest to grupa administratora)

ID grupy możesz sprawdzić, np. w linku edycji grupy

 

gid.png.8222ccbeea9ddf1c4bb9f328ad18b229

 

Teraz przejdź do:
Szablony » Twój szablon » opis posta » postbit_classic lub postbit (w zależności od tego jaki masz układ posta)

 

i zamiast 

{$post['usertitle'] <br />   

       

Wstaw to:

<div class="gid-{$post['usergroup']}">{$post['usertitle']}</div> <br />

 

Zapisz efekt powinien wyglądać następująco

 

vZuciQx.png.9f644a81f9b8df2345f93fd5cdeb

  • Lubię to! 7

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Tomasz    630

Kod na inny wygląd rang:

.gid-X {
	background-color: #FF0000;
	border-radius: 2px;
    color: #ffffff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 25px!important;
    text-shadow: none;
    vertical-align: middle;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
	box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
}

 

demo.pngdemo2.pngdemo3.png

 

 

Gdyby rangi w CSS się nie wyświetlały to zainstalowanie tej modyfikacji powinno naprawić problem.

http://community.mybb.com/mods.php?action=view&pid=652

 

  • Lubię to! 5

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


  • Podobna zawartość

    • Przez Salva
      W tym artykule poznasz 7 złych praktyk, których musisz unikać podczas pisania stylów CSS. Obok złych praktyk umieszczone są również ich przeciwieństwa - dobre praktyki. Dzięki temu możesz natychmiast poprawić jakość Twojego kodu.
      Nadużywanie deklaracji !important
      Opisywanie stylów w nazwach selektorów
      Powiązanie selektorów ze strukturą HTML
      Pisanie długich selektorów
      Ignorowanie kolejności elementów HTML
      Ignorowanie specyficzności w kolejności selektorów
      Używanie stylów inline
       
      Źródło i więcej informacji: https://devcorner.pl/zle-praktyki-css-ktorych-musisz-unikac/
    • Gość
      Przez Gość

       
      Przejdź do:
      Panel administracyjny  Użytkownicy  Grupy użytkowników  Zarządzanie grupami użytkowników
       
      Edytuj wybraną grupę, wyczyść pole Obrazek grupy, do pola Prefix grupy wpisz:
      <span class='defaultGroup admin'> a do pola Sufiks grupy:
      </span>
       
      Następnie do ipb_styles.css dodaj:
      /* Grupy */ ul.basic_info .defaultGroup { border-radius: 2px; color: #fff; display: inline-block; font-weight: 500; letter-spacing: 0; padding: 0 15px; text-shadow: none; vertical-align: middle; font-size: 12px; height: 30px; line-height: 30px; box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset; } ul.basic_info .admin { background-color: #c75050; } ul.basic_info .admin:before { content: "\f005"; font-family: 'FontAwesome'; margin-right: 3px; }  
      Jeżeli nie chcemy gwiazdki przed nazwą grupy to należy usunąć z kodu .CSS (ipb_styles.css) klasę .admin:before
       
      Instrukcja dla wersji IPS 4  
      Kod rangi został napisany przez @CzareK  
    • Przez rogue
      Trochę odświeżona wersja wcześniejszego portfolio, kolorystyka i układ pozostał nie zmieniony jedynie dodano kilka rzeczy. Potrzebuje feedback jak strona działa na telefonach oraz takie ogólne informacje. Profesjonalistą nie jestem więc moje pliki sass mogą być napisane dość amatorsko, strona dostępna jest na githubie.
       
      Autor: @rogue / StormWEB
      Tematyka: Usługi Front-End
      Screen/Demo: http://www.stormweb.pl
    • Przez rogue
      Zajmuje się tworzeniem stron internetowych HTML, landing-page, one-page, strony wizytówki, a także proste szablony pod CMS Wordpress. Oferuje staranność, dokumentacje, nowoczesność a przede wszystkim przejrzysty kod zrozumiały nawet dla laika. 
      Wykonam: strony HTML, landing-page, one-page, multi-page, blogowe szablony WordPress
       
      Zakres umiejętności:
      HTML5 & CSS3 JavaScript (podstawowy) Bootstrap 3.x UIKit  RWD WordPress Sass & Gulp.js Adobe Photoshop Podstawy UI/UX  
      Chętnych zapraszam do kontaktu a także przejrzenia mojego portfolio, gdzie link dostępny jest na moim profilu forumowym.
      Kontakt: PW na forum lub jakubwilk@stormweb.pl
    • Przez rogue

       
      Witajcie, przeglądając internet i strony podobne tematycznie zauważyłem, że wiele osób zadaje pytania odnośnie tego jak zrobić witrynę, która będzie prawidłowo wyświetlać się na telefonie jak i monitorze komputera bądź mniejszego laptopa. Odpowiedzi też nie są zadowalające bo zwykle udzielają je Ci, którzy również mają zerowe albo minimalne pojęcie na ten temat. Więc chciałbym nie co przybliżyć ten temat choć sam nie uważam się za jakiegoś eksperta, ale wiedza jaką posiadam powinna być wystarczająca do tego aby wprowadzić was do świata responsywnych stron internetowych.
       
      Przede wszystkim należy zaznaczyć, że termin ten jest swego rodzaju pozycją obowiązkową w każdym słowniku juniora, który zdecydował się tworzyć strony internetowe nie tylko dla siebie i swoich znajomych, ale także dla klientów, których w internecie nie jest mało. Mamy rok 2016 więc jest to mechanizm niezbędny w przypadku każdej strony, którą prezentujemy w świecie internetu i niezależnie od tego czy mówimy o prostym projekcie html, rozbudowanej aplikacji internetowej czy skórki dla popularnych systemów zarządzania treścią.
       
      No dobra, ale co to dokładnie jest?
      Otóż RWD (z ang. Responsive Web Design) to nic innego jak projektowanie (a także kodowanie) stron internetowych biorąc pod uwagę wszelkie popularne rozdzielczości wyświetlaczy. Coraz częściej nasze smartfony posiadają na tyle duży ekran by móc swobodnie surfować po internecie, przeglądać facebooka, blogi a także strony internetowe. Ilość osób, które korzysta z internetu w telefonie jest coraz większa a liczba ta będzie się nieustannie powiększać, dlatego RWD ma na celu ułatwić im dostęp do witryn. Oczywiście nie tylko telefony są tu na celowniku, ale również wszelkiego rodzaju notebooki a także tablety, których rozdziałka często nie przekracza 1024px szerokości.
       
      W porządku, to jak teraz z tego korzystać?
      Najlepsze w tym wszystkim jest to, że RWD wdrążamy bezpośrednio za pomocą CSS. Są to po prostu reguły, w których deklarujemy minimalną a także maksymalną szerokość ekranu a następnie przypisujemy im poszczególne klasy naszego projektu. Reguły te możemy umieszczać wewnątrz naszego głównego pliku CSS bądź specjalnie stworzyć oddzielny aby móc potem swobodnie manipulować zawartością.
       
      Skoro trochę teorii zostało przedstawione to przejdźmy do części praktycznej poradnika, która pozwoli wyjaśnić to co zostało wyżej zapisane. Przypatrzmy się najpierw składni naszego dokumentu index.html
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>...</title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript" src="jquery.min.js"></script> </body> </html> Jest ona jak najbardziej prawidłowa, ale nie zapewni nam swobodnego posługiwania się technologią RWD. Mimo, że wcześniej wspomniałem o tym, że responsywność wprowadzamy po przez arkusz CSS to bez edycji dokumentu html również się nie obejdzie. Musimy w nim wprowadzić jedną linijkę, która umożliwi nam działanie RWD. Pod znacznikiem, w którym deklarujemy kodowanie dokumentu dodajmy tą linijkę a także (opcjonalnie) zewnętrzny arkusz css, tak aby całość wyglądała tak:
       
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>...</title> <link rel="stylesheet" href="responsive.css"> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript" src="jquery.min.js"></script> </body> </html>  
      No dobrze, o ile linijka z dodatkowym arkuszem CSS nie powinna być tajemnicą to co w przypadku tej wcześniejszej? Może ona różnie wyglądać, zależy to od poradników czy frameworków, ale zasada działania jest taka sama. Sprawdza ona rozdzielczość urządzania po czym wyświetla zawartość strony odpowiednio zależną do wcześniej wspomnianych wymiarów. Fragment initial-scale=1 decyduje o tym czy możemy sobie paluszkiem przybliżać, powiększać stronę czy też nie. Preferuje się aby ustawić 1 gdyż różne urządzenia mogą interpretować wielkość czy krój czcionki mimo wprowadzonych na stałe ustawień. Oczywiście przeciwieństwem 1 jest 0.
       

       
      No to sprawmy by nasza strona zachowywała się odpowiednio w zależności od rozdzielczości wyświetlacza. Używać do tego będziemy czegoś takiego jak media queries czyli nic innego jak znacznik @media w naszym arkuszu CSS. Oczywiście za jego pomocą możemy również aktywować wybrany przez nas arkusz CSS w zależności od aktualnej rozdzielczości, znacznik ten posiada również kilka atrybutów, które są częściej i rzadziej używane przez developerów. Ich dokładna lista i krótki opis znajduje się tutaj: https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries lecz w tym poradniku skupimy się na atrybucie all oraz screen a także min-width i max-width
       
      all - nie trzeba raczej tego tłumaczyć, atrybut ten dotyczy wszystkich urządzeń od drukarek po telewizory screen - podobnie jak atrybut all, lecz screen oznacza bardziej ekrany z kolorowym wyświetlaczem min-width & max-width - tutaj również nie trzeba wiele tłumaczyć, atrybuty te oznaczają naszą minimalną jak i maksymalną granice w szerokości rozdzielczości  
      Przejdźmy wiec do naszego arkuszu CSS, wcześniej w kodzie HTML dodałem linijkę z zewnętrznym dokumentem, ale to tak na prawdę zależy od wygody używania, w tej chwili wszystko będę umieszczał w jednym pliku używając komentarzy do wyjaśnienia pewnych kwestii. 
      Załóżmy, że mamy kontener, header a pod tym trzy bloki z losową zawartością, kod CSS będzie wyglądał mniej więcej tak:
      .content { display: block; overflow: hidden; } .content .header { display: block; width: 100%; } // Nasze bloki mają dwie klasy: block oraz block[numer] .content .block { float: left; margin: 0px 15px; } .content .block1, .content .block2, .content .block3 { width: 33%; }  
      Mamy więc nasz CSS, blokom ustawiliśmy % szerokość więc teoretycznie powinno wystarczyć. Otóż nie. Wyobraźcie sobie teraz, że gość przegląda naszą stronę na telefonie gdzie rozdzielczość wynosi 480px szerokości i X wysokości. Zgaduje, że te ściśnięte trzy bloki nie za specjalnie się prezentują i można je ustawić poziomo. W tym momencie na scenę wkracza media queries. Czas na wprowadzenie nowego znacznika do naszego CSS, na samym końcu dodajmy to:
       
      @media screen (max-width: 768px) { ... } @media screen (max-width: 991px) { ... } @media screen (min-width: 992px) { ... }  
      Słownie oznacza to: Atrybucie media, dla kolorowych wyświetlaczy o maksymalnej szerokości ekranu do 768px, 991px i minimalnej szerokości równiej 992px ustaw następujący CSS. Nic trudnego prawda? Teraz tak, ostatnią linijkę możemy pominąć gdyż nie ma sensu przepisywać tego samego z wcześniejszego tagu code. Nie tworzymy strony w oparciu o zasadę first-mobile (najpierw urządzenia mobilne potem laptopy, ekrany komputerów) więc to co będzie się działo ze stroną powyżej 991px odpowiada wcześniejszy wpisany przez nas kod CSS. Oczywiście jeżeli robimy stronę, która będzie zachowywać się inaczej przy rozdzielczości z minimalną szerokością 1200px to wtedy zachowujemy się tak samo jak w przypadku pierwszego i drugiego atrybutu media. Ale skoro jest to poradnik a na dodatek wstęp do darujmy sobie ten proces. Czas zmienić naszą stronę! Wprowadźmy teraz reguły, które będa obowiązywać na podanych wyżej rozdzielczościach.
       
      @media screen (max-width: 768px) { .block1, .block2, .block3 { width: 100%; float: none; display: block; margin-bottom: 15px; } } @media screen (max-width: 991px) { .block1, .block2 { width: 48%; float: left; display: block; } .block3 { width: 100%; float: none; display: block; } }  
      Jak widać mamy do czynienia ze zwykłą składnią CSS więc wątpię aby ktoś popełnił jakiś błąd. Pilnujmy tego czy mamy domknięte klamerki oraz czy gdzieś nie występuje konflikt szerokości. Tym sposobem mówimy naszej stronie a dokładnie arkuszowi CSS jak ma zachowywać się w przypadku wyświetlaczy o konkretnej szerokości. Za pomocą media queries powstają między innymi gridy (siatki) wszystkich frameworków CSS o których może kiedyś napiszę.
       
      Jeżeli chodzi o to jakie punkty szerokości powinno się brać pod uwagę to wypiszę kilka popularnych i najczęściej używanych:
      480px 768px 992px 1200px 1600px  
      Jak wspomniałem są to podstawy więc po więcej informacji zapraszam do składania pytań w komentarzach bądź odwiedzenia blogów bądź tutoriali anglojęzycznych, w których można dowiedzieć się nie co więcej na ten temat.
       
      Oczywiście nie muszę chyba wspominać, że kopiowanie poradnika na inne strony przez osoby trzecie jest zabronione, prawda?
       
      Pozdrawiam, rogue.
  • Ostatnie tematy

×