Różne kolory powiadomień

[aXen]

Cześć,

Próbuję uzyskać taki efekt u siebie na forum w powiadomieniach:

Grafika jest z mojego forum, wpisy sam pokolorowałem za pomocą zbadaj element.

 

Jak mogę rozróżnić te powiadomienia w CSS w zależności od jej treści np. "dodał komentarz", "zareagował"?

[Marcin Lis]

Domyślnie nie ma jak do tego się odwołać, ale po lekkiej edycji da się to zrobić.

 

Dodaj do templatek data-typenotify='{$notification['data']['title']}', niżej masz gotowce. Teraz dostaniesz w atrybucie tekst "X zareagował...", itd. Dzięki temu w CSS może się odwołać do tego tekstu, ale jeśli masz kilka języków na stronie to dla każdego musisz zrobić wersje.

 

[data-typenotify*=" zareagował na → odpowiedź w temacie "],
[data-typenotify*=" reacted to a post "] {
    background: linear-gradient(to right, #ffdddd, #fff)!important;
}

 

 

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-typenotify='{$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

{{if \count( $rows )}} 
	{{foreach $rows as $notification}}
		{{if isset( $notification['data']['title'] )}}
			<li class='ipsDataItem {{if $notification['data']['unread']}}ipsDataItem_unread{{endif}} ipsClearfix' data-typenotify='{$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}}

 

PS: widzę, że korzystasz z moich bloczków, chyba spodobały ci się

Edytowane 7 Lutego 2019 przez Marcin Lis

[aXen]

Dzięki! O to mi chodziło!

Godzinę temu, Marcin Lis napisał:

PS: widzę, że korzystasz z moich bloczków, chyba spodobały ci się

Jedynie logiczne napisane i ładne 

[DawPi]

Można by zrobić z tego tutorial i dodać?

[Marcin Lis]

23 minuty temu, DawPi napisał:

Można by zrobić z tego tutorial i dodać?

Można, ale ty chcesz napisać czy ja mam to zrobić? 

[DawPi]

Nie no Ty. ?

[Marcin Lis]

Zostawię link na przyszłość.

[Jurij]

Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu.

Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum.