ElkArte Community

When I use the forum from mobile and I have a mention I see it on mobile and also on desktop,but when I receive a private message there is no notification on mobile. Is that normal or there is something wrong with my template?

I attach 2 screenshots

By default, in mobile the notification should "just" be a different color for the buttons (e.g. orange instead of blue in BeSocial! and green instead of grey in Light).
You can add back the indicators to the mobile version too by using a little trick.
In index.template.php search for:

			0 => ' <span class="pm_indicator">%1$s</span>',

and change it to:

			0 => '</span><span class="pm_indicator">%1$s</span><span>',

Yep, I told you it's a trick. :P

Then, in index.css search for:

#main_menu .linklevel1>.pm_indicator {

in the section:

@media screen and (max-width: 50em)

and remove the corresponding display: none.

If the theme were based on the Light variant you may have to bring the bubbles down slightly, but it looks based on BeSocial!, so the bubbles should already be at the same position.

It is a different color for mentions (in my case orange instead of green) but it is not a different color for PM. Is that normal or is something wrong with my custom css (based on beSocial theme).

The trick you proposed @emanuele is to show the number indicator in PM like in mentions? Am I right?

==edit==
there was something wrong in my custom_besocial.css I solved by changing:

#menu_nav .listlevel1.subsections>a:before {
	color: #4BA82E;
}

with

@media screen and (min-width: 50em) {
#menu_nav .listlevel1.subsections>a:before {
	color: #4BA82E;
}
}

I think this little error is also present on Frozen star theme made by @TE

Ohh.... okay, sorry I misunderstood.
It may be that a color applied directly to the PM menu is overriding the color set by the indicator.
As a quick check, you should have something like:

	.indicator[data-icon]:before {
		color: orange;
	}

in your css (always in the "@media screen and (max-width: 50em)" section), make it important:

color: orange !important;

and see if it changes.

Yep, the trick is about show the number next to the icon in mobile too.

sorry I edited my post without refreshing first, I don't know if my solution is the best one but works for me.

Ohh... lol