Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    УЛУЧШАЕМ ФУНКЦИЮ КТО ОНЛАЙН ДЛЯ UCOZ

    Дата добавления: 02.11.2013 - 03:26
    Категория: Статистика
    Добавил: newil
    Количество просмотров: 2.1k
    Количество комментариев: 0
    Рейтинг материала: 0.0 / 0
    УЛУЧШАЕМ ФУНКЦИЮ КТО ОНЛАЙН ДЛЯ UCOZ
    БЕСПЛАТНО
    рейтинг 0.0
    /
    голосов 0
    Всем доброго дня, в этом посте мы будем создавать и улучшать внешний вид функции "Кто онлайн" для uCoz, плюс мы добавим путём js отдельный контейнер со списком зарегистрированных пользователей которые побывали на сайте в этот день, но для начала смотрим Демо.

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

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

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

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

    Онлайн всего: на Онлайн
    Гостей: на Гостей
    Пользователей: на Читателей
    Шаг 2 - Установим JS:

    Теперь заливаем к себе на сайт js файл kto_online и подключаем его вниз страницы, перед закрывающим тегом </body>
    Шаг 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://art-ucoz.ru/files/statistics/2/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;  
    }
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: