Pm indicator on mobile

Topic: Pm indicator on mobile (Read 2381 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Pm indicator on mobile

March 07, 2015, 03:18:12 pm

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

Re: Pm indicator on mobile

Reply #1 – March 07, 2015, 04:33:05 pm

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:

Code: [Select]

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

and change it to:

Code: [Select]

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

Yep, I told you it's a trick.

Then, in index.css search for:

Code: [Select]

#main_menu .linklevel1>.pm_indicator {

in the section:

Code: [Select]

@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.

Re: Pm indicator on mobile

Reply #2 – March 07, 2015, 05:19:07 pm

Quote from: emanuele – March 07, 2015, 04:33:05 pmBy 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).

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:

Code: [Select]

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

with

Code: [Select]

@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

Re: Pm indicator on mobile

Reply #3 – March 07, 2015, 05:43:15 pm

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:

Code: [Select]

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

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

Code: [Select]

color: orange !important;

and see if it changes.

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

Re: Pm indicator on mobile

Reply #4 – March 07, 2015, 05:56:59 pm

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

Re: Pm indicator on mobile

Reply #5 – March 08, 2015, 04:21:31 am

Ohh... lol