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

Kontakt z Administracją ala IPS ze SLIDEREM! | MyBB


Rekomendowane odpowiedzi

Cześć, udostępniam Wam nowoczesną tabelkę na "Kontakt z administracją" ala IPS z wykorzystaniem slider'a.

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

Uwaga. Tabela korzysta z ikonek Font Awesome 6, więc jeśli ktoś z Was nie posiada ikon FA6 w swoim stylu, należy je osadzić.

Przejdź do ACP > Szablony > Twój styl > Niezgrupowane szablony > headerinclude

Dodaj poniższy kod w tagu head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Teraz wklejamy kod HTML do panelu bocznego. Przejdź do ACP -> Szablony -> Twój styl -> Strona główna -> index

<div class="contact__widget">
    <h3>Kontakt z administracją</h3>
    <div class="swiper swiper__admin">
        <div class="swiper-wrapper admin__wrapper">
            <div class="swiper-slide admin__slide">
                <div class="slide__avatar">
                    <img src="./deacecb9c4b7487e605b58dbc7c9f6dc.jpg" alt="Admin Avatar">
                </div>
                <div class="slide__nickname">
                    <a href="#">
                        <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                            <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                            newcolor
                        </span>
                    </a>
                </div>
                <div class="slide__group">
                    <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                        <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                        owner
                    </span>
                </div>
                <div class="slide__contact">
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-solid fa-envelope"></i>
                        </a>
                    </div>
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-brands fa-steam"></i>
                        </a>
                    </div>
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-solid fa-sun"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide admin__slide">
                <div class="slide__avatar">
                    <img src="./deacecb9c4b7487e605b58dbc7c9f6dc.jpg" alt="Admin Avatar">
                </div>
                <div class="slide__nickname">
                    <a href="#">
                        <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                            <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                            newcolor
                        </span>
                    </a>
                </div>
                <div class="slide__group">
                    <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                        <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                        owner
                    </span>
                </div>
                <div class="slide__contact">
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-solid fa-envelope"></i>
                        </a>
                    </div>
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-brands fa-steam"></i>
                        </a>
                    </div>
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-solid fa-sun"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide admin__slide">
                <div class="slide__avatar">
                    <img src="./deacecb9c4b7487e605b58dbc7c9f6dc.jpg" alt="Admin Avatar">
                </div>
                <div class="slide__nickname">
                    <a href="#">
                        <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                            <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                            newcolor
                        </span>
                    </a>
                </div>
                <div class="slide__group">
                    <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                        <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                        owner
                    </span>
                </div>
                <div class="slide__contact">
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-solid fa-envelope"></i>
                        </a>
                    </div>
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-brands fa-steam"></i>
                        </a>
                    </div>
                    <div class="icon__container">
                        <a href="#">
                            <i class="fa-solid fa-sun"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <div class="admins__container">
        <div class="admin">
            <div class="admin__avatar">
                <img src="./deacecb9c4b7487e605b58dbc7c9f6dc.jpg" alt="Admin Avatar">
            </div>
            <div class="admin__nickname">
                <a href="#">
                    <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                        <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                        newcolor
                    </span>
                </a>
            </div>
            <div class="admin__contact">
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-solid fa-envelope"></i>
                    </a>
                </div>
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-brands fa-steam"></i>
                    </a>
                </div>
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-solid fa-sun"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="admin">
            <div class="admin__avatar">
                <img src="./deacecb9c4b7487e605b58dbc7c9f6dc.jpg" alt="Admin Avatar">
            </div>
            <div class="admin__nickname">
                <a href="#">
                    <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                        <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                        newcolor
                    </span>
                </a>
            </div>
            <div class="admin__contact">
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-solid fa-envelope"></i>
                    </a>
                </div>
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-brands fa-steam"></i>
                    </a>
                </div>
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-solid fa-sun"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="admin">
            <div class="admin__avatar">
                <img src="./deacecb9c4b7487e605b58dbc7c9f6dc.jpg" alt="Admin Avatar">
            </div>
            <div class="admin__nickname">
                <a href="#">
                    <span style="color: #dd1c1c; font-weight: bold; text-shadow: 0 0 10px;">
                        <i class="fas fa-star fa-spin" aria-hidden="true"></i>
                        newcolor
                    </span>
                </a>
            </div>
            <div class="admin__contact">
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-solid fa-envelope"></i>
                    </a>
                </div>
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-brands fa-steam"></i>
                    </a>
                </div>
                <div class="icon__container">
                    <a href="#">
                        <i class="fa-solid fa-sun"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Następnie musimy zaimportować oraz zainicjować działanie slider'a, kod wklejamy przed znacznikiem </body> pliku index

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper', {
        direction: 'horizontal',
        loop: true,

        autoplay: {
            delay: 5000,
            disableOnInteraction: true,
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

Przechodzimy do ACP -> Style -> Twój styl -> Nowy styl -> Wpisujemy nazwę dla pliku np: contactWidget.css -> Wklejamy kod podany niżej

.contact__widget * {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.contact__widget {
    height: max-content;
    padding: 20px 10px;
    border-radius: 16px;
    background-color: #333;
    color: #fff;
    font-family: sans-serif;
}

.contact__widget h3 {
    text-align: center;
    font-size: 25px;
    margin: 10px 0 30px;
}

.swiper__admin .admin__wrapper .admin__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.swiper__admin .admin__wrapper .admin__slide .slide__avatar {
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
}

.swiper__admin .admin__wrapper .admin__slide .slide__nickname {
    font-size: 20px;
}

.swiper__admin .admin__wrapper .admin__slide .slide__group {
    font-size: 15px;
    margin-bottom: 10px;
}

.swiper__admin .admin__wrapper .admin__slide .slide__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.swiper__admin .admin__wrapper .admin__slide .slide__contact a {
    width: 45px !important;
    height: 45px !important;
    font-size: 20px !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: #777;
}

.admins__container {
    margin-top: 25px;
}

.admins__container .admin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    margin-top: 8px;
    border-radius: 32px;
    background-color: #222;
}

.admins__container .admin .admin__avatar {
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
}

.admins__container .admin .admin__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.admins__container .admin .admin__nickname {
    flex-grow: 1;
}

.admins__container .admin .admin__contact,
.swiper__admin .admin__wrapper .admin__slide .slide__contact {
    display: flex;
    gap: 5px;
}

.admins__container .admin .admin__contact .icon__container a,
.swiper__admin .admin__wrapper .admin__slide .slide__contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #111;
    color: #fff;
    font-size: 14px;
    transition: ease background-color 0.4s;
}

.admins__container .admin .admin__contact .icon__container a:hover,
.swiper__admin .admin__wrapper .admin__slide .slide__contact a:hover {
    background-color: #444;
}

Po zrobieniu wszystkiego, wasz widget powinien wyglądać tak: 

spacer.png

Odnośnik do komentarza
Udostępnij na innych stronach

  • 1 rok później...

a da się jakoś zamiast strzałki > dać Kropke np

Odnośnik do komentarza
Udostępnij na innych stronach

Po co kropkę? Zmień se w kodzie HTML

Odnośnik do komentarza
Udostępnij na innych stronach

2 minuty temu, Asteliks89YT napisał(a):

a da się jakoś zamiast strzałki > dać Kropke np

chodzi ci o strzałki przy sliderze?

Odnośnik do komentarza
Udostępnij na innych stronach

w jakiej  linijce 

cos takiego 

image.png

 

Odnośnik do komentarza
Udostępnij na innych stronach

@Asteliks89YT tak to nie... nowy slider musisz zrobić bo ten nie ma kropek

Odnośnik do komentarza
Udostępnij na innych stronach

aha a np to z jednego stylu tylko nw jakie ma z niego kody wybrać z tego: General Elegant dark / light Theme for MyBB

image.thumb.png.74d4e724f1dbe3324c9f7924d4806272.png

Odnośnik do komentarza
Udostępnij na innych stronach

Eksperymentuj z kodem 🙂 Tu kopiuj tu wklej tu zamień itd.. gotowe odpowiedzi Cię dużo nie nauczą 😄 Jest to do zrobienia jak najbardziej. Porównaj sobie kody i będziesz widział różnice, droga nauki piękna sprawa 😉 

Odnośnik do komentarza
Udostępnij na innych stronach

5 lat nie robiłem forów na mybb 😄

Odnośnik do komentarza
Udostępnij na innych stronach

@Asteliks89YT  Tutaj masz cala dokumentacje swiperjs gdzie dowiesz sie jak stworzyc slider samemu - https://swiperjs.com/get-started

Ciebie glownie zainteresuje Add Swiper HTML Layout oraz Initialize Swiper. Jesli chcesz "kropeczki" zamiast strzalek to w kodzie html musisz w odpowiednim miejscu wkleic ten kod (tam gdzie div z klasa "swiper" moze to byc na miejscu strzalek):

<div class="swiper-pagination"></div>

Oraz w script w zmiennej swiper ktory wedlug poradnika znajduje sie w indexie dodac kod (dodaj go na przyklad po zakonczeniu autoplay po przecinku lub na samym koncu przed }); 😞

  pagination: {
    el: '.swiper-pagination',
  },


Nie jest to nic trudnego ale jesli jestes w tym zielony to moze ci chwilke zejsc wiec pamietaj o robieniu kopii motywu albo na poczatku pobawic sie w zwyklym pliku html i zrobic caly slider od zera.
 

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ę...