Neler yeni
menus.tr | The World's Best Forum Platform!

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Giriş yap Şimdi kayıt ol
  • hey ; @Ziyaretçi, coin kasmak için reklama bas. reklam başı 100coin.

Nasıl Yapılır XenForo Hack Statüs Nasıl Yapılır? [Animasyonlu]

Rastgele Konu
İnfo
Nasıl Yapılır
İnfo

İnfo

Administrator
Puanları 30
Çözümler 53
Katılım
14 May 2022
Mesajlar
1,594
Çözümler
53
T. puanı
2,539
Konum
Almanya
İnfo
XenForo Hack Statüs Nasıl Yapılır? [Animasyonlu]
Demo
statüsalbat.gif

Widget/HTML: HTML tabanlı bir widget oluşturup şablon kısmına yapıştırın.
HTML: 
<button class="hackstatus hackstatus-loader hackstatus-loader_xr icon-loader">Lorem Ipsum</button>
<button class="hackstatus hackstatus-undetected hackstatus-undetected_xr icon-undetected">Lorem Ipsum</button>
<button class="hackstatus hackstatus-detected hackstatus-detected_xr icon-detected">Lorem Ipsum</button>
<button class="hackstatus hackstatus-updating hackstatus-updating_xr icon-updating">Lorem Ipsum</button>
<button class="hackstatus hackstatus-public_beta hackstatus-public_beta_xr icon-public_beta">Lorem Ipsum</button>
<button class="hackstatus hackstatus-priv_beta hackstatus-priv_beta_xr icon-priv_beta">Lorem Ipsum</button>

Css: Extra.less şablonuna yapıştırın.
Kod: 
CSS:
.hackstatus {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin: 2px;
}

.hackstatus:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.hackstatus:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

.icon-loader:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f019";
}

.icon-undetected:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f560";
}

.icon-detected:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00d";
}

.icon-updating:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f361";
}

.icon-public_beta:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f3c2";
}

.icon-priv_beta:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f30d";
}
//--------------------------------------------------------------------------------------------
.hackstatus-undetected {
    background: #24522a;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-undetected:hover {
    background: #24522ad9;
}

.hackstatus-undetected:active {
    background: #222627;
    top: 2px;
}

.hackstatus-undetected:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-undetected_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-undetected_xr:before {
    background: #416145;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-undetected_xr:after {
    width: 20px;
    height: 20px;
    background: #416145;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-undetected_xr:active:before {
    color: #CECED5;
}

.hackstatus-undetected_xr:active {
    top: 0;
}

.hackstatus-undetected_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-detected {
    background: #9f0404;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-detected:hover {
    background: #9f0404ad;
}

.hackstatus-detected:active {
    background: #222627;
    top: 2px;
}

.hackstatus-detected:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-detected_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-detected_xr:before {
    background: #dc0d0d;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-detected_xr:after {
    width: 20px;
    height: 20px;
    background: #dc0d0d;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-detected_xr:active:before {
    color: #CECED5;
}

.hackstatus-detected_xr:active {
    top: 0;
}

.hackstatus-detected_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-updating {
    background: #ed900e;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-updating:hover {
    background: #ed900eb8;
}

.hackstatus-updating:active {
    background: #222627;
    top: 2px;
}

.hackstatus-updating:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-updating_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-updating_xr:before {
    background: #ff9c12;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-updating_xr:after {
    width: 20px;
    height: 20px;
    background: #ff9c12;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-updating_xr:active:before {
    color: #CECED5;
}

.hackstatus-updating_xr:active {
    top: 0;
}

.hackstatus-updating_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-public_beta {
    background: #1c3e5c;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-public_beta:hover {
    background: #1c3e5cd1;
}

.hackstatus-public_beta:active {
    background: #222627;
    top: 2px;
}

.hackstatus-public_beta:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-public_beta_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-public_beta_xr:before {
    background: #275277;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-public_beta_xr:after {
    width: 20px;
    height: 20px;
    background: #275277;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-public_beta_xr:active:before {
    color: #CECED5;
}

.hackstatus-public_beta_xr:active {
    top: 0;
}

.hackstatus-public_beta_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-priv_beta {
    background: #5b2180;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-priv_beta:hover {
    background: #5b2180c2;
}

.hackstatus-priv_beta:active {
    background: #222627;
    top: 2px;
}

.hackstatus-priv_beta:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-priv_beta_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-priv_beta_xr:before {
    background: #7524a9;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-priv_beta_xr:after {
    width: 20px;
    height: 20px;
    background: #7524a9;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-priv_beta_xr:active:before {
    color: #CECED5;
}

.hackstatus-priv_beta_xr:active {
    top: 0;
}

.hackstatus-priv_beta_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-loader {
    background: #222627;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-loader:hover {
    background: #222627;
}

.hackstatus-loader:active {
    background: #222627;
    top: 2px;
}

.hackstatus-loader:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-loader_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-loader_xr:before {
    background: #2d3335;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-loader_xr:after {
    width: 20px;
    height: 20px;
    background: #2d3335;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-loader_xr:active:before {
    color: #CECED5;
}

.hackstatus-loader_xr:active {
    top: 0;
}

.hackstatus-loader_xr:active:after {
    left: 60px;
}
 
Cevap yazmak için giriş yap yada kayıt ol.
SPAM YAPMAK YASAKTIR!
  • Örneğin: teşekkürler, sağol, çok iyi, asdqwe, çalışıyor, ty ve benzeri!
  • Örneğin: Aynı mesajı sürekli olarak yazmak. teşekkürler, tşk ve benzeri!
  • Bir başkasının mesajını kopyalayıp aynısını yazmak yasaktır.
  • Bilginiz olmadığı konulara yorum sayınız artsın diye mesaj atmak yasaktır.
  • Yorum yaparken kendi fikrinizi yazınız!
  • Spam mesaj atan görürseniz RAPOR tuşu ile bize bildirmeniz önem ve rica olunur!
Forum Kuraları! Kaynak indirme ?

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz

Sisteme duyarlı
Gündüz modu
Gece modu
Zevkini yansıtan rengi seç

Geniş / Dar görünüm

Temanızı geniş yada dar olarak kullanmak için kullanabileceğiniz bir yapıyı kontrolünü sağlayabilirsiniz.

Izgara görünümlü forum listesi

Forum listesindeki düzeni ızgara yada sıradan listeleme tarzındaki yapının kontrolünü sağlayabilirsiniz.

Resimli ızgara modu

Izgara forum listesinde resimleri açıp/kapatabileceğiniz yapının kontrolünü sağlayabilirsiniz.

Kenar çubuğunu kapat

Kenar çubuğunu kapatarak forumdaki kalabalık görünümde kurtulabilirsiniz.

Sabit kenar çubuğu

Kenar çubuğunu sabitleyerek daha kullanışlı ve erişiminizi kolaylaştırabilirsiniz.

Köşe kıvrımlarını kapat

Blokların köşelerinde bulunan kıvrımları kapatıp/açarak zevkinize göre kullanabilirsiniz.

Geri