Ranking


Popularna zawartość

Wyświetla najczęściej polubioną zawartość od 19.06.2019 uwzględniając wszystkie działy

  1. 1 polubienie
    Opis Prosta tabelka serwerów HTML zastępująca aplikację. Zawiera wszystkie najpotrzebniejsze informacje. Dodany został osobny CSS oraz oba kody tabeli zostały opisane i uporządkowane w sposób optymalny do wygodnej edycji. Instrukcja ACP > Zarządzanie stronami > Bloki > Dodaj nowy blok - Typ: Własny - Edytor zawartości: HTML W dalszym etapie wpisujemy nazwę, opis i klucz szablonu. Jeżeli np. w nazwie kluczu szablonu wpisaliśmy "tabelka" to nasz gotowy klucz będzie wyglądał tak {block="tabelka"}. W zakładce "zawartość" umieszczamy kod HTML i zapisujemy. Następnie przechodzimy do Wygląd > Style i szablony > Styl którego używamy > Edytuj HTML i CSS, następnie w zakładce CSS odnajdujemy custom.css i na końcu dodajemy naszą zawartość css. Ostatni etap to umieszczenie tabelki na stronie wykorzystując nasz klucz szablonu. W edycji stylu w globalTemplate dodajemy nasz klucz nad {template="breadcrumb" app="core" group="global" params="'top'"}, np.: {block="tabelka"} {template="breadcrumb" app="core" group="global" params="'top'"} Po zapisaniu szablonu tabelka pojawi się na stronie. Jeśli jednak użyliśmy sposobu powyżej to tabelka będzie się wyświetlać nie tylko na stronie głównej ale wszędzie. Aby ustawić widoczność tabelki tylko na stronie głównej wpisujemy w poniższy sposób i też nad {template="breadcrumb" app="core" group="global" params="'top'"} {{if \IPS\Request::i()->controller == 'index'}} {block="tabelka"} {{endif}} {template="breadcrumb" app="core" group="global" params="'top'"} Kod HTML <div class="ipsResponsive_hidePhone ipsResponsive_hideTablet msl-tabela-font"> <tbody> <h2 class="ipsType_sectionTitle ipsType_reset cForumTitle msl-button-tytul">Serwery ProjektSpark.pl</h2> <tr><thead> <td><table class="ipsTable ipsBox"> <!--------------------------------- Only Mrage CSGO ------------------------------> <tr class="msl-table-row"> <!---- ID serwera -----> <td><a href="[Ukryta zawartość]" msl-tabela-tooltip="Przejdź do działu serwera"><span class="msl-button-tabela msl-button-dzial">1</span></a></td> <!---- Ikona typu gry -----> <td><img class="msl-tabela-icon" msl-tabela-tooltip="Counter Strike: Global Offensive" src="[Ukryta zawartość]; <!---- Nazwa serwera -----> <td><span class="msl-tabela-hostname">Only Mirage</span></td> <!---- IP serwera -----> <td><a href="steam://connect/51.77.34.138:30064/" msl-tabela-tooltip="Połącz z serwerem"><span class="msl-tabela-ipTXT">51.77.34.138:30064</span></a></td> <!---- Gametracker -----> <td><img src="//cache.gametracker.com/server_info/51.77.34.138:30064/b_350_20_9f0401_9f0401_FFFFFF_9f0401.png" class="msl-gt-tabela"></td> <td><a href="//www.gametracker.com/server_info/51.77.34.138:30064" msl-tabela-tooltip="Przejdź do Gametracker"><span class="msl-button-tabela msl-button-gt">Gametracker</span></a></td> <!---- Link do demek -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Przejdź do demek serwera"><span class="msl-button-tabela msl-button-hltv">HLTV</a></td> <!---- Link do statystyk -----> <td><a href="#" target="_blank" msl-tabela-tooltip="Przejdź do statystyk serwera"><span class="msl-button-tabela msl-button-staty">Statystyki</span></a></td> <!---- Link do sklepu -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Sklep Online 24/7 PaySafeCard/PayPal/Przelew/SMS"><span class="msl-button-tabela msl-button-sklep">Sklep</span></a></td> <!---- Link do głosowania -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Oddaj głos na serwer"><span class="msl-button-tabela msl-button-glos">Zagłosuj</span></a></td> </tr> <!--------------------------------- Surf + RPG CSGO ------------------------------> <tr class="msl-table-row"> <!---- ID serwera -----> <td><a href="[Ukryta zawartość]" msl-tabela-tooltip="Przejdź do działu serwera"><span class="msl-button-tabela msl-button-dzial">2</span></a></td> <!---- Ikona typu gry -----> <td><img class="msl-tabela-icon" msl-tabela-tooltip="Counter Strike: Global Offensive" src="[Ukryta zawartość]; <!---- Nazwa serwera -----> <td><span class="msl-tabela-hostname">Surf + RPG</span></td> <!---- IP serwera -----> <td><a href="steam://connect/145.239.21.248:28005/" msl-tabela-tooltip="Połącz z serwerem"><span class="msl-tabela-ipTXT">145.239.21.248:28005</span></a></td> <!---- Gametracker -----> <td><img src="//cache.gametracker.com/server_info/145.239.21.248:28005/b_350_20_9f0401_9f0401_FFFFFF_9f0401.png" class="msl-gt-tabela"></td> <td><a href="//www.gametracker.com/server_info/145.239.21.248:28005" msl-tabela-tooltip="Przejdź do Gametracker"><span class="msl-button-tabela msl-button-gt">Gametracker</span></a></td> <!---- Link do demek -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Przejdź do demek serwera"><span class="msl-button-tabela msl-button-hltv">HLTV</a></td> <!---- Link do statystyk -----> <td><a href="#" target="_blank" msl-tabela-tooltip="Przejdź do statystyk serwera"><span class="msl-button-tabela msl-button-staty">Statystyki</span></a></td> <!---- Link do sklepu -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Sklep Online 24/7 PaySafeCard/PayPal/Przelew/SMS"><span class="msl-button-tabela msl-button-sklep">Sklep</span></a></td> <!---- Link do głosowania -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Oddaj głos na serwer"><span class="msl-button-tabela msl-button-glos">Zagłosuj</span></a></td> </tr> <!--------------------------------- Only AWP ------------------------------> <tr class="msl-table-row"> <!---- ID serwera -----> <td><a href="[Ukryta zawartość]" msl-tabela-tooltip="Przejdź do działu serwera"><span class="msl-button-tabela msl-button-dzial">3</span></a></td> <!---- Ikona typu gry -----> <td><img class="msl-tabela-icon" msl-tabela-tooltip="Counter Strike: Global Offensive" src="[Ukryta zawartość]; <!---- Nazwa serwera -----> <td><span class="msl-tabela-hostname">Only AWP</span></td> <!---- IP serwera -----> <td><a href="steam://connect/193.70.125.253:27035/" msl-tabela-tooltip="Połącz z serwerem"><span class="msl-tabela-ipTXT">193.70.125.253:27035</span></a></td> <!---- Gametracker -----> <td><img src="//cache.gametracker.com/server_info/193.70.125.253:27035/b_350_20_9f0401_9f0401_FFFFFF_9f0401.png" class="msl-gt-tabela"></td> <td><a href="//www.gametracker.com/server_info/193.70.125.253:27035" msl-tabela-tooltip="Przejdź do Gametracker"><span class="msl-button-tabela msl-button-gt">Gametracker</span></a></td> <!---- Link do demek -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Przejdź do demek serwera"><span class="msl-button-tabela msl-button-hltv">HLTV</a></td> <!---- Link do statystyk -----> <td><a href="#" target="_blank" msl-tabela-tooltip="Przejdź do statystyk serwera"><span class="msl-button-tabela msl-button-staty">Statystyki</span></a></td> <!---- Link do sklepu -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Sklep Online 24/7 PaySafeCard/PayPal/Przelew/SMS"><span class="msl-button-tabela msl-button-sklep">Sklep</span></a></td> <!---- Link do głosowania -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Oddaj głos na serwer"><span class="msl-button-tabela msl-button-glos">Zagłosuj</span></a></td> </tr> <!--------------------------------- x1000 Rust ------------------------------> <tr class="msl-table-row"> <!---- ID serwera -----> <td><a href="[Ukryta zawartość]" msl-tabela-tooltip="Przejdź do działu serwera"><span class="msl-button-tabela msl-button-dzial">4</span></a></td> <!---- Ikona typu gry -----> <td><img class="msl-tabela-icon" msl-tabela-tooltip="Rust" src="[Ukryta zawartość]; <!---- Nazwa serwera -----> <td><span class="msl-tabela-hostname">x1000</span></td> <!---- IP serwera -----> <td><a href="steam://connect/188.165.22.92:28752/" msl-tabela-tooltip="Połącz z serwerem"><span class="msl-tabela-ipTXT">188.165.22.92:28752</span></a></td> <!---- Gametracker -----> <td><img src="//cache.gametracker.com/server_info/188.165.22.92:28752/b_350_20_9f0401_9f0401_FFFFFF_9f0401.png" class="msl-gt-tabela"></td> <td><a href="//www.gametracker.com/server_info/188.165.22.92:28752" msl-tabela-tooltip="Przejdź do Gametracker"><span class="msl-button-tabela msl-button-gt">Gametracker</span></a></td> <!---- Link do demek -----> <td><a href="HTLV" target="_blank" msl-tabela-tooltip="Przejdź do demek serwera"><span class="msl-button-tabela msl-button-hltv">HLTV</a></td> <!---- Link do statystyk -----> <td><a href="#" target="_blank" msl-tabela-tooltip="Przejdź do statystyk serwera"><span class="msl-button-tabela msl-button-staty">Statystyki</span></a></td> <!---- Link do sklepu -----> <td><a href="#" target="_blank" msl-tabela-tooltip="Sklep Online 24/7 PaySafeCard/PayPal/Przelew/SMS"><span class="msl-button-tabela msl-button-sklep">Sklep</span></a></td> <!---- Link do głosowania -----> <td><a href="[Ukryta zawartość]" target="_blank" msl-tabela-tooltip="Oddaj głos na serwer"><span class="msl-button-tabela msl-button-glos">Zagłosuj</span></a></td> </tr> <!--------------------------------- TeamSpeak 3 ------------------------------> <tr class="msl-table-row"> <!---- ID serwera -----> <td><a href="[Ukryta zawartość]" msl-tabela-tooltip="Przejdź do działu serwera"><span class="msl-button-tabela msl-button-dzial">5</span></a></td> <!---- Ikona typu gry -----> <td><img class="msl-tabela-icon" msl-tabela-tooltip="Teamspeak3" src="[Ukryta zawartość]; <!---- Nazwa serwera -----> <td><span class="msl-tabela-hostname">TeamSpeak3</span></td> <!---- IP serwera -----> <td><a href="ts3server://ts3.projektspark.pl:10169" msl-tabela-tooltip="Połącz z serwerem"><span class="msl-tabela-ipTXT">ts3.projektspark.pl:10169</span></a></td> <!---- Gametracker -----> <td><img src="//cache.gametracker.com/server_info/ts3.projektspark.pl:10169/b_350_20_9f0401_9f0401_FFFFFF_9f0401.png" class="msl-gt-tabela"></td> <td><a href="//www.gametracker.com/server_info/ts3.projektspark.pl:10169/" msl-tabela-tooltip="Przejdź do Gametracker"><span class="msl-button-tabela msl-button-gt">Gametracker</span></a></td> <!---- Opcjonalne/Własne -----> <td><a href="ts3server://ts3.projektspark.pl:10169" msl-tabela-tooltip="Połącz z serwerem"><span class="msl-button-tabela msl-button-ts3polacz">Polącz</span></a></td> <!---- Opcjonalne/Własne -----> <td><a href="[Ukryta zawartość]" msl-tabela-tooltip="Napisz prośbę o prywatny kanał"><span class="msl-button-tabela msl-button-ts3kanal">Kanał</span></a></td> </tr> </table></td> </thead></tr> </tbody> </div> Kod CSS /********************************/ /**** Tabelka serwerów HTML ****/ /******************************/ /* Czcionka, tło */ .msl-tabela-font { font-family: 'Oswald', sans-serif; font-weight: 300; color: #ffffff4d; background: transparent; } /* Banner GameTracker */ .msl-gt-tabela { border-radius: 25px; -webkit-box-shadow: 1px 0px 14px 0px rgba(255, 255, 255, 0.37); box-shadow: 1px 0px 10px 0px rgba(255, 255, 255, 0.41); width: 350px; height: 20px; } /* Wygląd przycisków (span) */ .msl-button-tabela { background: #9f0401; -webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.3); box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.3); border-radius: 25px; font-size: 9px; color: #fff; padding: 2px 10px; border: 1px solid #d80400; } .msl-button-tabela:hover { background: #ce2b30; border-top: 1px solid #ff3238; opacity: 1; transition: all 0.3s ease 0s; } /* Czcionka IP serwera + hover linku */ .msl-tabela-ipTXT, .msl-tabela-hostname { color: #fff; } .msl-tabela-ipTXT:hover { color: #ce2b30; opacity: 1; transition: all 0.3s ease 0s; } /* Ikona Fonts Awesome - Nazwa serwera */ .msl-tabela-hostname:before { content: "\f041"; font-family: 'FontAwesome'; margin-right: 5px; color: #f1dddda6; } /* Ikona Fonts Awesome - Ip serwera */ .msl-tabela-ipTXT:before { content: "\f0ac"; font-family: 'FontAwesome'; margin-right: 5px; color: #f1dddda6; } /* Ikona png - Gametracker */ .msl-button-gt:before { content: url('{resource="TabelaNew/gt_tabela.png" app="core" location="front"}'); position: relative; top: 3px; left: -3px; } /* Ikona png - HLTV */ .msl-button-hltv:before { content: url('{resource="TabelaNew/hltv_tabela.png" app="core" location="front"}'); position: relative; top: 3px; left: -3px; } /* Ikona Fonts Awesome - Statystyki */ .msl-button-staty:before { content: "\f1fe"; font-family: 'FontAwesome'; margin-right: 5px; } /* Ikona Fonts Awesome - Sklep */ .msl-button-sklep:before { content: "\f07a"; font-family: 'FontAwesome'; margin-right: 5px; } /* Ikona Fonts Awesome - Glosowanie */ .msl-button-glos:before { content: "\f067"; font-family: 'FontAwesome'; margin-right: 5px; } /* Ikona Fonts Awesome - TS3 Kanał */ .msl-button-ts3kanal:before { content: "\f130"; font-family: 'FontAwesome'; margin-right: 5px; } /* Ikona Fonts Awesome - TS3 Połącz */ .msl-button-ts3polacz:before { content: "\f130"; font-family: 'FontAwesome'; margin-right: 5px; } /* Ikona png - Dział serwera */ .msl-button-dzial:before { content: url('{resource="TabelaNew/iskra.png" app="core" location="front"}'); position: relative; top: 3px; left: -3px; } /* Ikona png - Tytuł/nagłówek tabeli */ .msl-button-tytul:before { content: url('{resource="TabelaNew/iskra.png" app="core" location="front"}'); position: relative; top: 3px; left: -3px; } /* Ikony serwerów CSGO */ .msl-tabela-icon { border-radius: 50%; } tr.msl-table-row { text-align: center; } /* Tooltip (wiadomości po najechaniu na odnośnik */ [msl-tabela-tooltip] { position: relative; z-index: 2; cursor: pointer; } [msl-tabela-tooltip]:before, [msl-tabela-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [msl-tabela-tooltip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #85001f; background-color: hsl(346, 100%, 26%); color: #fff; content: attr(msl-tabela-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } [msl-tabela-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [msl-tabela-tooltip]:hover:before, [msl-tabela-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }