Выделяем не просмотренные темы стикером.

Выделяем не просмотренные темы стикером.

Выделяем не просмотренные темы стикером.
Обзор Обсуждение
baltun

baltun

Администратор
Сообщения
12.285
Реакции
3.082
Баллы
1.833
Пользователь xsasha разместил новый ресурс:

Выделяем не просмотренные темы стикером. - Выделяем не просмотренные темы стикером.

Выделяем не просмотренные темы стикером, добавив код в шаблон EXTRA.CSS
HTML: 
.nodeInfo.unread .nodeTitle a::after {
    content: "NEW";
    display: inline-block;
    line-height: 14px;
    height: 14px;
    vertical-align: 2px;
    margin-left: 5px;
    padding: 0 5px;
    border-left: 10px solid rgb(0, 0, 0);
    border-left: 10px solid rgba(0, 0, 0, 0);
    _border-left: 10px solid rgb(0, 0, 0);
    border-radius: 2px;
    background-color: hsla(0,0%,0%,0);
    background-image:...
Нажмите, чтобы раскрыть...

Узнать больше об этом ресурсе...
 
Привет, а не подскажешь как так же выделить новые сообщения в темах :blush2:
FastStoneEditor1.png
 
Последнее редактирование:
Ты имеешь ввиду этот значок:
sdvdsv.jpg
 
нет, что бы значок новое и в темы вставить где есть новые сообщения , а не только в разделах форума
FastStoneEditor1.png
 
Код будет такой, но есть ньюанс при посещении ссылки не какой класс не дописывается к ссылке и код такой будет висеть не изменно просмотрел ты ссылку или нет не важно.
HTML: 
.discussionListItems .discussionListItem.visible .listBlock .title a.PreviewTooltip::after {
    content: "Новое";
    display: inline-block;
    line-height: 14px;
    height: 14px;
    vertical-align: 2px;
    margin-left: 5px;
    padding: 0 5px;
    border-left: 10px solid rgb(0, 0, 0);
    border-left: 10px solid rgba(0, 0, 0, 0);
    _border-left: 10px solid rgb(0, 0, 0);
    border-radius: 2px;
    background-color: hsla(0,0%,0%,0);
    background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(- 45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-clip: padding-box, border-box, border-box;
    background-origin: padding-box, border-box, border-box;
    background-size: auto auto, 20px 100%, 20px 100%;
    background-repeat: repeat, repeat-y, repeat-y;
    background-position: 0 0, 0 21px, 0 21px;
    color: #FFF;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
 
то есть просмотрев сообщение стикер НОВОЕ не исчезнет, я правильно понял ?
 
Верно, для тем на главной странице дописывается класс "unread"
 
а я делал вот так и стикер после прочтения пропадает , но сам стикер съехавший получается, как то не красиво вот и хотел что бы вы мне подсказали как поправить
2017-03-03_103909.png
Код: 
.forum_view .unread .titleText:after {
    content: "Новое";
    display: inline-block;
    line-height: 14px;
    height: 14px;
    vertical-align: 2px;
    margin-left: 5px;
    padding: 0 5px;
    border-left: 10px solid rgb(0, 0, 0);
    border-left: 10px solid rgba(0, 0, 0, 0);
    _border-left: 10px solid rgb(0, 0, 0);
    border-radius: 2px;
    background-color: hsla(0,0%,0%,0);
    background-image: -webkit-linear-gradient(#ff950c, #ff950c), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #ff950c 50.5%), -webkit-linear-gradient(- 45deg, rgba(0, 0, 0, 0) 50.5%, #ff950c 50.5%);
    background-image: -moz-linear-gradient(#ff950c, #ff950c), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #ff950c 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #ff950c 50.5%);
    background-image: linear-gradient(#ff950c, #ff950c), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #ff950c 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #ff950c 50.5%);
    background-clip: padding-box, border-box, border-box;
    background-origin: padding-box, border-box, border-box;
    background-size: auto auto, 20px 100%, 20px 100%;
    background-repeat: repeat, repeat-y, repeat-y;
    background-position: 0 0, 0 21px, 0 21px;
    color: #fff;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
 
Судя по скриншотам у тебя стоит плагин, который выводит фрагмент из сообщения и видимо он же дописывает класс поэтому так все проявляется у тебя, на стандартном форуме такого нет. Не плохо было бы с твоей стороны уточнить какой используешь плагин, чтобы другие тоже знали когда будет срабатывать CSS.
 
Вот какие плагины у меня стоят
1FastStoneEditor1.png
а как же можно всё таки поправить стикер, что бы напротив названия темы стоял ?
 
Нужно видеть сам форум чтобы посмотреть как все формируется у тебя, чтобы написать css. Напиши в ЛС посмотрю.
 
сделал вот так и стикер стал пропадать после прочтения сообщения в теме, и выровнялся как я и хотел, огромнейшее спасибо что направили в нужном направлении
2017-03-03_110659.png
Код: 
.forum_view .unread .titleText a.PreviewTooltip::after {
    content: "Новое";
    display: inline-block;
    line-height: 14px;
    height: 14px;
    vertical-align: 2px;
    margin-left: 5px;
    padding: 0 5px;
    border-left: 10px solid rgb(0, 0, 0);
    border-left: 10px solid rgba(0, 0, 0, 0);
    _border-left: 10px solid rgb(0, 0, 0);
    border-radius: 2px;
    background-color: hsla(0,0%,0%,0);
    background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(- 45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-clip: padding-box, border-box, border-box;
    background-origin: padding-box, border-box, border-box;
    background-size: auto auto, 20px 100%, 20px 100%;
    background-repeat: repeat, repeat-y, repeat-y;
    background-position: 0 0, 0 21px, 0 21px;
    color: #FFF;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
 
Еще можно изменять цвет посещенным ссылкам так:
Код: 
.discussionListItems .discussionListItem.visible .listBlock .title a.PreviewTooltip:visited {
    color: #6696B8;
}
Пример работы этого кода можно видеть в менеджере ресурсов.
 
а если добавить этот код в шаблон forum_list в самый верх , то на главной стикеры не будут видны гостям
Код: 
<xen:if is="{xen:helper ismemberof, $visitor, 1}">
<style>
.nodeInfo.unread .nodeTitle a::after {display: none;}
</style>
</xen:if>
 
А можно сделать так еще, был класс
Код: 
.nodeInfo.primaryContent.unread .nodeTitle a::after

Стал
Код: 
.nodeInfo.primaryContent .nodeTitle a::after
И гости тоже не должны будут видеть стикеры. При этом можно для гостей сделать надпись на стикере одну, а для пользователей другую.
 
Последнее редактирование:
Все вставляется в EXTRA.CSS пример кода:
Это видит гость:
Код: 
.nodeInfo.primaryContent.unread .nodeTitle a::after {
    content: "Я гость";
    display: inline-block;
    line-height: 14px;
    height: 14px;
    vertical-align: 2px;
    margin-left: 5px;
    padding: 0 5px;
    border-left: 10px solid rgb(0, 0, 0);
    border-left: 10px solid rgba(0, 0, 0, 0);
    _border-left: 10px solid rgb(0, 0, 0);
    border-radius: 2px;
    background-color: hsla(0,0%,0%,0);
    background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(- 45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-clip: padding-box, border-box, border-box;
    background-origin: padding-box, border-box, border-box;
    background-size: auto auto, 20px 100%, 20px 100%;
    background-repeat: repeat, repeat-y, repeat-y;
    background-position: 0 0, 0 21px, 0 21px;
    color: #FFF;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

Это видеть пользователь:
Код: 
.nodeInfo.primaryContent .nodeTitle a::after {
    content: "Я пользователь";
    display: inline-block;
    line-height: 14px;
    height: 14px;
    vertical-align: 2px;
    margin-left: 5px;
    padding: 0 5px;
    border-left: 10px solid rgb(0, 0, 0);
    border-left: 10px solid rgba(0, 0, 0, 0);
    _border-left: 10px solid rgb(0, 0, 0);
    border-radius: 2px;
    background-color: hsla(0,0%,0%,0);
    background-image: -webkit-linear-gradient(#F00, #F00), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -webkit-linear-gradient(- 45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: -moz-linear-gradient(#F00, #F00), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-image: linear-gradient(#F00, #F00), linear-gradient(135deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50.5%, #F00 50.5%);
    background-clip: padding-box, border-box, border-box;
    background-origin: padding-box, border-box, border-box;
    background-size: auto auto, 20px 100%, 20px 100%;
    background-repeat: repeat, repeat-y, repeat-y;
    background-position: 0 0, 0 21px, 0 21px;
    color: #FFF;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
Не много по другому для этих целей прописал классы.
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх Низ