Gotowy kod na "Kontakt z Administracją". Poradnik MyBB.

Witajcie. Dodaję gotowy kod HTML i CSS dla fajnej prostej i efektownej tabelki "Kontakt z Administracją" w panelu bocznym w MyBB. Planuję dodać jeszcze kilka innych, także obserwujcie moje tematy. 

Uwaga. Tabela korzysta z ikonek Font Awesome 5, więc aby się poprawnie wyświetlały musisz dodać FA do swojego stylu. Dodam że kod nie zawsze pasuje do każdego stylu dlatego trzeba do sobie dopasować. 

Jak dodać tabelkę "Kontakt z Administracją"

Dodaj kod HTML w odpowiednim miejscu do szablonu "index".

Przejdź do ACP > Style i szablony > Szablony > twój styl > Stron główna > index.

Znajdź zmienną {$forums} i zamień ją na:

<div class="sidebar" style="float: right; width: 19%">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr><td class="sidebar_con">Kontakt z Administracją</td></tr>
<tr>
<td class="bgkont">
 
<!-- WLASCICIELE // -->
<br>
           
 <div class="c_t">
<img src="link_do_avatara" alt="" class="c_img">
<a href="#"><span style="color: red; font-weight: bold"><i class="fas fa-user-tie"></i> uPster</span></a>
               
<span style="float: right">
 <span style="color: red; font-weight: bold">Właściciel</span>
</span>
 </div>
       
<div class="c_b">
<a href=""><span class="c_steam"><i class="fab fa-steam"></i> zyxx</span></a>
 <span class="c_gg"><i class="fab fa-gg"></i> 585859947</span>
<a href=""><span class="c_pw"><i class="fas fa-envelope" style="margin-top: 8px"></i></span></a>
 </div>
       
      
<div class="c_t">
<img src="link_do_avatara" alt="" class="c_img">
<a href="#"><span style="color: red; font-weight: bold"><i class="fas fa-user-tie"></i> uPster</span></a>
               
 <span style="float: right">
 <span style="color: red; font-weight: bold">Właściciel</span>
</span>
 </div>
       
<div class="c_b">
<a href=""><span class="c_steam"><i class="fab fa-steam"></i> zyxx</span></a>
<span class="c_gg"><i class="fab fa-gg"></i> 58589947</span>
<a href=""><span class="c_pw"><i class="fas fa-envelope" style="margin-top: 8px"></i></span></a>
</div>
      
<!-- ADMINISTRATORZY // -->
      
<div class="c_t">
<img src="link_do_avatara" alt="" class="c_img">
<a href="#"><span style="color: #8d9009; font-weight: bold"><i class="fas fa-user-tie"></i> uPster</span></a>
               
<span style="float: right">
<span style="color: #8d9009; font-weight: bold">Administrator</span>
</span>

</div>
       
<div class="c_b">
<a href=""><span class="c_steam"><i class="fab fa-steam"></i> zyxx</span></a>
<span class="c_gg"><i class="fab fa-gg"></i> 58589947</span>
<a href=""><span class="c_pw"><i class="fas fa-envelope" style="margin-top: 8px"></i></span></a>
</div>
    
          
           
           
<!-- MODERATORZY // -->
    
<div class="c_t">
<img src="link_do_avatara" alt="" class="c_img">
<a href="#"><span style="color: green; font-weight: bold"><i class="fas fa-user-tie"></i> uPster</span></a>
<span style="float: right">
<span style="color: green; font-weight: bold">Moderator</span>
</span>
</div>
       
<div class="c_b">
<a href=""><span class="c_steam"><i class="fab fa-steam"></i> zyxx</span></a>
<span class="c_gg"><i class="fab fa-gg"></i> 58589947</span>
<a href=""><span class="c_pw"><i class="fas fa-envelope" style="margin-top: 8px"></i></span></a>
</div>
</td>
</tr>
</table>
<!-- KONIEC KZA -->
</div> 
<div class="forum" style="float: left; width: 80%;">{$forums}</div>
<br class="clear" />

Przejdź do ACP > Style i szablony > Szablony > twój styl > Nowy arkusz CSS > Wpisz kza4.css w polu "Nazwa pliku".

Zaznacz niżej "Wpisz podaną przeze mnie zawartość" i wklej kod CSS:

.sidebar_con {
color: #ffffff;
padding: 20px;
font-size: 14px;
font-weight: bold;
background: linear-gradient(to left, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.bgkont {background: #e0dddd1a;}

.c_b .c_steam {
border-radius: 20px;
height: 30px;
line-height: 30px;
display: block;
float: left;
width: 35%;
font-size: 14px;
color: #fff;
text-align: center;
margin-right: 1%;
background: linear-gradient(to left, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
padding: 2px;
position: relative;
margin-left: 2%;
}

.c_b .c_gg {
background: -moz-linear-gradient(to right, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
background: -webkit-linear-gradient(to right, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
background: linear-gradient(to right, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
border-radius: 20px;
height: 30px;
line-height: 30px;
display: block;
float: left;
width: 35%;
font-size: 14px;
text-align: center;
color: #fff;
position: relative;
margin-right: 1%;
padding: 2px;
}

.c_b .c_pw {
background: -moz-linear-gradient(to left, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
background: -webkit-linear-gradient(to left, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
background: linear-gradient(to left, rgb(53, 19, 89) 0%,rgb(0, 44, 170) 100%);
border-radius: 20px;
height: 30px;
line-height: 28px;
display: block;
float: left;
width: 20%;
text-align: center;
color: #fff;
padding: 2px;
}

.c_t {
border: 1px solid lightgray;
border-radius: 10px;
padding: 15px 20px;
font-size: 14px;
}

.c_b {
display: table;
width: 100%;
margin: 12px 0 28px 0;
font-size: 14px;
}

.c_img {
border: 1px solid lightgray; 
margin-top: -8px; 
float: left; 
width:34px; 
height:34px;
margin-right: 5px;
border-radius: 50%;
}

Kod CSS możesz też oczywiście wkleić do pliku global.css na samym końcu.

Efekt końcowy na domyślnym szablonie: