Новый вид online - offline для uCoz

Обновленные темы Участники Правила форума Поиск RSS

Страница 1 из 1
1

Форум » uCoz » Скрипты для сайта » Новый вид online - offline для uCoz (ВИД ОНЛАЙН - ОФФЛАЙН)

Дата: Вторник, 02.01.2018, 00:41 | Сообщение # 1

Сообщений: 729

Статус:

Данный вид подойдет только для шаблонов идентичным моему по структуре. Хотя можете попробовать и на других.

Для начала зайдите в "Персональная страница пользователя и найдите там

Код

$_STATUS$

Или же слова "Онлайн и Оффлайн если у вас прописано не через юкозовский код.

После чего вам нужно будет заменить на данный код

Код

<?if(strpos($_STATUS$,'Offline')!=-1)?>
<span class="statusOffline">
<div class="cssload-container">
<div class="cssload-part"></div>
<div class="cssload-part"></div>
<div class="cssload-part"></div>
<div class="cssload-part"></div>
<div class="cssload-part"></div>
</div>
</span>
<?else?>
<span class="statusOnline">
<div class="cssload-container2">
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
</div>
</span>
<?endif?>

И закинуть данный код в css в самый низ.

Код

.cssload-container2 {
    margin:auto;
    display: box;
  display: -o-box;
  display: -ms-box;
  display: -webkit-box;
  display: -moz-box;
    box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  -webkit-box-align: center;
  -moz-box-align: center;
    align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
    box-pack: center;
  -o-box-pack: center;
  -ms-box-pack: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
    justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
}
.cssload-container2 .cssload-part2 {
    width: 4px;
    height: 4px;
    margin-left: 4px;
    transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
    background: rgb(85,255,0);
    border-radius: 0px;
    border: 0px solid rgb(153,255,0);
    transition: background 115ms linear;
  -o-transition: background 115ms linear;
  -ms-transition: background 115ms linear;
  -webkit-transition: background 115ms linear;
  -moz-transition: background 115ms linear;
    animation: cssload-change 1092.5ms linear infinite;
  -o-animation: cssload-change 1092.5ms linear infinite;
  -ms-animation: cssload-change 1092.5ms linear infinite;
  -webkit-animation: cssload-change 1092.5ms linear infinite;
  -moz-animation: cssload-change 1092.5ms linear infinite;
}
.cssload-container2 .cssload-part2:nth-child(1) {
    animation-delay: 115ms;
  -o-animation-delay: 115ms;
  -ms-animation-delay: 115ms;
  -webkit-animation-delay: 115ms;
  -moz-animation-delay: 115ms;
}
.cssload-container2 .cssload-part2:nth-child(2) {
    animation-delay: 230ms;
  -o-animation-delay: 230ms;
  -ms-animation-delay: 230ms;
  -webkit-animation-delay: 230ms;
  -moz-animation-delay: 230ms;
}
.cssload-container2 .cssload-part2:nth-child(3) {
    animation-delay: 345ms;
  -o-animation-delay: 345ms;
  -ms-animation-delay: 345ms;
  -webkit-animation-delay: 345ms;
  -moz-animation-delay: 345ms;
}
.cssload-container2 .cssload-part2:nth-child(4) {
    animation-delay: 460ms;
  -o-animation-delay: 460ms;
  -ms-animation-delay: 460ms;
  -webkit-animation-delay: 460ms;
  -moz-animation-delay: 460ms;
}
.cssload-container2 .cssload-part2:nth-child(5) {
    animation-delay: 575ms;
  -o-animation-delay: 575ms;
  -ms-animation-delay: 575ms;
  -webkit-animation-delay: 575ms;
  -moz-animation-delay: 575ms;
}

@keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-o-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-ms-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-webkit-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-moz-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

.cssload-container {
    margin:auto;
    display: box;
  display: -o-box;
  display: -ms-box;
  display: -webkit-box;
  display: -moz-box;
    box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  -webkit-box-align: center;
  -moz-box-align: center;
    align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
    box-pack: center;
  -o-box-pack: center;
  -ms-box-pack: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
    justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
}
.cssload-container .cssload-part {
    width: 4px;
    height: 4px;
    margin-left: 4px;
    transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
    background: rgb(255,0,0);
    border-radius: 0px;
    border: 0px solid rgb(255,0,0);
    transition: background 115ms linear;
  -o-transition: background 115ms linear;
  -ms-transition: background 115ms linear;
  -webkit-transition: background 115ms linear;
  -moz-transition: background 115ms linear;
    animation: cssload-change 1092.5ms linear infinite;
  -o-animation: cssload-change 1092.5ms linear infinite;
  -ms-animation: cssload-change 1092.5ms linear infinite;
  -webkit-animation: cssload-change 1092.5ms linear infinite;
  -moz-animation: cssload-change 1092.5ms linear infinite;
}
.cssload-container .cssload-part:nth-child(1) {
    animation-delay: 115ms;
  -o-animation-delay: 115ms;
  -ms-animation-delay: 115ms;
  -webkit-animation-delay: 115ms;
  -moz-animation-delay: 115ms;
}
.cssload-container .cssload-part:nth-child(2) {
    animation-delay: 230ms;
  -o-animation-delay: 230ms;
  -ms-animation-delay: 230ms;
  -webkit-animation-delay: 230ms;
  -moz-animation-delay: 230ms;
}
.cssload-container .cssload-part:nth-child(3) {
    animation-delay: 345ms;
  -o-animation-delay: 345ms;
  -ms-animation-delay: 345ms;
  -webkit-animation-delay: 345ms;
  -moz-animation-delay: 345ms;
}
.cssload-container .cssload-part:nth-child(4) {
    animation-delay: 460ms;
  -o-animation-delay: 460ms;
  -ms-animation-delay: 460ms;
  -webkit-animation-delay: 460ms;
  -moz-animation-delay: 460ms;
}
.cssload-container .cssload-part:nth-child(5) {
    animation-delay: 575ms;
  -o-animation-delay: 575ms;
  -ms-animation-delay: 575ms;
  -webkit-animation-delay: 575ms;
  -moz-animation-delay: 575ms;
}

@keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-o-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-ms-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-webkit-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

@-moz-keyframes cssload-change {
    0% {
  border-radius: 0px;
    }
    17.5% {
  border-radius: 0px;
    }
    50% {
  border-radius: 100%;
  background: rgba(255,255,255,0.4);
    }
    93.5% {
  border-radius: 0px;
    }
    100% {
  border-radius: 0px;
    }
}

Прикрепления: 9000501.png (27.9 Kb)

Форум » uCoz » Скрипты для сайта » Новый вид online - offline для uCoz (ВИД ОНЛАЙН - ОФФЛАЙН)

Страница 1 из 1
1