Бирживые новости

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

DoG — Sun, 11 Aug 2013 09:22:06 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

DoG — Sun, 11 Aug 2013 07:57:09 GMT

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

Код

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

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

Сверстал bogomol

SMS Бесплатно!

DoG — Sun, 11 Aug 2013 06:28:50 GMT

Устанавливаете в любую часть сайта.

Код

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

DoG — Fri, 09 Aug 2013 14:33:14 GMT

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

Код

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

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

IP Адрес: $IP_ADDRESS$

Группа: $USER_GROUP$

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

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

$LOGIN_FORM$

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

DoG — Fri, 09 Aug 2013 12:09:21 GMT

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

Код

$ONLINE_COUNTER$

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

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

Информер последних тем на форуме

startsmart — Fri, 01 Feb 2013 18:53:12 GMT

Для начала нам нужно создать сам информер. Для этого вам необходимо зайди в ПУ вашего сайта и перейти в раздел "Информеры".
Далее жмем на кнопку "Создать информер" и задаем следующие параметры.

Главная » Информеры

Раздел: форум
Способ сортировки: Последние обновленные темы
Количество материалов: 10
Количество колонок: 1

Затем нажимаем на кнопку "Создать".
Наш информер создан, теперь нужно изменить стандартный вид информера.
Нажимаем на кнопку "Управление дизайном шаблона".

И в появившееся окно вставляем код шаблона.

Код

$NUMBER$.
$THREAD_TITLE$

($REPLIES$)

Вот и все, вам осталось лишь разместить информер у себя на сайте. Спасибо за внимание!

Топ пользователей для Ucoz

startsmart — Mon, 31 Dec 2012 09:51:26 GMT

УСТАНОВКА СКРИПТА:

Для начала нужно создать информер [Пользователи · Материалы · Кол.комментариев · Материалы:9 · Колонки:3] в шаблон информера кидаем код что будет указан ниже, и потом создаем блок и вставляем в блок номер вашего информера=)

Код

А потом зайти в ваш CSS стиль и в самый низ вставить вот этот код:

Код

/* User-top */
  .informer_user_ava {width:60px}
  .informer_user_nic {width:60px;font:9px Verdana,Arial,Helvetica,sans-serif;color:#1E90FF;margin:3px 0 10px}
  .tooltip_user a {text-decoration:none;color:#333}
  .tooltip_user a:hover {position:relative}
  .tooltip_user a span {display:none}
  .tooltip_user a:hover span {z-index:999;display:block;position:absolute;text-align:left;color:#1E90FF;font-size:8pt;top:-150px;right:0;width:250px;background:url('http://bambun.ru/images/fonn.png'); border:1px solid #000000;padding:0}
  .user_i, .user_ii {float:left;width:120px;margin-bottom:2px;padding:0 0 5px;background:url('') repeat-x bottom}
  .user_v {border-bottom:1px solid #000000}
  .user_n {border-top:1px solid #000000}
  .user_c {clear:left;overflow:hidden;font:9px Verdana,Arial,Helvetica,sans-serif;color:#1E90FF;padding:5px}
  .user_v_p {padding:3px 4px 0}
  .user_v, .user_n {clear:left;height:25px;background:url('http://bambun.ru/images/fonn.png') repeat-x top #171717}
  .user_name {float:left}
  .user_full_name {float:right}
  .user_full_name, .user_name {background:;padding:2px 5px;font-size:10px;border-top:1px solid #0d0d0d;border-right:1px solid #0d0d0d;border-left:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}
  .user_ava_a {padding:4px; border:1px solid #0d0d0d;}
  .user_ava_a {width:50px; height:50px; background:url('http://bambun.ru/images/fonn.png');}
  /* ---------------------------------- */

Стильное оповищение Войти или зарегестрироватся

startsmart — Sun, 30 Dec 2012 15:07:30 GMT

Скрипт просит Войти или зарегистрироватся гостей сайта в левом нижнем углу, а когда зашёл как пользователь показывает мини-профиль для ucoz.
Установка:

Заходим: Панель управления » Управление дизайном » Редактирование шаблонов » Глобальные блоки [Блок "Нижняя часть сайта"]
Далее копируем код и вставляем в самый низ в блок < нижняя часть сайта >..

Код

Войти Зарегистрироваться

Новый Топ пользователей с аватарами для Ucoz

startsmart — Sun, 30 Dec 2012 09:25:30 GMT

Описание: Скрипт Топ пользователей для Ucoz. С позициями + хинт информации о пользователи при наведении курсором на аватар.
Установка:
Создаем информер:
[ Пользователи · Материалы · Кол. файлов · Материалы: 8 · Колонки: 2 ]
В шаблон информера вставляем:

Код

  $USERNAME$

$NUMBER$

В CSS вставляем в самый низ

Код

/*Новые участники*/
.utop-user {display:inline-block; width:70px; margin-bottom:8px; position:relative; font-size:10px;}
.utop-user .utop-number {position:absolute; top:-2px; left:-1px; padding:1px 3px; font-size:10px; font-weight:bold; color:#fff; background:#000;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.utop-user a.ut-ava img {max-width:52px; height:52px;border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;}
.utop-user a.ut-ava {border:1px solid #cfcfcf; padding:2px; width:52px;border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; text-align:center; display:inline-block;}
.utop-user a.ut-ava:hover {border-color:#000;}
#easyTooltip{
  padding:10px;
  border:1px solid #000000;
  background:#000;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  color: #666666;
  filter:alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
  z-index:1000;
  }
/*===================================*/

В нижнюю часть сайта

Код

Часы для uCoz

startsmart — Sun, 30 Dec 2012 06:06:33 GMT

Установите эти красивые Flash часы простой вставкой кода. Скопируйте код и поместите его в нужное место на своем сайте. Более подходяще эти часы смотрятся на сайтах в системе uCoz. Часы для uCoz – это простые часы, которые часто устанавливаются на сайтах такой тематики, как игры, аниме, в частности игры Counter-Strike 1.6 и Counter-Strike Sourse. Хотелось бы максимально точно дать определение тем, но это сделать невозможно, т.к. часы универсальные.

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

Циферблата нету, поэтому такие стрелочные часы будут скорее элементом дизайна, нежели средством, которое показывает время. Сейчас часы представляются, как элементы оформления.

Код

width="200" height="200">