Colored Notifications in Invision Community 4

[MrHaim]

The first step will be to add the following code to 2 notification templates:

data-lkNotify='{$notification['notification']->notification_key}'

we can find them in:

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.

notificationsRows - subpage with notifications

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

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

Add colors according to the scheme below:

[data-lkNotify*="new_likes"] {
	background-image: linear-gradient(to right, green, transparent)!important;
}
[data-lkNotify*="warn"] {
	background-image: linear-gradient(to right, red, transparent)!important;
}

Usage examples:

• new_likes
• new_comments
• new_private_message
• trophies
• profile_comment
• new_status
• mention
• new_note
• profile_reply
• quote

 

Russian

Первым шагом будет добавление следующего кода в 2 шаблона уведомлений:

data-lkNotify='{$notification['notification']->notification_key}'

мы можем найти их в:

Стили -> Редактировать HTML/CSS -> Шаблоны -> ядро -> лицевая часть -> система -> уведомления Ajax и уведомления Rows

уведомления Ajax - всплывающее окно с уведомлениями

Мы добавляем приведенный выше фрагмент кода на место, как на скриншоте ниже.

уведомления Rows - подстраница с уведомлениями

Добавляем тот же фрагмент кода, что и на скриншоте ниже.

Осталось добавить код CSS в шаблон. Для этого идем в:

Стили -> Редактировать HTML/CSS -> CSS -> core -> front -> custom -> custom.css

Добавьте цвета по схеме ниже:

[data-lkNotify*="new_likes"] {
	background-image: linear-gradient(to right, green, transparent)!important;
}
[data-lkNotify*="warn"] {
	background-image: linear-gradient(to right, red, transparent)!important;
}

Примеры использования:

• новые_лайки
• новые_комментарии
• новое_частное_сообщение
• трофеи
• profile_comment
• новый_статус
• упомянуть
• новая_заметка
• profile_reply
• цитировать

 

Credit to RumcajsJumper

[ryancoolround]

/* Рамки уведомлений */

[data-lkNotify*="new_likes"] {
	border: 2px #ce00ff solid;
}
[data-lkNotify*="new_comment"] {
	border: 2px #00aaff solid;
}
[data-lkNotify*="new_private_message"] {
	border: 2px #267638 solid;
}
[data-lkNotify*="trophies"] {
	border: 2px #22eaa9 solid;
}
[data-lkNotify*="profile_comment"] {
	border: 2px #3d0bd6 solid;
}
[data-lkNotify*="new_status"] {
	border: 2px #1e18d8 solid;
}
[data-lkNotify*="mention"] {
	border: 2px #00aaff solid;
}
[data-lkNotify*="new_note"] {
	border: 2px #6f9c41 solid;
}
[data-lkNotify*="profile_reply"] {
	border: 2px #73d13b solid;
}
[data-lkNotify*="quote"] {
	border: 2px #00aaff solid;
}
[data-lkNotify*="warn"] {
	border: 2px #ff0000  solid;
}
[data-lkNotify*="approved_content"] {
	border: 2px #9bbb67 solid;
}
[data-lkNotify*="my_solution"] {
	border: 2px #ffbf00 solid;
}
[data-lkNotify*="event_reminder"] {
	border: 2px #2a00ff solid;
}
[data-lkNotify*="new_badge"] {
	border: 2px #2c8c69 solid;
}
[data-lkNotify*="new_content"] {
	border: 2px #046d07 solid;
}
[data-lkNotify*="mine_solved"] {
	border: 2px #6bdf82 solid;
}
[data-lkNotify*="new_rank"] {
	border: 2px #2145a5 solid;
}

/* Конец рамок уведомлений */

[MrHaim]

9 минут назад, ryancoolround сказал:

/* Рамки уведомлений */

[data-lkNotify*="new_likes"] {
	border: 2px #ce00ff solid;
}
[data-lkNotify*="new_comment"] {
	border: 2px #00aaff solid;
}
[data-lkNotify*="new_private_message"] {
	border: 2px #267638 solid;
}
[data-lkNotify*="trophies"] {
	border: 2px #22eaa9 solid;
}
[data-lkNotify*="profile_comment"] {
	border: 2px #3d0bd6 solid;
}
[data-lkNotify*="new_status"] {
	border: 2px #1e18d8 solid;
}
[data-lkNotify*="mention"] {
	border: 2px #00aaff solid;
}
[data-lkNotify*="new_note"] {
	border: 2px #6f9c41 solid;
}
[data-lkNotify*="profile_reply"] {
	border: 2px #73d13b solid;
}
[data-lkNotify*="quote"] {
	border: 2px #00aaff solid;
}
[data-lkNotify*="warn"] {
	border: 2px #ff0000  solid;
}
[data-lkNotify*="approved_content"] {
	border: 2px #9bbb67 solid;
}
[data-lkNotify*="my_solution"] {
	border: 2px #ffbf00 solid;
}
[data-lkNotify*="event_reminder"] {
	border: 2px #2a00ff solid;
}
[data-lkNotify*="new_badge"] {
	border: 2px #2c8c69 solid;
}
[data-lkNotify*="new_content"] {
	border: 2px #046d07 solid;
}
[data-lkNotify*="mine_solved"] {
	border: 2px #6bdf82 solid;
}
[data-lkNotify*="new_rank"] {
	border: 2px #2145a5 solid;
}

/* Конец рамок уведомлений */

Ух ты! Мне понравилось и я взял. Спасибо вам большое за обмен. Удивительный