Jump to content

Featured Replies

image.png.3c16d74dce82d17e0561e48beca097cc.png.6cf2e879c597b012bb302f5768988097.png

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.

image.png.ef110c2f89f11a296f1c3c360d8d8769.png.f9fd61c78465034bcb5a6c964cab8108.png

notificationsRows - subpage with notifications

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

image.png.6df8c096c2fccc443247d1bc972d2d9c.png.838096351902e626fa0978605e714a8d.png

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

image.png.3c16d74dce82d17e0561e48beca097cc.png.6cf2e879c597b012bb302f5768988097.png

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

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

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

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

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

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

image.png.ef110c2f89f11a296f1c3c360d8d8769.png.f9fd61c78465034bcb5a6c964cab8108.png

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

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

image.png.6df8c096c2fccc443247d1bc972d2d9c.png.838096351902e626fa0978605e714a8d.png

Осталось добавить код 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

Link to comment
https://ipbmafia.ru/topic/25504-colored-notifications-in-invision-community-4/
Share on other sites
/* Рамки уведомлений */

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

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

image.png.d9c5e36a75065472f21e1f82847c5f23.png

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

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

image.png.d9c5e36a75065472f21e1f82847c5f23.png

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.