Вид комментариев для темных дизайнов от Артема Малкова

startsmart — Fri, 08 Mar 2013 20:16:47 GMT

Всем привет. Не плохой вид комментариев для сайтов на uCoz. Приступим.
Заходим Панель управления - дизайн - управление дизайном - комментарии - вид комментариев
удаляем все и вставляем этот код

Код

  удалить

$TIME$

$MESSAGE$

$TIME$

$MESSAGE$

  удалить

затем Панель управления - дизайн - управление дизайном - общие шаблоны - таблица стилей
и вставляете в самый низ этот код

Код

.com_wp {border-radius:50%;background:#fff;width:65;height:65}
  .ob_wp { width:73;height:73;background: #20242b;border-radius:50%; }

  .ob_wp1 { width:81;height:81;background:rgba(255,255,255,0.3);;border-radius:50%; }

  .mess_wp{box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);border-radius:4;background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #dbdbdb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#dbdbdb));
background: -webkit-linear-gradient(top, #efefef 0%,#dbdbdb 100%);
background: -o-linear-gradient(top, #efefef 0%,#dbdbdb 100%);
background: -ms-linear-gradient(top, #efefef 0%,#dbdbdb 100%);
background: linear-gradient(to bottom, #efefef 0%,#dbdbdb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dbdbdb',GradientType=0 );
}
  .tim_wp{background:d7d7d7;border-radius:4;}
  #triangle-left {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 9px solid #e1e1e1;
  border-bottom: 7px solid transparent;
}#triangle-left1 {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 9px solid #e1e1e1;
  border-bottom: 7px solid transparent;
}

Готово. До новых работ

Адаптация чата iChat для uCoz

startsmart — Fri, 08 Mar 2013 18:23:59 GMT

Oсобенности:

Мод очистки чата.
Мод вывода аватара пользователя
Новый вид модер панели

Установка:
1. В "Форме добавления сообщений мини-чата" замените все на:

Код

Только зарегистрированные посетители могут писать в чате.

Вам нельзя писать в чате.

2. Вид материалов миничата:

Код

$USERNAME$
$TIME$

$MESSAGE$

3. В CSS:

Код

/*--- iChat v1.1 by MAD-GTX. ---*/

.iChat {
  padding: 3px;
}

.message {
  font-size: 11px;
  font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
  line-height: 1.27;
  word-wrap: break-word;
}

.message {
  border: 1px solid #dadada;
  background-color:#FFFFFF;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 1px;
  margin-top: 2px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  padding: 3px;
}

.message:hover {
  border: 1px solid #cccccc;
}

.clr { clear: both; }

.message div {
  margin: 0;
  padding: 0;
}

.message .info {
  display: block;
  margin-top: 2px;
  color: #969696;
  background-color: rgb(240, 247, 252);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.button {
  background: #fff url("/ichat/img/button.png") repeat-x 0 100%;
  text-shadow: 0 1px 0 #fff;
  border: 1px solid #b3b3b3;
  color: #383838;
  padding: 2px 9px 5px 9px;
  margin-bottom: 2px !important;
  height: 24px;
  font-weight: bold;
  cursor: pointer;
  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
  -moz-box-shadow: 0 1px 4px -3px black;
  -webkit-box-shadow: 0 1px 4px -3px black;
  box-shadow: 0 1px 4px -3px black;
}
.button:hover { background-position: 0 10px; }

.message .text {
  margin-left: 5px;
  font-size: 12px;
}

.message a {
  color: #176093;
}

.message .action {opacity: 0.3;cursor:pointer;}
.message .action:hover {opacity: 1;}

.message hr { border: 0 none; border-top: 1px solid #dbe8ed; height: 1px; }

.message .avatar img {
  margin-right: 5px;
  float: left;
  height: 32px;
  width: 32px;
  background-color: #FCFCFF;
  border: 1px solid #A5CAE4;
  border-radius: 4px 4px 4px 4px;
  padding: 2px;
}

.copyright {
  font-size: 9px;
  padding-right: 5px;
  float: right;
  color: #969696;
}

  .copyright a {
  font-size: 10px;
  color: #176093;
}
.iChat_input { width: 99px; padding: 1px; }
.iChat_bbeditor { border: 1px solid #d4dfe8; background: #fff url("/ichat/img/bbcode/bg.png") repeat; }
.iChat_bbeditor span, .iChat_bbeditor span img, .iChat_bbeditor .bbspacer, .iChat_bbeditor .bbselect { float: left; }
.iChat_bbeditor .bbselect { height: 21px; padding: 4px 3px 0 3px; }
.iChat_bbeditor .bbselect select { font-size: 11px; }
.iChat_bbeditor span { cursor: pointer; background: url("/ichat/img/bbcode/buttons.png") no-repeat; }
.iChat_bbeditor span:hover { background-position: -23px 0; }

.iChat_editor { width: 99% !important; background-color: #f9fafa; border: 1px solid #d4dfe8; }
.iChat_editor .iChat_bbeditor { border-width: 0 0 1px 0; }

.ui-corner-all {
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

#mchatMsgF {
width: 99%;
height: 60px;
display:block;
background:#fff url(/ichat/img/logotype.png) center no-repeat;
border:1px solid #c2c2c2;
}

Cкачать: http://yadi.sk/d/i76qFB1c36cUn

4. Залейте папку iChat из прикрепленного архива в корень сайта и готово.
P.S: Для гостей отключите добавление сообщении.

Вид комментариев для uCoz v.5

startsmart — Fri, 08 Mar 2013 16:18:53 GMT

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

Шаг 1 - Установим HTML:

Как и полагается для начала нам следует установить html каркас вида комментариев, для этого заходим в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев

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

Код

  $USERNAME$ $NAME$
   пишет: | $DATE$ | $TIME$ ( E-mail )
  #$NUMBER$
  Страница с комментарием
  $MODER_PANEL$

  $USER_AVATAR_URL$http://bambun.ru/images/no_aiotar.jpg" />
  $MESSAGE$

$ANSWER$

  Ответить
   0)?>Like | +$COMMENT_RATING$ Like | $COMMENT_RATING$
  Like

Обратите внимание, что аватар и ссылка на страницу администратора в ячейки системной переменной $ANSWER$ отвечающий за отображение ответа от администратора, следует прописать вручную.

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

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

Код

/* Вид комментариев для uCoz v.5
------------------------------------------*/
.cell_comment {
  float:left;
  width:100%;
  color:#666;
  background:#fff;
  margin: 10px 0px;
  border: 5px solid #bdd3e0;
  border-radius:3px; overflow: hidden;
}

.comment_top {
  float:left;
  width:100%;
  padding:5px 0px;
  background:#F4F8F9;
  border-bottom: 1px solid #E6F0F2;
}

.comment_name{
  margin-left: 20px;
  color:#34AB63;
}

.comment_number {
  float:right;
  background:#f5f7f9;
  margin-right: 20px;
}

.comment_top span {
  font:9px Verdana,Arial,Helvetica, sans-serif;
  color:#999;
}

.comment_mp,
.comment_page {
  float:right;
  margin-right: 20px;
}

.comment_message {
  float:left;
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;
  text-align:justify;

  width:94%;
  overflow: hidden;
  padding: 10px 20px 15px 20px;
}

.comment_avatar {
  float:right;
  width:50px;
  height:50px;
  margin: 0px 0px 10px 20px;
  border: 3px solid #bdd3e0;
  border-radius:3px;
}

.comment_bottom {
  float:left;
  width:100%;
  padding:6px 0px 5px 0px;
  background:#F4F8F9;
  border-top: 1px solid #E6F0F2;
  font:10px Verdana,Arial,Helvetica, sans-serif;
}

.comment_answer:link,
.comment_answer:visited{
  float:left;
  margin: 0px 0px 0px 20px;
  background:#8cbec9;
  padding: 2px 7px 2px 7px;
  text-shadow: 1px 1px 1px #5d97a4;
  color:#fff;
}

.comment_answer:hover {
  background:#9dd0db;
}

.comment_answer:active {
  box-shadow:inset 0px 0px 3px #5a95a2!important;
}

.comment_like:link,
.comment_like:visited{
  float:right;
  background:#8ec98c;
  padding: 2px 7px 2px 7px;
  text-shadow: 1px 1px 1px #4aa44c;
  color:#fff;
}

.comment_like:hover {
  background:#abe6a9;
}

.comment_like:active {
  box-shadow:inset 0px 0px 3px #349932!important;
}

.comment_bottom strong {
  float:right;
  padding: 2px 10px 2px 10px;
  background:#dde9d9;
  margin-right: 20px;
}

.comment_answer_admin{
  float:left;
  width:94%;
  margin-top: 10px;
  padding: 10px 20px 10px 20px;
  background:#f4ecec;
  border-radius:3px;
}

.comment_avatar_admin{
  float:right;
  width:50px;
  height:50px;
  margin: 0px 0px 10px 25px;
  border: 3px solid #dca2a2;
  border-radius:3px;
}

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

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

Новый вид комментариев v.1.0 + Модер-панель для uCoz

startsmart — Fri, 08 Mar 2013 13:18:08 GMT

Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like".

Шаг 1 - Установим HTML:

Для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код:

Код

$USERNAME$

$NAME$

Гость

$DATE$ - $TIME$

Like | 0+$COMMENT_RATING$

№$NUMBER$

$MESSAGE$

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

Теперь нам надо прописать стили "css" что бы наш вид комментариев отображался коректно и стал симпатичным.

Код

/* Вид комментариев v.1
  ------------------------------------------*/

/* Выравнивание */
  div.left_block {float:left;}
  div.right_block {float:right;}

/* Кнопки комментировать, редактировать, удалить */
.otvet {
  background: url(/img/otvet.png);
  background-position: -0px -0px;
  width: 25px;
  height: 23px;
  cursor: pointer;
  border-right:1px solid #cad1db;
  }
.otvet:hover
  {
  background: url(/img/otvet.png);
  background-position: -0px -23px;
  width: 25px;
  height: 23px;
  cursor: pointer;
  }

.edit-com {
  background: url(/img/moder-panel.png);
  background-position: -0px -0px;
  width: 35px;
  height: 23px;
  cursor: pointer;
  border-left:1px solid #cad1db;
  }
.edit-com:hover
  {
  background: url(/img/moder-panel.png);
  background-position: -0px -23px;
  width: 35px;
  height: 23px;
  cursor: pointer;
  }

.delete-com {
  background: url(/img/moder-panel.png);
  background-position: -35px -0px;
  width: 35px;
  height: 23px;
  cursor: pointer;
  border-left:1px solid #cad1db;
  }
.delete-com:hover
  {
  background: url(/img/moder-panel.png);
  background-position: -35px -23px;
  width: 35px;
  height: 23px;
  cursor: pointer;
  }

/* Аватар */
.avatar_comment {
  width:50px;
  height:50px;
  padding:3px;
  background:#888888;
}

/* Закругление углов */
.wbr3 {
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

/* Контент */
.content-com {
  float:left;
  width:100%;
  position:relative;
  margin-bottom:15px
  }

.com_p {
  top:0;
  right:0;
  width:75px;
  position:absolute;
  background:url(/img/ugolok.png) no-repeat top left
}

.com_l {
  padding:0px 0;
  background:#fff;
  border:1px solid #cad1db;
  margin:0 74px 0 0;
  overflow:hidden
}

.com_v {
  height:23px;
  border-bottom:1px solid #cad3da
}

.com_v,.com_n {
  margin:0 0px 0 0px
}

.com_c {
  min-height: 39px;
  overflow:hidden;
  margin:5px 15px 7px 15px;
}

.com_c p {
  padding:10px;
  margin:10px 0;
  background:#ebfce8;
  overflow:hidden!important;
  border:1px solid #b4e5ac
}

/* Like */
.kcom_like:link,.kcom_like:visited {
  text-align:center;
  color:#fff;
  float:right;
  width:47px;
  background:#999999;
  margin-top:3px;
  padding:1px 3px 1px 3px;
  border:1px solid #666666
}

.kcom_like:hover {
  text-decoration: none;
  border:1px solid #666666!important;
  color:#375e15!important;
  text-shadow:1px 1px 1px #d7ffb6!important;
  background:#9aeb56!important
}

/* Черта возле кнопок */
.cherta-right {
  height:20px;
  border-right:1px solid #cad1db;
}

.cherta-left {
  height:19px;
  border-left:1px solid #cad1db;
}

/* Текст */
.text_r {
  text-align:right;
}

.text_9 {
  font:9px Verdana,Arial,Helvetica, sans-serif;
}

.grey {
  color:#b1b1b1;
}

.grey2 {
  color:#cac8c8;
}

.gren {color:#429e1e;
  font-weight:bold;
}

.right {
  float:right;
}
.left {
  float:left;
}

.top {
  padding: 4px 12px 0px 12px;
}

.top2 {
  padding: 5px 12px 0px 12px;
}

.bold {
  font-weight:bold;
}

.text_115 {
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;
}

Скачать архив: http://yadi.sk/d/UCCjw3Zv36kUX

На этом всё, это моя первая и не последня web разработка на center-dm, оценивайте и пользуйтесь, спасибо за внимание.

Радио в стиме mp3 плеера

startsmart — Fri, 08 Mar 2013 10:43:06 GMT

Хорошее радио с разными стилями музыки.
Поднимайте настрой вашим посетителям сайта.

Код

Палец вверх (поднятие страници)

startsmart — Fri, 08 Mar 2013 08:24:26 GMT

в самый вверх нижней части сайта:

Код

Форма поиска сайта с переключателем с yandex и google

startsmart — Mon, 04 Mar 2013 12:12:43 GMT

Форма поиска сайта совмещенная
Усовершенствованный код формы для поиска с возможностью ввести в поиск как на самом сайте так и проставив галочку в поисковых системах yandex.ru и google.com , пример показан на скрине.
Форма работает исправно, как на самом сайте так как она является стандартной , в поисковиках форма создает редирект на страницу поисковика

Установка:Вставляем в любое место сайта полный код самого поиска, настройки почти не требует если только размеры формы ввода для поиска

Код

http://site.ru/search/ заменяем на ссылку своего сайта или же на тег $HOME_PAGE_LINK$/search/ разницы абсолютно не какой
maxlength="30" количество символов которые разрешено вводить в форму
size="30" размер окна измеряется PX

Улучшаем функцию Кто Онлайн для uCoz

startsmart — Wed, 13 Feb 2013 11:02:12 GMT

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

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

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

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

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

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

Главная » Управление дизайном » Редактирование шаблонов

перед закрывающим тегом ставим скрипт.

Код

Шаг 3 - Установим HTML:

Теперь на страницу сайта устанавливаем следующий html каркас:

Код

  $ONLINE_COUNTER$

Онлайн

Кто был

$ONLINE_USERS_LIST$

Шаг 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;
}

Примечания:

В данном решении я использовал скрипт Табов и Кто сегодня был, к сожалению автор последнего скрипта мне неизвестен, но если вы знаете его, то сообщите мне об этом ниже в комментариях.

Незабываем активировать на сайте uCoz функцию "Кто Онлайн" в главных настройках Админ панели.

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

Перевод вашего сайта в один клик (8 стран)

startsmart — Wed, 13 Feb 2013 10:55:14 GMT

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

Код