Colored notifications

a simple way to make your notification with colors

Style Edit HTML / CSS  Templates core front system  notificationsAjax  and  notificationsRows

add to the notificationsAjax

{{if empty( $notifications )}}
	<li class='ipsDataItem ipsDataItem_unread'>
		<div class='ipsPad ipsType_light ipsType_center ipsType_normal'>{lang="no_results_notifications"}</div>
	</li>
{{else}}
	{{foreach $notifications as $notification}}
		<li class='ipsDataItem {{if !$notification['notification']->read_time}}ipsDataItem_unread{{endif}}' data-lkNotify='{$notification['data']['title']}'>
			<div class='ipsDataItem_icon'>
				{{if isset( $notification['data']['author'] )}}
					{template="userPhoto" app="core" group="global" params="$notification['data']['author'], 'mini'"}
				{{endif}}
			</div>
			<div class='ipsDataItem_main'>
				<a href="{$notification['data']['url']}">
					<span class='ipsDataItem_title'>{$notification['data']['title']}</span>
					<br>
					<span class="ipsType_light">{datetime="$notification['notification']->updated_time"}</span>
				</a>
			</div>
		</li>
	{{endforeach}}

add to the notificationsRows 

{{if \count( $rows )}} 
	{{foreach $rows as $notification}}
		{{if isset( $notification['data']['title'] )}}
			<li class='ipsDataItem {{if $notification['data']['unread']}}ipsDataItem_unread{{endif}} ipsClearfix' data-lkNotify='{$notification['data']['title']}'>
				<div class='ipsDataItem_icon'>
					{{if isset( $notification['data']['author'] )}}
						{template="userPhoto" app="core" group="global" params="$notification['data']['author'], 'tiny'"}
					{{endif}}
				</div>
				<div class='ipsDataItem_main'>
					{{if !$notification['data']['unread']}}
						<span class="ipsItemStatus ipsItemStatus_small ipsItemStatus_read">
							<i class="fa fa-circle"></i>
						</span>
						<strong>
					{{endif}}
							<a href="{$notification['data']['url']}" class='ipsDataItem_title'>{$notification['data']['title']}</a>
					{{if !$notification['data']['unread']}}
						</strong>
					{{endif}}
					<br>
					<span class="ipsType_light">{datetime="$notification['notification']->updated_time"}</span>
				</div>
			</li>
			{{endif}}
	{{endforeach}}

ou have to add the CSS code to the template. To this end, we go to:

Style  Edytuj HTML/CSS CSS  core  front  custom custom.css

[data-lkNotify*="zareagował na"],
[data-lkNotify*="reacted to a"] {
    background-image: linear-gradient(to right, #ffeaea, transparent)!important;
}

[data-lkNotify*="wspomniał o tobie"],
[data-lkNotify*="mentioned you in a"] {
    background-image: linear-gradient(to right, #eaffea, transparent)!important;
}

[data-lkNotify*="zacytował cię"],
[data-lkNotify*="quoted you in a"] {
    background-image: linear-gradient(to right, #eaeaff, transparent)!important;
}

[data-lkNotify*="zaczął cię obserwować"],
[data-lkNotify*="is now following you"] {
    background-image: linear-gradient(to right, #eaffff, transparent)!important;
}