• Страница 1 из 1
  • 1
УЛУЧШАЕМ ФУНКЦИЮ КТО ОНЛАЙН ДЛЯ UCOZ
Дмитрий Дата: Понедельник, 11.02.2013, 16:37 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий



Всем доброго дня, в этом посте мы будем создавать и улучшать внешний вид функции "Кто онлайн" для uCoz, плюс мы добавим путём js отдельный контейнер со списком зарегистрированных пользователей которые побывали на сайте в этот день, но для начала смотрим Демо.

Шаг 1 - Переименовываем текст в статистике.:

Для начала следует изменить стандартные надписи статистики пользователей uCoz на свои, для этого заходим:

в Админ панель => Замена стандартных надписей => Статистика "Кто Онлайн"

и заменяем следующий текст на свой:

Онлайн всего: на Онлайн
Гостей: на Гостей
Пользователей: на Читателей
Шаг 2 - Установим JS:
Скачиваем архив.
Теперь заливаем к себе на сайт js файл kto_online и подключаем его вниз страницы, перед закрывающим тегом
Шаг 3 - Установим HTML:

Теперь на страницу сайта устанавливаем следующий html каркас:
Код
<div class="cell_uo">   
   <div class="uzer_info">   
   $ONLINE_COUNTER$   
   <div id="onl4"></div>   
   </div>   

   <!-- Табы -->   
   <div id="tabs_online">   
   <div class="center_dm_uo">   
     
   <ul class="uo_ul">   
   <li><a href="#first">Онлайн</a></li>   
   <li><a href="#second">Кто был</a></li>   
   </ul>   
     
   <div id="first" class="uzer_online">$ONLINE_USERS_LIST$</div>   
   <div id="second" class="uzer_allist"><img src="http://www.center-dm.ru/ucoz/vid_statistika/1/loading.gif" class="uzer_loading" border="0" alt="Иконка загрузки" /></div>   
     
   </div>   
   </div>   
   <!-- /Табы -->   

   </div>


Шаг 4 - Установим CSS:

Наше решение почти готово, осталось прописать нужные стили:

Код
/* Статистика пользователей uCoz   
   ------------------------------------------*/   
.cell_uo {   
   float:left;   
   width:250px;   
   background: #fff;   
   border: 1px solid #CAD3DA;   
}   

.uzer_info {   
   float:left;   
   width:250px;   
   margin-bottom: 10px;   
   padding: 5px 0px;   
   background: #F1F3F7;   
   border-bottom: 1px solid #CAD3DA;   
   font:9px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #fff;   
}   

#onl1,   
#onl2,   
#onl3,   
#onl4,   
#onl1 b,   
#onl2 b,   
#onl3 b,   
#onl4 b {float:left; width:61px; text-align:center;}   
#onl2 {border-right: 1px solid #CAD3DA; border-left: 1px solid #CAD3DA;}   
#onl4 {border-left: 1px solid #CAD3DA;}   

#tabs_online {text-align:center;}   

.uo_ul{   
   margin:0;   
   padding:0;   
   list-style:none;   
}   

.uo_ul li {   
   display: inline;   
   margin: 0px 5px 0px 5px;   
}   

.uo_ul li a {   
   color:#666;   
   font-weight: bold;   
   padding: 5px 10px 5px 10px;   
   text-shadow: 1px 1px 1px #fff;   
}   

.uo_ul li a.selected,ul   
.uo_ul li a.selected:hover,   
.uo_ul li a:hover {color: #666; background:#F1F3F7;}   
.uo_ul li a:focus {outline:0;}   

.uzer_online,   
.uzer_allist {   
   width:230px;   
   overflow: hidden;   
   text-align:left;   
   margin-top: 10px;   
   padding: 5px 10px 5px 10px;   
   border-top: 1px solid #cecece;   
   font:10px Verdana,Arial,Helvetica, sans-serif;   
}


From Russia With Love!
  • Страница 1 из 1
  • 1
Поиск: