| Pasan
не в сети | 0:42 AM 2024-09-25 | Сообщение # 1 |
 Админ
Администраторы
|
Вид комментариев для модулей системы uCoz
Описание:
Удобный вид комментариев для ucoz. Очень хороший дизайн. Подойдет под любой сайт и не будет нагружать страницу сайта. Проблем с установкой не возникнут, так как дизайн простой и есть четкая инструкция - ниже. Можете поменять цвет или что нибудь добавить свое, все делается в таблице CSS стилей. Как по мне "вид комментариев" и так выглядит - отлично.
Внимание:
Здесь и далее подразумевается, что установка будет производиться в стандартный шаблон системы uCoz, не подвергавшийся изменениям со стороны пользователя. В противном случае, не гарантируется корректное отображение вида комментариев.
Установка:
1. В шапку страницы сайта, на которой будут выводиться комментарии, подключите следующее:
Код <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
2. В файл стилей CSS своего сайта добавьте следующие стили оформления для комментариев:
Код .uc .uc1 {
color: #666!important;
font-family: Arial;
font-kerning: auto;
font-style: normal;
font-size: 1.2em;
font-weight: 400;
text-decoration: none;
text-transform: none;
word-spacing: 0;
border-bottom: 1px solid #e7eaec;
}
.uc1 {
margin-top: 15px!important;
}
.uc1:first-child {
margin-top: 0;
}
.uc1 {
padding-bottom: 15px;
}
.uc1,
.uc4 {
overflow: hidden;
}
.uc1 > .uc2 {
margin-right: 10px;
}
.uc1 img.uc3 {
width: 50px;
height: 50px;
}
.uc1 .uc8 {
box-shadow: none;
margin-top: 10px;
margin-bottom: 5px;
padding: 10px 20px;
line-height: 16px;
}
.uc1 .uc9 {
margin-top: 10px;
}
.uc1 .photos {
margin: 10px 0;
}
.uc3 {
border-radius: 50%;
}
.uc4 {
display: block;
width: auto;
}
.uc5 {
float: right!important
}
.uc2 {
float: left!important
}
.uc15 {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
}
.uc15 {
clear: both;
}
.uc18 h5 {
margin-top: 5px;
}
.uc18 {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 3px 0 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
min-height: 48px;
}
.uc18 h5 {
color:#666;
display: inline-block;
font-family: Arial;
font-kerning: auto;
font-style: normal;
font-size:14px;
margin: 0 0 7px;
padding: 0;
text-overflow: ellipsis;
float: left;
}
.uc18 .uc20{
float: left;
margin-left: 4px;
}
.uc19 {
display: block;
float: none;
margin-top: 0;
position: relative;
padding: 0;
text-align: right;
}
.uc20 {
background-color: #d1dade;
color: #5e5e5e;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
text-shadow: none;
}
.uc21 {
background-color: #f8ac59;
color: #ffffff;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
text-shadow: none;
border-radius: .25em
}
.uc16 {
clear: both;
margin-bottom: 25px;
margin-top: 0;
padding: 0;
}
.uc16:after,
.uc16:before {
display: table;
}
.uc17 {
margin-bottom: 5px;
}
.uc6 {
color: #1ab394;
}
.uc7 {
color: #888888;
}
.uc8 {position:relative;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #fcfcfc;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05)
}
.uc8:after {content: '';
position: absolute;left: 5px; top: -10px;
border: 5px solid transparent; border-bottom: 5px solid #e3e3e3;
}
.report-spam-toggle-text {font-size: 14px;
font-weight: 600;}
.report-spam-toggle-text:before {color:#18a689;font-family: FontAwesome;padding-right: 7px;content: "\f00c";}
.report-spam-toggle-button {
border-radius: 3px;text-decoration:none!important;
}
.report-spam-toggle-button {
display: inline-block;
padding: 3px 12px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.7;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px
}
.report-spam-toggle-button:active:focus,
.report-spam-toggle-button:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.report-spam-toggle-button:focus,
.report-spam-toggle-button:hover {
color: #333;
text-decoration: none
}
.report-spam-toggle-button:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.report-spam-btn {text-decoration:none!important;
border-radius: 3px;
}
.report-spam-btn {
display: inline-block;
padding: 3px 12px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.7;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px
}
.report-spam-btn:active:focus,
.report-spam-btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.report-spam-btn:focus,
.report-spam-btn:hover {
color: #333;
text-decoration: none
}
.report-spam-btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.report-spam-handled {
color: inherit;
background: white;
border: 1px solid #e7eaec;
}
.report-spam-handled:hover,
.report-spam-handled:focus,
.report-spam-handled:active,
.report-spam-handled:active:focus,
.report-spam-handled:active:hover
{
color: inherit;
border: 1px solid #d2d2d2;
}
.report-spam-handled:active {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.report-spam-handled:active {
background-image: none;
}
.uc10 {
border-radius: 3px;text-decoration:none!important;
}
.uc10 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px
}
.uc10:active:focus,
.uc10:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.uc10:focus,
.uc10:hover {
color: #333;
text-decoration: none
}
.uc10:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.uc11 {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.uc12 {
color: inherit;
background: white;
border: 1px solid #e7eaec;
}
.uc12:hover,
.uc12:focus,
.uc12:active,
.uc12:active:focus,
.uc12:active:hover
{
color: inherit;
border: 1px solid #d2d2d2;
}
.uc12:active {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.uc12:active {
background-image: none;
}
.uc14 {
color: inherit;
background: white;
border: 1px solid #e7eaec;
}
.uc14:hover,
.uc14:focus,
.uc14:active,
.uc14:active:focus,
.uc14:active:hover
{
background-color: #ec4758;
border-color: #ec4758;
color: #FFFFFF!important;
}
.uc14:active {
background-image: none;
}
.uc13 {
color: inherit;
background: white;
border: 1px solid #e7eaec;
}
.uc13:hover,
.uc13:focus,
.uc13:active
.uc13:active:focus,
.uc13:active:hover {
background-color: #18a689;
border-color: #18a689;
color: #FFFFFF!important;
}
.uc13:active {
background-image: none;
}
a.uc10 {text-decoration:none;}
.com-order-title {color: #666!important;
font-family: Arial;
font-kerning: auto;
font-style: normal; font-size:12px;font-weight:400;
line-height:1.42857143;
color:#555;}
.com-order-select{
width:30%;
height:34px;
padding:6px 12px;
font-size:12px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.com-order-select:focus{
border-color:#66afe9;
outline:0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
.com-order-select::-moz-placeholder{color:#999;opacity:1}
.com-order-select:-ms-input-placeholder{color:#999}
.com-order-select::-webkit-input-placeholder{color:#999}
.com-order-select::-ms-expand{background-color:transparent;border:0}
3. В шаблоне "Вид комментариев" весь код замените на этот:
Код <div class="uc1"> <?if($USERNAME$)?> <a itemprop="author" itemscope itemtype="http://schema.org/Person" href="$PROFILE_URL$" class="uc2"> <?if($USER_AVATAR_URL$)?><img alt="Аватар" class="uc3" src="$USER_AVATAR_URL$"><?endif?><?if($SOC_TYPE$)?><img style="margin-left:-16px;" src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?></a> <?else?> <?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="http://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc2"> <?if($USER_AVATAR_URL$)?><img alt="Аватар" class="uc3" src="$USER_AVATAR_URL$"><?else?> <img src="/.s/img/icon/social/noavatar.png" alt="Аватар" /><?endif?></a> <?else?> <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">$NAME$</span></span> <?endif?> <?endif?> <div class="uc4"> <small class="uc5 uc6"><?if($COMMENT_RATING$ > 0)?> <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><span itemprop="ratingValue"><i class="fa fa-heart-o" aria-hidden="true"></i> $COMMENT_RATING$</span> </span> <?else?><i class="fa fa-heart-o" aria-hidden="true"></i> $COMMENT_RATING$<?endif?></small> <strong> <?if($USERNAME$)?>$USERNAME$<?else?><?if($SOC_LINK$)?>$NAME$<?else?>$NAME$<?endif?><?endif?></strong><br> <small class="uc7">В $TIME$, $DATE$ оставил(а) комментарий:</small> <div class="uc8">$MESSAGE$ <?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?> </div> <div class="uc9"> <?if($GOOD_COMMENT_URL$)?> <a href="$GOOD_COMMENT_URL$" class="uc10 uc11 uc12 uc13"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Нравится </a> <a href="$BAD_COMMENT_URL$" class="uc10 uc11 uc12 uc14"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> Нет </a> <?else?> <a class="uc10 uc11 uc12 uc13"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Нравится </a> <a class="uc10 uc11 uc12 uc14"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> Нет </a> <?endif?> <?if($ANSWER_URL$)?><a href="$ANSWER_URL$" class="uc10 uc11 uc12 uc5">Ответить</a><?endif?> <?if($MODER_PANEL$)?>$MODER_PANEL_RIGHT$<?endif?> </div> </div> </div>
4. В шаблоне "Страница материала и комментариев к нему" вместо строки:
Код <tr><td colspan="2">$COM_BODY$</td></tr>
вставьте следующее:
Код <tr><td colspan="2"><div class="uc16 uc17"> <div class="uc18"> <h5>Обсуждение материала:</h5> <div class="uc19"> <span class="uc20 uc21 uc5">Комментариев: $COM_NUM_ENTRIES$</span> </div> </div> <div class="uc15"><div> <div class="uc">$COM_BODY$</div></div></div></div></td></tr>
|
|
| |
