Shorten Username display on mobile

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
User avatar
Boardtalk.net
Registered User
Posts: 1222
Joined: Fri Jun 05, 2009 8:12 pm
Location: Ireland
Name: Colette
Contact:

Shorten Username display on mobile

Post by Boardtalk.net »

Hi All,

Am not sure if this needs an extension or maybe a little CSS.

The Issue:
When a member, with a long username, is on their mobile and they get a new message/notification, they don't know because the long username prevents the notification from displaying the "(1)" - hope that makes sense.

Members with shorter usernames can see the notification(s).

What should resolve the Issue:
Is it possible to limit the number of username characters displayed with CSS? Say, maximum of five characters regardless of the length of the username?

As you can see from the screenshot, I've a few things setup in that area.
Screenshot.png
I'd appreciate your advice and/or tips for a solution.

Thanks
User avatar
Steve
Registered User
Posts: 1092
Joined: Tue Apr 07, 2009 7:48 pm
Location: UK ,up north!!
Name: Steven Clark
Contact:

Re: Shorten Username display on mobile

Post by Steve »

you could use:

Code: Select all

.header-avatar {
	white-space: nowrap; 
	width: 9ch; /* + for ellipsis */
	overflow: hidden;
	text-overflow: " \23F7";
}
playing around with width: 9ch; /* + for ellipsis */
and of course your media query: @media (max-width: 700px)
User avatar
Boardtalk.net
Registered User
Posts: 1222
Joined: Fri Jun 05, 2009 8:12 pm
Location: Ireland
Name: Colette
Contact:

Re: Shorten Username display on mobile

Post by Boardtalk.net »

Thanks Steve, I'll give it a go tonight - about to run out the door shortly ;)
User avatar
Boardtalk.net
Registered User
Posts: 1222
Joined: Fri Jun 05, 2009 8:12 pm
Location: Ireland
Name: Colette
Contact:

Re: Shorten Username display on mobile

Post by Boardtalk.net »

Steve wrote: โ†‘
Tue Feb 11, 2020 7:23 am
you could use:

Code: Select all

.header-avatar {
	white-space: nowrap; 
	width: 9ch; /* + for ellipsis */
	overflow: hidden;
	text-overflow: " \23F7";
}
playing around with width: 9ch; /* + for ellipsis */
and of course your media query: @media (max-width: 700px)
Steve,
Thanks a million, this worked a treat :D

Thanks so much
Post Reply

Return to โ€œ[3.3.x] Styles Support & Discussionโ€