samuray

Уникальная адаптация 3D вида комментариев на чистом CSS3

penoky — Sat, 07 Mar 2015 06:34:56 GMT

Уникальная адаптация 3D вида комментариев на чистом CSS3

Установка:

В самый низ вашего 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+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbN   yaHFmzEqgAAAABJRU5ErkJggg==);
}

.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

СКАЧАТЬ
tags-zB11Уникальная, адаптация, 3D, вида, комментариев, на, чистом, CSS3

Скрипт Неактивные комментарии

penoky — Sat, 07 Mar 2015 04:19:43 GMT

Скрипт Неактивные комментарии

Скрипт Неактивные комментарии by webo4ka.ru. Пользователь BALCETUL с вебочки в мини-чате написал про данный скрипт, вот я решил его сделать... Скрипт проверяет есть ли неактивные комментарии, и если они есть то, выскакивает ajax окошко в котором высвечиваются неактивные комментарии. Вы сможете отредактировать, удалить или промодерировать комментарий и сделать его активным.

Установка:

Куда вам надо, туда и вставляйте.

Код

готово!tags-zB11Скрипт, Неактивные, комментарии

Красивая верстка вида комментариев для ucoz сайтов

penoky — Sun, 08 Feb 2015 10:14:12 GMT

Красивая верстка вида комментариев для ucoz сайтов

Красивая верстка вида комментариев для ucoz сайтов с использованием CSS стилей

В материале представлено два кода, непосредственно с самим видом комментариев и с кодом CSS стилей

Что придает элегантность вида комментариев

В виде комментариев отображается аватар и дата комментариев

Установка вида комментариев на ucoz сайт.

Заходим : Панель управления дизайн » управление дизайном » комментарии » вид комментариев и вместо старого кода вставляем этот

Код

title="$USERNAME$"> class="com_wp"> title="$USERNAME$"> class="com_wp">

   удалить

id="triangle-left">

style="font-family:Tahoma;color:#797979;padding-left:7px;padding-right:7px;padding-top:4px;padding-bottom:7px">$TIME$

style="font-family:Tahoma;color:#595959;padding-left:7px;">$MESSAGE$

style="font-family:Tahoma;color:#797979;padding-left:7px;padding-right:7px;padding-top:4px;padding-bottom:7px">$TIME$

style="font-family:Tahoma;color:#595959;padding-left:7px;">$MESSAGE$

id="triangle-left1">

title="$USERNAME$"> class="com_wp"> title="$USERNAME$"> class="com_wp">

   удалить

Далее пропишем стили для вида комментариев

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

Код

.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;
   }

Новая форма добавление комментов + антифлуд системы для uCoz

penoky — Sun, 08 Feb 2015 07:29:31 GMT

Новая форма добавление комментов + антифлуд системы для uCoz

Новая форма добавление комментов + антифлуд!
Думаю понятно куда вставлять код:)

Код

Ваш комментарий

$ERROR$

tags-zB11Новая, форма, добавление, комментов, +, антифлуд, системы, для, uCoz

Вид комментариев для юкоз!

penoky — Sat, 07 Feb 2015 17:23:03 GMT

Вид комментариев для юкоз

Очень интересный вид комментариев для сайтов системы uCoz. Новый и интересный дизайн. Подойдет для любых шаблонов, и не нагружает сайт. Прост в установке, даже самые свежие пользователи системы uCoz смогут его установить. Можете менять цвет, добавлять что-либо свое, все, что вашей душе угодно. Очень интересный вид для сайтов системы uCoz.

Теперь к установке:

Первое, что Вам нужно сделать, — зайти в панель управление сайтом, Главная » Управление дизайном » Комментарии » Вид комментариев и вставляем код:

Код

   $USERNAME$$NAME$

$DATE$ $TIME$

$COMMENT_RATING$$COMMENT_RATING$+$COMMENT_RATING$ $MODER_PANEL$

* * $NUMBER$

$MESSAGE$

Ответ: $ANSWER$

[Ответить]

После этого настраиваем стили в таблице стилей CSS:

Код

.comment { float: right; clear: both; position: relative; width: 70%; padding: 15px; background: white; margin: 0 0 20px 0; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
.cBlock1 .comment{background:#ddeb84;}
.cBlock2 .comment{background:#F1F2F3;}
.comment-author { position: absolute; left: -210px; top: 0; }
.comment-author cite { display: block; margin-top: 0px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; font-style: normal; color: black;text-align:center;}
.comment-author cite a { color: black; border-bottom: 1px solid transparent; }
.cBlock1 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #ddeb84; }
.cBlock1 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #ddeb84; left: 60px; top: 30px; }
.cBlock2 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #F1F2F3; }
.cBlock2 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #F1F2F3; left: 60px; top: 30px; }
.comment-author .avatar img{ width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; }
.comment .comment-meta { position: absolute; left: -210px; top: 90px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; text-transform: uppercase; }

tags-zB11Вид, комментариев, для, юкоз!

Автообновление комментариев на uCoz сайт.

penoky — Fri, 30 Jan 2015 15:30:48 GMT

Автообновление комментариев на uCoz сайт

Отличная идея по поводу обновления комментариев была сегодня найдена у Ucoz. Кому интересно - смотрим и забираем себе. Скрипт прямо на любителя, на привереду какого-то, потому что имеет три варианта работы, это уже кому как больше нравится. У скрипта три режима: Автообновление, ручное обновление и быстрая проверка на новые комментарии с выводом ответа.

Ну, автообновление - это очень заманчиво. Пусть само все обновляется, а мы только радуемся, что кто-то пишет комментарии на наших сайтах. Вы, кстати, тоже пишите, потому что нам важно ваше мнение и как работает то, что вы вам тут презентуем. Если плохо работает - сообщайте, мы поправим. Ну а для блюстителей чистоты слога и вообще сути комментария - все ручные методы работы с обновлениями. Вперед, если хотите в ручную ,по старинке работать. Все для вас. Встраивается в код страницы просто - для комментариев - в самый низ, в виде материалов комментариев - в самый верх. Элементарно и очень приятно, потому что хорошо работает. Мне вот уже удалось попробовать эту программку на одном сайте и все остались довольны. Автор скрипта - Apocalypse.

Установка:

В Виде материалов комментариев в самый верх:

Код

Здесь же в виде материалов в самый низ:

Код

В форму добавления комментариев в самый низ:

Код

tags-zB11Автообновление, комментариев, на, uCoz, сайт.

Вид формы добавления комментариев как ВКонтакте для ucoz

penoky — Thu, 29 Jan 2015 13:15:13 GMT

Вид формы добавления комментариев как ВКонтакте для ucoz

Отличный вид комментариев для системы ucoz как ВКонтакте. При клике по полю добавления текста, надпись в нем пропадает и оно разворачивается.

Установка:этот код ставим в форму добавления комментариев

Код

onclick="$('#nomessage').toggle();$('#yesmessage').toggle();">Что у  <br /> Вас нового?



   name="message" id="message" cols="50">

Серый вид комментариев для uCoz

penoky — Thu, 29 Jan 2015 13:10:37 GMT

Серый вид комментариев для uCoz

Данный вид комментариев подойдет для сайтов со светлыми и среднесветлыми шаблонами.

Установка: этот код ставим заместо вашего в вид комментариев:

Код

valign="top">

class="imgload" style="cursor: pointer;" border="0"
width="50">
onmousedown="this.className='downBtn'"
onmouseover="this.className='overBtn'"
onmouseout="this.className='outBtn'" style="margin-top: 8px;" border="0"
  cellpadding="0" cellspacing="0">

> >Ответить

style="float: left;">$USERNAME$ | Комментарий №
$NUMBER$ | Дата:
$DATE$$MODER_PANEL$

$MESSAGE$

$ANSWER$

Новая красивая форма добавления комментариев для ucoz

penoky — Thu, 29 Jan 2015 13:08:48 GMT

Новая красивая форма добавления комментариев для ucoz

Установка скрипта проста: заходим Панель управления/управление дизайном/комментарии/форма добавления комментариев и вставляем этот код:

Код

$ERROR$

Имя:

id="name" value="$NAME$" style="width:140px; height:20px;
font-family:tahoma; font-size:11px; border:1px solid #E0E0E0
">

E-Mail:

value="$EMAIL$" style="width:140px; height:20px; font-family:tahoma;
font-size:11px; border:1px solid #E0E0E0 ">

WWW:

id="www" value="$SITE$" style="width:140px; height:20px;
font-family:tahoma; font-size:11px; border:1px solid #E0E0E0
">

$BBCODES$

    frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
scrolling="no" style="visibility:hidden; display: none; position:
absolute; left:15; top:149">

onclick="simpletag('b')">

onclick="openLayerB('Sml',0,'http://ваш сайт.ру/index/35-1-0','Полный
список смайлов',250,300);return false;" border="0">

Код:

$SECURITY_CODE$

Необычный вид комментариев для ucoz

penoky — Thu, 29 Jan 2015 13:06:25 GMT

Необычный вид комментариев для ucoz

Очень необычный вид комментариев для системы ucoz в светлых тонах. Также встроена функция Мне нравится.

Установка:данный код ставим в вид комментариев:

Код

color="#404040">$USERNAME$ $MODER_PANEL$			href="$GOOD_COMMENT_URL$"> id="ico$NUMBER$"> border="0" style="width: 15px; margin-bottom:-2px; margin-right:2px;" >$COMMENT_RATING$		src="http://www.iconsearch.ru/uploads/icons/minimal/64x64/go-home.png">
style="padding:10px;"> src="$USER_AVATAR_URL$" width="60px" style="padding:3px;background:#f7f7f7;border:1px solid #d3d3d3;"> src="http://mamka.do.am/noavatar_big.png" width="60px" style="padding:3px;background:#f7f7f7;border:1px solid #d3d3d3;">	$MESSAGE$