Jak zrobić coś takiego?

[TheLanselot]

Witam mam pytanie jak zrobić coś takiego jak na ss?

Chodzi mi że ta legenda była w takich kolumnach 

 

[Elevate]

Znajomość html + css i wszystko da się zrobić.

Nie jestem pewny, lecz jeżeli Rumcajs używa group_name_indicator ~ Edytował wygląd wtyczki i tyle, jeżeli jednak jest to autorska legenda, no to wtedy trzeba samemu to pisać.

Możesz użyć do tego wcześniej wspominanej wtyczki i użyć jej zmiennych do stworzenia własnej legendy, lecz do tego jak już wspominałem wymagane są umiejętności html, css

Lub jeżeli chcesz ręcznie dodawać grupy do legendy, a nie automatycznie, wtedy kiedy ktoś zostanie awansowany/degradowany to jest bardzo proste.

A tak na marginesie, nie kopiuj czyjejś pracy, bo to nieładnie ;x

[Vertisan]

<ul>

<li>Lorem</li>

<li>Ipsum</li>

<ul>

 

 

 

ul {

text-align: center;

}

[Szymon.]

Jednak najlepiej będzie użyć bootstrapa. Dodajesz tylko odpowiednia klasę do diva, i wszystko działa w pełni responwysnie. Poczytaj o gridzie w bootstrapie

[Damian_RastMan]

Skoda marnować czasu na bootstrapa dla jednej tabelki, no może że jest już zainstalowany na stronie. 

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
 .table_unit {display:inline-block;width:20%;min-width:150px;max-width:220px;}
 .title {font-weight: bold}
 ul{list-style-type: none;padding:0;}
 #stuff {text-align: center;padding:5px 30px 5px 30px;background-color:#225;color: white; font-family: 'Raleway', sans-serif;border-radius: 5px;}
 h3 {padding:0px;text-transform:uppercase}
 
 .admin {color:red;text-shadow: 0px 0px 3px red}
 .mod {color:green;text-shadow: 0px 0px 3px green}
 .tech {color:purple;text-shadow: 0px 0px 3px purple}
 
</style>

<div id="stuff">
	<h3>☷ Legenda Grup Strona.Net</h3><hr />
	<div class="table_unit">
	 <span class="title">Administratorzy</span>
	 <ul>
	  <li class="admin">★ nick</li>
	  <li class="admin">★ nick</li>
	 </ul>
	</div>
	<div class="table_unit">
	 <span class="title">Moderatorzy</span>
	 <ul>
	  <li class="mod">♡ nick</li>
	  <li class="mod">nick</li>
	 </ul>
	</div>
	<div class="table_unit">
	 <span class="title">Techniczni</span>
	 <ul>
	  <li class="tech">⚒ nick</li>
	  <li class="tech">nick</li>
	 </ul>
	</div>
</div>

Jeszcze tylko pare poprawek, wstawienie grafik zamiast znaków ascii i będzie nawet ładniejsze

[Elevate]

@up Kodowi brakuje responsywności, samo ipb posiada responsywny .wrapper i #content więc nadałoby się dodać responsywność i tabelce, dlatego bootstrap byłby dobrym wyjściem, ten skrypt może i zadziała, ale na twojej rozdziałce, po pomniejszeniu okna przeglądarki kicha.

[Damian_RastMan]

Nikt nie powiedział, że kolega wyżej korzysta z ipb. Poza tym wystarczy dodać kilka linijek w css, żeby zrobić skrypt obsługujący różne rozdziałki. Przyjmując, że będzie pięć tabel, można też dodać min-width: 750px dla #stuff, wtedy nie będzie się łamała, ale wydaje mi się, że efekt zwijania to dobre rozwiązanie - jest lepiej widoczny np. dla urządzeń mobilnych. Ja osobiście uważam, że lepsza od responsywności jest mobilność. Może trzeba w to włożyć więcej pracy i przy naprawdę niestandardowych rozdzielczościach nie da super zadowalającego efektu, ale przy przewidzianych warunkach, mobilność wypada o wiele lepiej. 

 

@Edit

miałem na myśli adaptywność, nie mobilność. 

[TheLanselot]

Wszystko jest git ale mam teraz taki problem ze ta legenda ma inny kolor tła niż na forum.

[Jakub]

Dostałeś gotowca, może tak minimum kreatywności i sobie je po prostu zmień? Znajdujesz w CSSie kod odnoszący się do danego identyfikatora, znajdujesz właściwość odpowiadającą za kolor tła i zmieniasz sobie wartość. Chciałbym przypomnieć, że jesteśmy w Niezbędniku Programisty, nie Niezbędniku Zróbcie To Za Mnie.

[Writen]

Ja tylko dodam, że zamiast używać jakichś dziwnych bootstrapów i "skryptów obsługujących różne rozdziałki", wystarczy użyć flexboxa.

[NaNaTraTra]

Ogólnie to widzę że robicie wielki szum wokół  podstaw HTML/CSS.

Kilka poradników podzielisz to sobie na DIVY, poukładasz obok siebie i po kłopocie.

 

Ja tylko dodam, że zamiast używać jakichś dziwnych bootstrapów i "skryptów obsługujących różne rozdziałki", wystarczy użyć flexboxa.

 

dziwnych bootstrapów? Bootstrap to nie jest nic łatwego nie mniej jednak możesz stworzyć mini biznes i tworzyć responsywne strony i na tym zarabiać.