TWIZE.UCOZ.RU Скрипты для UCOZ

Часы для сайта или для блога

greenpis — Sun, 18 Aug 2013 10:05:09 GMT

Новые часы которые плавно меняют цвет каждую секунду, что-то похоже на хамелеона...
Как установить часы на ucoz платформу? Очень просто и легко. Ставите код часов в любое место сайта или в созданный глобальный блок.

Код

Функция Кто Онлайн для uCoz v2

greenpis — Sun, 18 Aug 2013 08:41:40 GMT

Всем доброго дня, сегодня мы будем улучшать внешний вид функции сайта на uCoz под названием количество пользователей онлайн, благодаря стандартному html-css коду

И так для начала идём в Админ панель => Настройки => Общие настройки => Активировать функцию "Кто Онлайн" ставим галочку.

Теперь активируем модуль статистика сайта, опять идём в Админ панель нажимаем на вкладку неактивные и активируем модуль.
Теперь когда мы активировали нужные нам функции, установим в нужное место вашего сайта следующий html код статистики сайта:

Код

$ONLINE_COUNTER$

  $COUNTER$

Ну и под конец нашего решения, давайте установим css стили:

Код

/* Функция Кто Онлайн для uCoz в стиле минимализм
------------------------------------------*/
.statistics-user {
  float:left;
  width:230px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #CAD3DA;
  border-radius:5px;
}

.statistics-user-l {
  float:left;
  width:90px;
}

.statistics-user-l b,
.statistics-user-l div{
  float:left;
  width:90px;
}

.statistics-user-l b {
  padding-bottom: 3px;
  border-bottom: 1px solid #CAD3DA;
  font-size:14px;
  color:#666;
}

.statistics-user-l div{
  color:#999;
  height:37px;
  padding: 3px 0px 0px 37px;
  display:block;
  background: url(http://pnghosts.ru/img/statistics-user.png) no-repeat;
}

#onl1 {background-position:0px 0px;}
#onl2 {background-position:0px -35px;}
#onl3 {background-position:0px -69px;}
#onl3 b {border-bottom:none }

.statistics-user-r{
  float:right;
  width:88px;
  padding: 5px 0px 0px 7px;
  border-left: 1px solid #CAD3DA;
}

.statistics-user-r img{
  margin-bottom: 5px;
}

.statistics-user a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

На этом всё, мы закончили установку нашего улучшения внешний вид функции количество пользователей онлайн для сайтов созданных в системе uCoz.

Спасибо за внимание!

Счетчик материалов для uCoz

greenpis — Sun, 18 Aug 2013 07:11:01 GMT

И так для начала мы создадим информер материалов для uCoz, для этого идём в Админ панель => Инструменты => Информеры => Создать информер => Счетчик материалов

удаляем старый html код и устанавливаем новый:

Код

Сайтов в каталоге:
$DIR$

Записей в блоге:
$BLOG$

Гостевая книга:
$GB$

Новостей сайта:
$NEWS$

Тем на форуме:
$FORUM_T$

Комментариев:
$COMMENTS$

Объявлений:
$BOARD$

Фотографий:
$PHOTO$

Ответов:
$FAQ$

Файлов:
$LOAD$

Статей:
$PUBL$

Тестов:
$TESTS$

Видео:
$VIDEO$

Игр:
$STUFF$

а если вы хотите чтобы ячейка с количеством материалов имел тёмный фон, как в примере номер два, то устанавливаем в тот же информер следующий html код:

Код

Сайтов в каталоге:
$DIR$

Записей в блоге:
$BLOG$

Гостевая книга:
$GB$

Новостей сайта:
$NEWS$

Тем на форуме:
$FORUM_T$

Комментариев:
$COMMENTS$

Объявлений:
$BOARD$

Фотографий:
$PHOTO$

Ответов:
$FAQ$

Файлов:
$LOAD$

Статей:
$PUBL$

Тестов:
$TESTS$

Видео:
$VIDEO$

Игр:
$STUFF$

а на страницу сайта в нужное место устанавливаем html каркас ячейки с информером материалов:

Код

Счетчик материалов

$MYINF_1$

а теперь давайте стилизуем данное решение, пропишем ему следующие css стили:

Код

/* Правильный счетчик материалов
  ------------------------------------------*/
.informer-materials {
  float:left;
  width:200px;
  background: #fff;
  border: 1px solid #CAD3DA;
  border-radius:5px;
  overflow: hidden;
  margin-right: 20px;
}

.informer-materials-title {
  float:left;
  width:202px;
  padding: 7px 0px;
  background: #376fb9 ;
  margin: -1px -1px 0px -1px;

  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #093a7b;
  text-align:center;
  font-weight: bold;
  color:#fff;
}

.informer-materials ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.informer-materials li{
  float:left;
  width:170px;
  padding: 5px 0px;
  margin: 0px 15px;
  border-top: 1px dotted #CAD3DA;
}

.informer-materials li div{
  float:left;
  width:150px;
  padding-right: 10px;
  text-align:right;
}

.informer-materials li div{
  float:left;
  width:120px;
  text-align:right;
}

.informer-materials li:nth-child(1){
  border-top: none;
}

.informer-materials li span{
  padding: 2px 7px;
  background: #9EA5A8;
  border-radius:3px;

  font:9px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #777;
  font-weight: bold;
  color:#fff;
}

На этом всё, спасибо за внимание!

Авторизация на сайте и выход из профиля без перезагрузки страницы

greenpis — Sat, 17 Aug 2013 18:41:19 GMT

Данный скрипт очень полезен для тех, кто хочет перевести весь функционал своего сайта на ajax запросы. Суть скрипта в том, чтобы пользователь мог авторизовываться на сайте и выходить с него без перезагрузки страницы. Это очень удобный способ, так как авторизация будет максимально быстрой и вы сможете выполнять любые свои функции после успешного входа под своим профилем

Установка:

1) Форма входа:

На всех страницах замените $LOGIN_FORM$ на:

Код

$LOGIN_FORM$

2) Кнопка выхода без перезагрузки страницы прописывается вот так:

Код

Выход

Необычный топ пользователей для uCoz

greenpis — Sat, 17 Aug 2013 14:26:03 GMT

Блок не адаптивный и имеет фиксированную ширину, поэтому Вы сами будете указывать значения длины и ширины в пикселях.
Установка

Создайте информер для модуля Пользователи (Панель управления » Инструменты » Информеры). Выберите Способ сортировки по Репутации. Количество материалов – 8, а количество колонок – 1.

Вставьте следующий код в Шаблон информера.

Код

$REPUTATION$

А этот код туда, где хотите видеть блок (это может быть Первый или Второй контейнер).

Код

$MYINF_1$

Вставьте этот код в Таблицу стилей (CSS).

Код

.top_use1s {width:300px;height:180px;background:#1d1d1d;font-family:Tahoma,sans-serif}
.top_user {width:75px;height:90px;overflow:hidden;float:left;background:#1d1d1d}
.top_user img {width:90px;margin-left:-7px}
.top_user a {width:75px;height:90px;position:absolute;z-index:2;text-decoration:none}
.top_user a:hover {background:rgba(255,255,255,0.1)}
.top_user a span {color:#FFF;padding-top:70px;text-align:center;display:block;font-size:11px}
.top_user_black {position:absolute;width:75px;height:24px;background:rgba(0,0,0,0.3);margin-top:66px}

Создаём раздвижную форму поиска для uCoz

greenpis — Sun, 11 Aug 2013 10:24:21 GMT

Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops.

Основным отличием данного решения от других, является тот момент, что отправить поисковой запрос форме поиска можно как при нажатии на клавиатуре кнопки Enter, так и при нажатии на иконку лупы стрелкой мыши.

И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом установим следующие js:

Код

Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту.

Код

Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили:

Код

/* Раздвижная форма поиска для uCoz
------------------------------------------*/
.sb-search {
  position: relative;
  margin-top: 10px;
  width: 0%;
  min-width: 32px;
  height: 32px;
  float: right;
  overflow: hidden;

  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s;
  -webkit-backface-visibility: hidden;
}

.sb-search-input {
  position: absolute;
  top: 0;
  right: 0;

  margin: 0;
  z-index: 10;
  width:300px;
  height: 20px;
  outline: none;
  background: #fff;
  border: 1px solid #CAD3DA;
  padding: 5px 32px 5px 20px;

  font:11px Verdana,Arial,Helvetica, sans-serif;
  color:#555;
  border-radius:3px 0px 0px 3px;
}

.sb-search-input::-webkit-input-placeholder {
  color: #efb480;
}

.sb-search-input:-moz-placeholder {
  color: #efb480;
}

.sb-search-input::-moz-placeholder {
  color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
  color: #efb480;
}

.sb-icon-search,
.sb-search-submit {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;

  width: 32px;
  height: 32px;
  display: block;

  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.sb-search-submit {
  background: #fff;
  color: transparent;
  border: none;
  outline: none;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.sb-icon-search {
  border:none;
  z-index: 90;
  background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius:3px 3px 3px 3px;
}

.sb-icon-search:before {
  content: "\e000";
}

.sb-search.sb-search-open,
.no-js .sb-search {
  width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
  background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  z-index: 11;
  border-radius:0px 3px 3px 0px;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
  z-index: 90;
}

На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops.

Спасибо за внимание!

Новое меню от Diz-cs

greenpis — Sun, 11 Aug 2013 08:54:55 GMT

Установка:
В новый блок вставляем код:

Код

Главная страница

Каталог файлов

Сверстал bogomol

Мини-профиль для ucoz

greenpis — Fri, 09 Aug 2013 18:05:05 GMT

Описание:
Мини-профиль как у нас на сайте
Установка:
В новый блок вставляем код:

Код

Время: $TIME$
Вы вошли как:
$USERNAME$

Вы вошли как:
$USERNAME$

IP Адрес: $IP_ADDRESS$

Группа: $USER_GROUP$

Личных сообщений: $UNREAD_PM$

Время: $TIME$
Вы вошли как:
$USERNAME$

$LOGIN_FORM$

Вместительная статистика ucoz ver 3.1

greenpis — Fri, 09 Aug 2013 13:52:42 GMT

статистика очень простая
Установка:
В блок вставляем:
Если нужно поменять цвет полоски с коричневого на другой, тогда Вам прийдётся изменить цвет вот этого изображения "prg1.png". Сделать это можно в фотошопе или любым графическим редактором, например стандартной утилитой "Paint".

Код

$ONLINE_COUNTER$

$ONLINE_USERS_LIST$Пользователей нету

  [ Полный Список ]

Боковое Меню Цветное и серое

greenpis — Thu, 25 Jul 2013 16:20:16 GMT

Красивые 2 типа Боковых Менюшек,вам представление более 2 видов меню, выберете тот который будет подойдет вашему дизайну оба меню красивые,и без багов,сам сайт скрипт не нагружает при загрузке...
И так Приступим У Самой Установчке:
Этот самый текст ставим там где мы хотели бы видеть свое новое меню HTML:

Код

  На главную

  Гостевая

  Форум

Обратная связь

Выход

  Вход

А Вот два типа менюшек выбирайте который вам нужен

Серое Меню

Код

#main{
  position:fixed;
  top: 150px;
  right: 0px;
  padding:0;
}

#main ul{
  padding:0;
}

#navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
}

#navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  right:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
}

#navigationMenu a{
  display:block;
  position:relative;
  background:url(http://pnghosts.ru/img/navigation_2.png) no-repeat;
  height:35px;
  width:35px;
}

#navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
}

#navigationMenu a:hover{
  text-decoration:none;
}

#navigationMenu .m_home {background-position:0 0;}
#navigationMenu .m_home :hover {background-position:0 -35px;}

#navigationMenu .m_gost {background-position:-35px 0;}
#navigationMenu .m_gost:hover {background-position:-35px -35px;}

#navigationMenu .m_forum {background-position:-70px 0;}
#navigationMenu .m_forum:hover {background-position:-70px -35px;}

#navigationMenu .m_pochta { background-position:-105px 0;}
#navigationMenu .m_pochta:hover{ background-position:-105px -35px;}

#navigationMenu .m_vxod { background-position:-140px 0;}
#navigationMenu .m_vxod:hover { background-position:-140px -35px;}

#navigationMenu .m_vixod { background-position:-175px 0;}
#navigationMenu .m_vixod:hover { background-position:-175px -35px;}

#navigationMenu .m_gost span,
#navigationMenu .m_forum span,
#navigationMenu .m_pochta span,
#navigationMenu .m_vxod span,
#navigationMenu .m_vixod span,
#navigationMenu .m_home span {
  background:#444;
  color:#777;
  text-shadow:1px 1px 0 #333;
}

Цветное меню

Код

#main{
  position:fixed;
  top: 150px;
  left: 0px;
  padding:0;
  }

  #main ul{
  padding:0;
  }

  #navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
  }

  #navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  left:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  }

  #navigationMenu a{
  display:block;
  position:relative;
  background:url(http://pnghosts.ru/img/navigation_1.png) no-repeat;
  height:35px;
  width:35px;
  }

  #navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
  }

  #navigationMenu a:hover{
  text-decoration:none;
  }

  #navigationMenu .m_home {background-position:0 0;}
  #navigationMenu .m_home :hover {background-position:0 -35px;}
  #navigationMenu .m_home span{
  background:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
  }

  #navigationMenu .m_gost {background-position:-35px 0;}
  #navigationMenu .m_gost:hover {background-position:-35px -35px;}
  #navigationMenu .m_gost span{
  background:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
  }

  #navigationMenu .m_forum {background-position:-70px 0;}
  #navigationMenu .m_forum:hover {background-position:-70px -35px;}
  #navigationMenu .m_forum span{
  background:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
  }

  #navigationMenu .m_pochta { background-position:-105px 0;}
  #navigationMenu .m_pochta:hover{ background-position:-105px -35px;}
  #navigationMenu .m_pochta span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
  }

  #navigationMenu .m_vxod { background-position:-140px 0;}
  #navigationMenu .m_vxod:hover { background-position:-140px -35px;}
  #navigationMenu .m_vxod span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
  }

  #navigationMenu .m_vixod { background-position:-175px 0;}
  #navigationMenu .m_vixod:hover { background-position:-175px -35px;}
  #navigationMenu .m_vixod span{
  background-color:#27ddbf;
  color:#097863;
  text-shadow:1px 1px 0 #87ffe7;
  }