Создание и оформление сайтов ucoz,и не только...

Получить код кнопки или баннера

Bitfood — Sat, 25 Jan 2014 14:43:54 GMT

Скрипт для ucoz - Получить код кнопки или баннера
Необходимый скрипт практически для любого сайта ucoz ведь именно Ваши посетители в знак признательности смогут воспользоваться этим скриптом и установить кнопку или же баннер на страницах уже своего сайта, (пояснять важность этого действия я думаю не стоит) или же поможет в обычном баннерообмене

Установка:
Все предельно просто код скрипта ucoz следует разместить желательно в отдельном блоке и заполнить исходя из данных своего сайта

Код

Вид информера онлайн кинотеатра

Bitfood — Sat, 25 Jan 2014 14:43:14 GMT

Если вы владелец онлайн кинотеатра в системе uCoz, и пользуетесь информерами, то статья именно для вас.
Стандартный вид информеров не то, что поможет привлечь потенциальных зрителей, а скорее отпугнет. Во-первых, из-за того, что заходят в кинотеатр, все должно быть наглядно. Изначально информер выглядит как простой текст (название), с датой добавления, и автором, все. Мало, кто захочет читать. Поэтому для информеров такого типа нужна как минимум картинка. Это не обязательно может быть информер фильмов. Да, уже нормально, но фильмы имеют названия разной длины, потому все картинки смещаются, какие-то выше, какие-то ниже, в общем, весь вид портится.

Я предлагаю сделать надписи прямо на картинке, при этом красиво это все оформив.

Итак, начнем.

Для начала, вставим этот код в шаблон информера.

Код

$TITLE$

После чего, в CSS вставляем данные стили.

Код

.img_title {
word-wrap: break-word;
text-indent: 0px;
font-size: 13px;
color: #376d9c;
font-weight: bold; font-family: Arial Narrow, sans-serif;
background: #ffffff;
height: 40px;
vertical-align:middle;
width: 162px;
left: 20px;
text-align: center;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.image {
position: relative;
width : 100%;
}
h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}

Это придаст нашему блоку с названием тень, а тексту стиль.

height: 40px - можно убрать, чтобы блок сам увеличивался или уменьшался в зависимости от длины заголовка. Или оставить, если хотите, чтобы блоки были одинаковые (при этом если надпись длиннее оставленной высоты (места), то она будет вылезать за рамки).

Код

h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}
.image {
position: relative;
width : 100%; /* for IE 6 */
}

Кот на сайт для uCoz

Bitfood — Sat, 25 Jan 2014 14:42:23 GMT

Появление персонажей на сайте – не редкость, особенно популярно украшать сайты кошками, которые следят за перемещением курсора, а некоторые даже пытаются поймать курсор. Был у нас и такой. Этого кота можно установить на любой сайт, сделанном на uCoz. Он будет скромно наблюдать за действиями пользователей на сайте. Когда пользователь наведет курсор на кота, он будет застенчиво улыбаться и смотреть вверх.
Установка

Вставьте в Нижнюю часть сайта или в любой другой глобальный блок:

Код

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

Код

#cat {
  position: fixed;
  right: 80px;
  bottom: 0;
  width: 146px;
  height: 55px;
}
#cat:hover .cat-itself {
  height: 103px;
}
#cat:hover .cat-eye {
  display: none !important;
}
.cat-paws {
  position: absolute;
  right: 0;
  bottom: -4px;
  width: 132px;
  height: 33px;
  z-index: 2;
  background: url(http://pnghosts.ru/img/cat-paws.png) no-repeat right bottom;
}
.cat-itself-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.cat-itself {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 125px;
  height: 55px;
  z-index: 0;
  background: url(http://pnghosts.ru/img/cat-itself.png) no-repeat;
  -webkit-transition: all 0.1s 0.1s ease-out;
  transition: all 0.1s 0.1s ease-out;
}
.cat-eye {
  position: absolute;
  display: none;
  width: 28px;
  height: 28px;
  background: url(http://pnghosts.ru/img/cat-eye.png);
}
.cat-eyeball {
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 13px;
  height: 13px;
  background: url(http://pnghosts.ru/img/cat-eyeball.png);
}
#cat-eye-left {
  left: 25px;
  top: 23px;
}
#cat-eye-right {
  left: 74px;
  top: 26px;
}

Скрипт радио для вашего сайта

Bitfood — Tue, 21 Jan 2014 08:26:37 GMT

В этом виджете радио размещено шесть радиостанций.
Виджет имеет простй функщионал со списком популярных радио.
Наименование радио: Наше радио; Радио Nrj; Kiss FM; Юмор Fm; Радио Рекорд; Kazantip FM

Код

www.radiobells.com #radiobells_script_hash

Кнопка вверх и вниз

Bitfood — Tue, 21 Jan 2014 08:26:26 GMT

Срипт для быстрого и плавного поднятия страници вверх, также можно опускать и вниз страницу сайта.
Выполнен в стиле пальца вверх и вниз, светло синий цет
Установка не сложная и не требует допполнителных навыков html

Установка скрипта „Кнопка вверх и вниз“

Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код

Выдвижной мини-профиль

Bitfood — Tue, 21 Jan 2014 08:26:14 GMT

В этом топике мы будем устанавливать красивый выдвижной мини-профиль который вовсе не занимает место на сайте. Помимо функциональности, выдвижной мини-профиль добавит вашему сайту юзабилити, пользователям будет проще обращаться к основным функциям\ссылкам сайта касающиеся управления аккаунтом и не только.

Вы так же можете изменять, добавлять: новые ссылки, иконки, расцветку выдвижного мини профиля. Я вам подробно распишу где, что и как изменить, а так же представлю 2 уже готовых цветовых решений (светлый, темный).

Установка
1. Установите HTML код на всех страницах сайта, рекомендую в нижнюю часть сайта.

Код

$USER_AVATAR_URL$http://pnghosts.ru/img/1275.jpg">Мой профиль

Сообщения $UNREAD_PM$

Изменить данные

Выйти с сайта

Мой профиль

2. В таблицу стилей (CSS) вставьте один из предложенных стилей.

Темный (Основной)

Код

.uwaid_panel {position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;}
  .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; }
  .uwaid_panel a:hover { text-decoration:none;}
  .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; }
  .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;}
  .uwaid_icon {background:url('http://pnghosts.ru/img/18148035.png');}
  .settings {background-position-y: -40px;}
  .exit {background-position-y: -80px;}
  .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;}
  .my_profile:hover {cursor:pointer;}
  .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;}
  .close_p:hover {cursor:pointer;}
  /* Цветовые стили */
  .uwaid_panel {border:7px solid #33373b;border-bottom:6px solid #33373b;border-left:none; }
  .uwaid_panel a {background: #272a2d; border-left:7px solid #33373b;color: #fff;}
  .uwaid_panel a:hover {background:#232629;border-left:7px solid #e05b5b;}
  .uwaid_panel a span {background: #e05b5b;}
  .my_profile {border:7px solid #33373b;background: #272a2d;color:#fff;}
  .my_profile:hover {background:#454B50;}
  .close_p {background: #e05b5b;color: #fff;}
  .close_p:hover {background:#F87676;}

Светлый

Код

.uwaid_panel { position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;}
  .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; }
  .uwaid_panel a:hover {text-decoration:none;}
  .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; }
  .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;}
  .uwaid_icon {background:url('http://pnghosts.ru/img/18148035.png');}
  .settings {background-position-y: -40px;}
  .exit {background-position-y: -80px;}
  .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;}
  .my_profile:hover {cursor:pointer;}
  .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;}
  .close_p:hover {cursor:pointer;}
  /* Цветовые стили */
  .uwaid_panel {border: 7px solid #C4C6C7;border-bottom: 6px solid #C4C6C7;border-left:none;}
  .uwaid_panel a {background: #E4E4E4;border-left: 7px solid #C4C6C7;color:#555353;text-shadow: 0 1px 0 #fff;}
  .uwaid_panel a:hover {background: #A2A2A2;border-left: 7px solid #807C7C;text-shadow:0 1px 0 #BDBDBD;}
  .uwaid_panel a span {background: #C7C7C7;}
  .my_profile {background:#E4E4E4;border: 7px solid #C4C6C7;color:#555353;}
  .my_profile:hover {background:#DAD7D7; border: 7px solid #807C7C;}
  .close_p {background: #C7C7C7;color: #fff;}
  .close_p:hover {background: #A2A2A2;}

Настройка цветов
Для удобства все стили отвечающие за цветовую схему выдвижного мини-профиля вынесены в отдельные селекторы. После "/* Цветовые стили */".
.uwaid_panel — Основной стиль панели.
.uwaid_panel a — Стили ссылки в обычном состоянии.
.uwaid_panel a:hover — Стили ссылки при наведении.
.uwaid_panel a span — Стили количества сообщений.
.my_profile — Стили кнопки вызова панели.
.close_p — Стили кнопки закрытия панели.

Основываясь на этом можно изменять цвета:
border — Обводка
background — Фон
color — Цвет текста

Всплывающий мини-чат скрипт для uCoz

Bitfood — Tue, 21 Jan 2014 08:25:57 GMT

Мини-чат скрипт для uCoz, который установить можно за 1 минуту, так же этот скрипт подойдёт на любой сайт с любой тематикой и впишется в любой, даже самый капризный дизайн! Что делает скрипт? Он устанавливает мини чат в самый низ в правую сторону сайта и при нажатие на картинку ЧАТ , появится окошки с чатом! Теперь пользователи могут общаться там, но в тоже время он не будет мoзолить глаза тем, кому он вовсе не нужен. Устанавливаем:

Установка:

#1 заходим на сайт и в админ панель
#2 Открываем Дизайн - Управление Дизайном Сайта
#3 Переходим в GLOBAL_BFOOTER или просто Нижнюю часть сайта
#4 Устанавливаем код в самый низ сайта и ГОТОВО!

Код

$CHAT_BOX$

Кнопки вверх для сайта

Bitfood — Wed, 01 Jan 2014 13:09:33 GMT

Как правильно установить кнопку "Вверх на свой сайт?

Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Кнопка в стиле minecraft

скрин:

Код

Кнопка в стиле Butterfly

Расположение кнопрки "вверх" в левом нижнем углу.

Код

Кнопка в стиле парашюта - Вознестись к небесам

Код

Уникальный вид коментариев для Ucoz в стиле 3D

Bitfood — Tue, 31 Dec 2013 14:50:24 GMT

Уникальный вид комментариев выполнен в стиле 3D, отлично смотрится на любом дизайне. Вид комментариев полностью рабочий, отображается во всех браузерах одинаково и установка не займет у Вас много времени. Автор постарался на славу. Предлагаю посмотреть видео обзор этого вида комментариев для ucoz

Установка:

В самый низ вашего css вставляйте:

Код

/*--ubutton-fix--*/
  .myBtnLeft img, .myBtnRight img, .myBtnLeftA img, .myBtnRightA img, .myBtnRight + td input, .myBtnRightA + td input { display: block }
  .myBtnCenter, .myBtnCenterA { line-height:19px !important }
  .myBtnCont { height:19px; padding-bottom:0 !important }

  @font-face {
  font-family: 'fontawesome-selected';
  src: url("/css/fontawesome-selected.eot");
  src:
  url("/css/fontawesome-selected.eot?#iefix") format('embedded-opentype'),
  url("/css/fontawesome-selected.woff") format('woff'),
  url("/css/fontawesome-selected.ttf") format('truetype'),
  url("/css/fontawesome-selected.svg#fontawesome-selected") format('svg');
  font-weight: normal;
  font-style: normal;
  }

  .timeline {
  position: relative;
  list-style-type: none;
  padding: 30px 0 50px 0;
  font-family: 'Gorditas', Arial, sans-serif;
  width:650px;
  background:#ddd
  }

  .timeline:before {
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  left: 165px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
  color:#aaa
  }

  .event {
  position: relative;
  margin-bottom: 80px;
  padding-right: 40px;
  }

  .thumb {
  position: absolute;
  width: 100px;
  height: 100px;
  box-shadow:
  0 0 0 8px rgba(65,131,142,1),
  0 1px 1px rgba(255,255,255,0.5);
  background-repeat: no-repeat;
  border-radius: 50%;
  -webkit-transform: scale(0.8) translateX(24px);
  -moz-transform: scale(0.8) translateX(24px);
  -o-transform: scale(0.8) translateX(24px);
  -ms-transform: scale(0.8) translateX(24px);
  transform: scale(0.8) translateX(24px);
  }

  .thumb:before {
  content: '';
  position: absolute;
  height: 8px;
  z-index: -1;
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);
  width: 51px;
  top: 42px;
  left: 100%;
  margin-left: 8px;
  }

  .thumb span {
  color: #41838e;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  position: absolute;
  bottom: -30px;
  }

  /* Transparent Checkbox/radio hack: leave the checkbox on top, hide it with opacity 0 */

  .event label,
  .event input[type="radio"] {
  width: 24px;
  height: 24px;
  left: 158px;
  top: 36px;
  position: absolute;
  display: block;
  }

  .event input[type="radio"] {
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  }

  .event label:after {
  font-family: 'fontawesome-selected';
  content: '\e702';
  background: #fff;
  border-radius: 50%;
  color: #41838E;
  font-size: 26px;
  height: 100%;
  width: 100%;
  left: -2px;
  top: -3px;
  line-height: 24px;
  position: absolute;
  text-align: center;
  }

  .content-perspective {
  margin-left: 230px;
  position: relative;

  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -o-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  }

  .content-perspective:before {
  content: '';
  width: 37px;
  left: -51px;
  top: 45px;
  position: absolute;
  height: 1px;
  z-index: -1;
  background: #fff;
  }

  .content {
  -webkit-transform: rotateY(10deg);
  -moz-transform: rotateY(10deg);
  -o-transform: rotateY(10deg);
  -ms-transform: rotateY(10deg);
  transform: rotateY(10deg);

  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  }

  .content-inner {
  position: relative;
  padding: 20px;
  color: #333;
  border: none;
  border-left: 5px solid #41838e;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  background: #fff;
  }

  .content-inner h3 {
  font-size: 26px;
  padding: 5px 0 5px 0;
  color: #41838e;
  }

  .content-inner p {
  font-size: 18px;
  overflow: hidden;
  color: transparent;
  color: #777;
  text-align: left;
  }

  .content-inner:before {
  font-family: 'fontawesome-selected';
  content: '\25c2';
  font-weight: normal;
  font-size: 54px;
  line-height: 54px;
  position: absolute;
  width: 30px;
  height: 30px;
  color: #41838e;
  left: -22px;
  top: 19px;
  z-index: -1;
  }

  /* Transitions */

  .thumb,
  .thumb span,
  .content-inner h3 {
  -webkit-transition: all 0.6s ease-in-out 0.2s;
  -moz-transition: all 0.6s ease-in-out 0.2s;
  -o-transition: all 0.6s ease-in-out 0.2s;
  -ms-transition: all 0.6s ease-in-out 0.2s;
  transition: all 0.6s ease-in-out 0.2s;
  }

  .content-inner {
  -webkit-transition: box-shadow 0.8s linear 0.2s;
  -moz-transition: box-shadow 0.8s linear 0.2s;
  -o-transition: box-shadow 0.8s linear 0.2s;
  -ms-transition: box-shadow 0.8s linear 0.2s;
  transition: box-shadow 0.8s linear 0.2s;
  }

  .content {
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
  -moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
  -o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
  -ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
  transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
  }

  .content-inner p {
  -webkit-transition: max-height 0.5s linear, color 0.3s linear;
  -moz-transition: max-height 0.5s linear, color 0.3s linear;
  -o-transition: max-height 0.5s linear, color 0.3s linear;
  -ms-transition: max-height 0.5s linear, color 0.3s linear;
  transition: max-height 0.5s linear, color 0.3s linear;
  }

  /* Checked */

  .event input[type="radio"]:checked + label:after {
  content: '\2714';
  color: #F26328;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);
  }

  .event input[type="radio"]:checked ~ .content-perspective:before {
  background: #F26328;
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {
  color: #F26328;
  }

  .event input[type="radio"]:checked ~ .content-perspective .content {
  -webkit-transform: rotateY(-5deg);
  -moz-transform: rotateY(-5deg);
  -o-transform: rotateY(-5deg);
  -ms-transform: rotateY(-5deg);
  transform: rotateY(-5deg);
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner {
  border-color: #F26328;
  box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
  max-height: 260px; /* Add media queries */
  color: rgba(0,0,0,0.6);
  -webkit-transition-delay: 0s, 0.6s;
  -moz-transition-delay: 0s, 0.6s;
  -o-transition-delay: 0s, 0.6s;
  -ms-transition-delay: 0s, 0.6s;
  transition-delay: 0s, 0.6s;
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner:before {
  color: #F26328;
  }

  .event input[type="radio"]:checked ~ .thumb {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  box-shadow:
  0 0 0 8px rgba(242,99,40,1),
  0 1px 1px rgba(255,255,255,0.5);
  }

  .event input[type="radio"]:checked ~ .thumb span {
  color: #F26328;
  }

  .event input[type="radio"]:checked ~ .thumb:before {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);
  }

  .content-inner p,
  .thumb span,
  .event label {
  -webkit-backface-visibility: hidden;
  }

  @media screen and (max-width: 850px) {
  .content-inner h3 {
  font-size: 20px;
  }

  .content-inner p {
  font-size: 14px;
  text-align: justify;
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
  max-height: 500px;
  }
  }

  @media screen and (max-width: 540px) {
  .timeline::before {
  left: 50px;
  }

  .event {
  padding-right: 0px;
  margin-bottom: 100px;
  }

  .thumb {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  }

  .event input[type="radio"] {
  width: 100px;
  height: 100px;
  left: 0px;
  top: 0px;
  }

  .thumb:before,
  .event input[type="radio"]:checked ~ .thumb:before {
  background: none;
  width: 0;
  }

  .event label {
  display: none;
  }

  .content-perspective {
  margin-left: 0px;
  top: 80px;
  }

  .content-perspective:before {
  height: 0px;
  }

  .content {
  -webkit-transform: rotateX(-10deg);
  -moz-transform: rotateX(-10deg);
  -o-transform: rotateX(-10deg);
  -ms-transform: rotateX(-10deg);
  transform: rotateX(-10deg);
  }

  .event input[type="radio"]:checked .content-perspective .content {
  -webkit-transform: rotateX(10deg);
  -moz-transform: rotateX(10deg);
  -o-transform: rotateX(10deg);
  -ms-transform: rotateX(10deg);
  transform: rotateX(10deg);
  }

  .content-inner {
  border-left: none;
  border-top: 5px solid #41838e;
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner {
  border-color: #F26328;
  box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);
  }

  .content-inner:before {
  content: '\25b4';
  left: 33px;
  top: -32px;
  }

  .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
  max-height: 300px;
  }
  }

На странице материала и комментариев к нему в нужном вам модуле замените $COM_BODY$ на:

Код

Далее в виде материалов комментариев замените всё на:

Код

$DATE$

$USERNAME$ » Ответить $MODER_PANEL$

$ANSWER$$MESSAGE$

Картинку из прикреплённого архива залейте в папку img, пять файлов шрифта залейте в папку css

Скачать с Яндекс.Диск

Кнопка вверх

Bitfood — Sun, 29 Dec 2013 12:44:13 GMT

Как правильно установить кнопку "Вверх?

Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код