Kontakt z Administracją + status Online - Offline | MyBB

Witajcie. Tym razem dodaję tabelkę "Kontakt z Adminstracją" która posiada status Online/Offline. Tabelka ma ładny i nowoczesny wygląd. Jest bardziej zaawansowana ze względu na kod Javascript.

Uwaga. Tabela korzysta z ikonek Font Awesome 5, więc aby się poprawnie wyświetlały musisz dodać FA do swojego stylu MyBB.

Zakładam że masz panel boczny w swoim stylu, jeżeli nie to musisz go dodać według poradnika: Dodawanie panelu bocznego do MyBB.

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

Jeżeli dodałeś już panel boczny będąc w szablonie index dodaj do panelu kod HTML:

<div id="tborder">
        <div class="bgcont">
        <h2 style="font-size: 20px; font-weight: 500; margin-left: 5px; color: #6d6d6d; margin-top: -10px;"><i class="fas fa-user-cog"></i> Administracja</h2>
            <!-- WLASCICIELE // -->

            <div id="c_t">
                <div class="rankstyle"><div class="rank-margin"><span class="wl">Właściciel</span></div>
                    <div class="c-avatar"><a href="#"><img src="https://i.imgur.com/Eabt0gg.png" class="c_img"></a></div>
                    <div class="user-style"><a href="#"><span class="wl"><i class="fab fa-black-tie"></i> uPster</span></a></div>
                    <div class="c-style">
                        <a href="#"><i class="fas fa-envelope fa-sz-st"></i></a> 
                        <a href="#"><i class="fab fa-steam fa-sz-st padd-cont"></i></a> 
                        <a href="#"><i class="fab fa-gg fa-sz-st"></i></a>
                    </div>
                    <div class="status" style="margin: 10px 0px;">
                        <span id="wlStatus"></span>
                    </div>
                </div>    
            </div>

            <div id="c_t">
                <div class="rankstyle"><div class="rank-margin"><span class="ha">Head Admin</span></div>
                    <span class="c-avatar"><a href="#"><img src="https://i.imgur.com/Eabt0gg.png" class="c_img"></a></span>
                    <div class="user-style"><a href="#"><span class="ha"><i class="fas fa-briefcase"></i> Roughster</span></a></div>
                    <div class="c-style">
                        <a href="#"><i class="fas fa-envelope fa-sz-st"></i></a> 
                        <a href="#"><i class="fab fa-steam fa-sz-st padd-cont"></i></a> 
                        <a href="#"><i class="fab fa-gg fa-sz-st"></i></a>
                    </div>    
                    <div class="status" style="margin: 10px 0px;">
                        <span id="haStatus"></span>
                    </div>
                </div>    
            </div>

            <div id="c_t">
                <div class="rankstyle"><div class="rank-margin"><span class="ja">Junior Administrator</span></div>
                    <span class="c-avatar"><a href="#"><img src="https://i.imgur.com/Eabt0gg.png" class="c_img"></a></span>
                    <div class="user-style"><a href="#"><span class="ja"><i class="fas fa-bullhorn"></i> Speed</span></a></div>
                    <div class="c-style">
                        <a href="#"><i class="fas fa-envelope fa-sz-st"></i></a> 
                        <a href="#"><i class="fab fa-steam fa-sz-st padd-cont"></i></a> 
                        <a href="#"><i class="fab fa-gg fa-sz-st"></i></a>
                    </div>
                    <div class="status" style="margin: 10px 0px;">
                        <span id="jaStatus"></span>
                    </div>
                </div>    
            </div>                
        </div>
    </div>

Przejdź do ACP > Style i szablony > Szablony > twój styl > Stopka - szablony > footer i wklej na samym dole poniższy kod:

<script type="text/javascript">
    $(function() {
  const rankstyle = $(".statusoo"); // Rodzic: kto jest online

  const wlStatus = $("#wlStatus"); // Miejsce w sidebar w kontakcie, w którym wyswietli sie status właściciela
  const wlRank = $(".wl"); // Klasa rangi właściciela

  const haStatus = $("#haStatus"); // Miejsce w sidebar w kontakcie, w którym wyswietli sie status head administratora
  const haRank = $(".ha"); // Klasa rangi head administratora
        
  const jaStatus = $("#jaStatus"); // Miejsce w sidebar w kontakcie, w którym wyswietli sie status junior administratora
  const jaRank = $(".ja"); // Klasa rangi junior administratora
  
  const statusOnline = '<span class="statusOnline">Online</span>';
  const statusOffline = '<span class="statusOffline">Offline</span>';

  if (rankstyle.find(wlRank).text().includes('uPster')) {
    wlStatus.html(statusOnline);
  } else {
    wlStatus.html(statusOffline);
  }
        
  if (rankstyle.find(haRank).text().includes('Roughster')) {
    haStatus.html(statusOnline);
  } else {
    haStatus.html(statusOffline);
  }

  if (rankstyle.find(jaRank).text().includes('Speed')) {
    jaStatus.html(statusOnline);
  } else {
    jaStatus.html(statusOffline);
  }        
});
</script>

Teraz przejdź do Strona główna - szablony > index_whosoline i w spanie lub divie gdzie jest wyświetlana zmienna {$onlinemembers} dodaj:

statusoo

Cofamy się do Style i Szablony i wybieramy Style > Twój styl > global.css i na końcu dodaj:

.bgcont {
background: #232324;
padding: 25px 15px;
border-radius: 3px;
}

#c_t {padding: 5px; font-size: 14px;}

.rankstyle {
text-align: center;
font-size: 16px;
padding: 10px;
background: #202022;
border-radius: 5px;
}

.rank-margin {margin-bottom: 15px;}

.c-avatar {
text-align: center;
width: 100%;
display: block;
padding-bottom: 10px;
}

.c_img {
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid #413d3d;
}

.user-style {
text-align: center;
font-size: 14px;
}

.c-style {
text-align: center;
font-size: 15px;
padding-top: 5px;
}

.fa-sz-st {
font-size: 1.3em;
color: #c2c2c2;
}

.padd-cont {
padding-left: 10px;
padding-right: 10px;
}

.statusOnline {
background: #339433;
color: white;
padding: 2px 3px;
border-radius: 3px;
font-size: 12px;
}

.statusOffline {
background: #c75050;
color: white;
padding: 2px 3px;
border-radius: 3px;
font-size: 12px;
}

Podgląd tabeli (kliknij aby powiększyć):

Hej, @ups co prawda trochę późno to zauważyłem ale mogłeś przynajmniej podać źródło czy też autora ;) 

źródło: https://webboard.pl/thread-76510-post-327638.html#pid327638

+ należy pamiętać, że to nie jest dobre rozwiązanie, co prawda działa, ale pozostawia wiele do życzenia..