Colorful notifications // Красочные уведомления

[MrHaim]

Hi!

 

A simple guide to coloring notifications, thanks to which they will be sorted into the categories you want. Example below.

To begin with, we add the following code snippet to two notification templates.

data-lkNotify='{$notification['data']['title']}'

For this we go to:

Styles -> Edit HTML/CSS -> Templates -> core -> front -> system -> notificationsAjax and notificationsRows

 

notificationsAjax - popup with notifications

We add the above code snippet in place as in the screenshot below.

 

Ready for the default template:

 

{{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}}
{{endif}}

 

notificationsRows - subpage with notifications

We add the same piece of code in place as in the screenshot below.

 

Ready for the default template:

{{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}}
{{endif}}

 

It remains to add the CSS code to the template. For this we go to:

Styles -> Edit HTML/CSS -> CSS -> core -> front -> custom -> custom.css

We add colors according to the scheme below:

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

Pros

• Segregated notifications
• Simple implementation

Minuses

• Extra lines of code in CSS for multi-language support.

 

Credit Marcin Lis