relocate notifications button.

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
ghswen
Registered User
Posts: 17
Joined: Sun Apr 21, 2019 9:04 pm

relocate notifications button.

Post by ghswen » Tue Aug 06, 2019 5:12 pm

Hi everyone!

I have a few members that are using cell phones and tablets while using our forum. http://theskysearchers.com. The issue is the "logout" and the "notifications" buttons are next to each other and it is easy to accidentally press the 'logout' button instead of the "notifications" button.

Is there a way to relocate the notifications button say before the profile button?

We are running phpBB 3.2.7
php 7.1.30
MySQL(i) 5.7.24
and a number of different 'prosilver' styles.

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51883
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: relocate notifications button.

Post by Brf » Tue Aug 06, 2019 5:46 pm

Moved to Style Support.

You have a logout button? From what I see you would have to open the profile dropdown to logout. The notifications link is right on the menu bar, not in the dropdown.

ghswen
Registered User
Posts: 17
Joined: Sun Apr 21, 2019 9:04 pm

Re: relocate notifications button.

Post by ghswen » Tue Aug 06, 2019 6:19 pm

Maybe this is a better way to explain it.
moving menu items.jpg
moving menu items.jpg (10.13 KiB) Viewed 548 times
The photo shows the way the layout is currently. What I wish to do is move the Notifications button to the area noted (between the Gallery and the ACP buttons).

Hope this helps.

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51883
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: relocate notifications button.

Post by Brf » Tue Aug 06, 2019 6:22 pm

You would have to ask the author of that style. Prosilver itself does not have a logout button there.
Attachments
logout.jpg
logout.jpg (12.48 KiB) Viewed 546 times

ghswen
Registered User
Posts: 17
Joined: Sun Apr 21, 2019 9:04 pm

Re: relocate notifications button.

Post by ghswen » Tue Aug 06, 2019 6:48 pm

Thanks, I will give him a shout.

User avatar
EA117
Registered User
Posts: 1078
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: relocate notifications button.

Post by EA117 » Tue Aug 06, 2019 7:32 pm

An alternative to what you asked could be to simply style the logout button (<li class="tab logout" ...>) such that it forces more space on its left-hand side, to keep it further away from "whichever button" is placed right beside it. (i.e. Whether that's still the Notifications icon or not.)

And if you wrap the change in a @media( max-width: ) section, you can even make it only affect when the screen resolution is below a certain size. (i.e. Leave most desktop experiences as-is.) Such as:

Code: Select all

@media (max-width: 700px) {
  .navbar.tabbed .nav-tabs .logout {
    margin-left: 20px !important; }  }
I didn't have a login on your site to show literally the Logout button, but here is before and after of applying this same change to the .register class button instead, after adding this block to the end of /styles/black/theme/stylesheet.css:

margin.png

Not to override any support you might get from the actual style author, of course, since they may know an even smarter approach.


To answer your original question though, for proSilver and others (including the Black style currently showing on the site), the order of the items in the navigation bar will be controlled from /template/navbar_header.html

e.g. In Black, it's this block which is deciding to show user profile first, followed by PMs and Notifications:

Code: Select all

				<!-- IF S_REGISTERED_USER -->
					<!-- EVENT navbar_header_user_profile_prepend -->
					<li id="username_logged_in" class="tab account dropdown-container" data-skip-responsive="true" data-select-match="ucp">
						<a href="{U_PROFILE}" class="nav-link dropdown-trigger">{CURRENT_USERNAME_SIMPLE}</a>
						<div class="dropdown hidden">
							<div class="pointer"><div class="pointer-inner"></div></div>
							<ul class="dropdown-contents" role="menu">
								<!-- IF U_RESTORE_PERMISSIONS --><li class="small-icon icon-restore-permissions"><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
			
								<!-- EVENT navbar_header_profile_list_before -->
			
								<li class="small-icon icon-ucp"><a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">{L_PROFILE}</a></li>
								<li class="small-icon icon-profile"><a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">{L_READ_PROFILE}</a></li>
			
								<!-- EVENT navbar_header_profile_list_after -->
			
								<li class="separator"></li>
								<li class="small-icon icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">{L_LOGIN_LOGOUT}</a></li>
							</ul>
						</div>
					</li>
					<!-- IF S_DISPLAY_PM -->
						<li class="tab pm<!-- IF PRIVATE_MESSAGE_COUNT > 0 --> non-zero<!-- ENDIF -->" data-skip-responsive="true" data-select-match="pm">
							<a class="nav-link" href="{U_PRIVATEMSGS}" role="menuitem">{L_PRIVATE_MESSAGES}</a>
							<strong>
								<span class="counter">{PRIVATE_MESSAGE_COUNT}</span>
								<span class="arrow"></span>
							</strong>
						</li>
					<!-- ENDIF -->
					<!-- IF S_NOTIFICATIONS_DISPLAY -->
						<li class="tab notifications dropdown-container<!-- IF NOTIFICATIONS_COUNT > 0 --> non-zero<!-- ENDIF -->" data-skip-responsive="true" data-select-match="notifications">
							<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="nav-link dropdown-trigger">{L_NOTIFICATIONS}</a>
							<strong>
								<span class="counter">{NOTIFICATIONS_COUNT}</span>
								<span class="arrow"></span>
							</strong>
							<!-- INCLUDE notification_dropdown.html -->
						</li>
					<!-- ENDIF -->
					<!-- EVENT navbar_header_user_profile_append -->
				<!-- ENDIF -->
To reverse that order (PMs and Notifications first, then user profile, such that user profile ends up adjacent to the logout button which appears next) you would rearrange it as:

Code: Select all

				<!-- IF S_REGISTERED_USER -->
					<!-- EVENT navbar_header_user_profile_prepend -->
					<!-- IF S_DISPLAY_PM -->
						<li class="tab pm<!-- IF PRIVATE_MESSAGE_COUNT > 0 --> non-zero<!-- ENDIF -->" data-skip-responsive="true" data-select-match="pm">
							<a class="nav-link" href="{U_PRIVATEMSGS}" role="menuitem">{L_PRIVATE_MESSAGES}</a>
							<strong>
								<span class="counter">{PRIVATE_MESSAGE_COUNT}</span>
								<span class="arrow"></span>
							</strong>
						</li>
					<!-- ENDIF -->
					<!-- IF S_NOTIFICATIONS_DISPLAY -->
						<li class="tab notifications dropdown-container<!-- IF NOTIFICATIONS_COUNT > 0 --> non-zero<!-- ENDIF -->" data-skip-responsive="true" data-select-match="notifications">
							<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="nav-link dropdown-trigger">{L_NOTIFICATIONS}</a>
							<strong>
								<span class="counter">{NOTIFICATIONS_COUNT}</span>
								<span class="arrow"></span>
							</strong>
							<!-- INCLUDE notification_dropdown.html -->
						</li>
					<!-- ENDIF -->
					<li id="username_logged_in" class="tab account dropdown-container" data-skip-responsive="true" data-select-match="ucp">
						<a href="{U_PROFILE}" class="nav-link dropdown-trigger">{CURRENT_USERNAME_SIMPLE}</a>
						<div class="dropdown hidden">
							<div class="pointer"><div class="pointer-inner"></div></div>
							<ul class="dropdown-contents" role="menu">
								<!-- IF U_RESTORE_PERMISSIONS --><li class="small-icon icon-restore-permissions"><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
			
								<!-- EVENT navbar_header_profile_list_before -->
			
								<li class="small-icon icon-ucp"><a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">{L_PROFILE}</a></li>
								<li class="small-icon icon-profile"><a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">{L_READ_PROFILE}</a></li>
			
								<!-- EVENT navbar_header_profile_list_after -->
			
								<li class="separator"></li>
								<li class="small-icon icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">{L_LOGIN_LOGOUT}</a></li>
							</ul>
						</div>
					</li>
					<!-- EVENT navbar_header_user_profile_append -->
				<!-- ENDIF -->
i.e. In essence, you're just changing the order in which the <li> items are declared. But in doing so, you must keep the correct conditional template logic and event triggers, too.

As with any style change, keep your original files to restore if necessary, and use the ACP "Purge the cache" in order to see the effect of your style edits.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”