inherit
216050
0
Mar 9, 2024 21:18:38 GMT -8
Yorko
686
November 2014
gasification
|
Post by Yorko on Sept 21, 2020 5:45:55 GMT -8
Hi there
Can anyone help me with instructions on how to display a persons avatar next to Welcome Name on Navigation Bar
Many thanks
|
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,779
January 2015
msg
|
Post by Lynx on Sept 25, 2020 6:12:27 GMT -8
Hi.
Displayed where exactly? To the left of Welcome; directly to the left of their Name; or to the right of their name?
|
|
inherit
216050
0
Mar 9, 2024 21:18:38 GMT -8
Yorko
686
November 2014
gasification
|
Post by Yorko on Sept 25, 2020 10:51:34 GMT -8
Hi there
Directly after their name
Many thanks
|
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,779
January 2015
msg
|
Post by Lynx on Sept 27, 2020 13:25:24 GMT -8
Hi there Directly after their name Many thanks I haven't forgot about this - but everything I try, it places the avatar in the wrong spot. I'm still working on it, but if someone else can get the solution to you first, I'm certainly not going to object.  Maybe Kami and/or elli know the solution to this. EDIT: I've been trying variations on this line in the Forum Wrapper:
<span> Welcome, $[current_user.name].</span> $[logout_link]
by inserting $[current_user.avatar_quote] in there in various places (inside and outside the <span>) - but it keeps insisting on appending it to my navbar. I had originally thought it should look like this:
<span> Welcome, $[current_user.name] $[current_user.avatar_quote].</span> $[logout_link]
but it doesn't seem to want to follow that logically. I tested that on a vanilla theme on my test forum. |
|
Kami
Forum Cat
Posts: 40,029
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,029
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 27, 2020 16:24:20 GMT -8
Lynx without seeing your forum to confirm, i hazard the guess that the problem is that this is in a <span> tag and the avatar variable is already contained within a <div> tag, like so: <div class="avatar-wrapper avatar_size_quote avatar-1" title="Kami"><img src="//storage.proboards.com/forum/images/defaultavatar.png" alt="Kami Avatar"></div>
You'd need to do a little restructuring of this particular div via css in order to get it to show properly adjacent to the name.
|
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,779
January 2015
msg
|
Post by Lynx on Sept 27, 2020 16:35:23 GMT -8
Thanks for the reply, Kami! Test forum is here: codesndesigns.boards.net/Image of result:  It ends up after the Admin link in the navbar, instead of to the right of MSG - and pushes the Logout link and clock to the next line. I'm stumped. |
|
Kami
Forum Cat
Posts: 40,029
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,029
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 27, 2020 16:42:40 GMT -8
Thanks for the reply, Kami ! Test forum is here: codesndesigns.boards.net/Image of result: It ends up after the Admin link in the navbar, instead of to the right of MSG - and pushes the Logout link and clock to the next line. I'm stumped. Have you modified the CSS at all? You'll probably also need to modify the menu bar in of itself, HTML-wise. You cannot have a div inside a span, and that is what the avatar variable outputs. |
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,779
January 2015
msg
|
Post by Lynx on Sept 27, 2020 16:48:56 GMT -8
I don't believe I've modified the CSS - just added a few <div>'s in the templates for some plugins, but not in that area. Even if I put it outside the <span>:
<span> Welcome, $[current_user.name].</span>$[current_user.avatar_quote] $[logout_link]
I get the same result as the image above. It's from this section in the Forum Wrapper:
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
<span id="liveclock"></span>
{/if}
{else}
<span> Welcome, $[current_user.name].</span>$[current_user.avatar_quote] $[logout_link]
<span id="liveclock"></span>
{/if}
</p>
if that helps. EDIT: Here's my entire Forum Wrapper template:
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
<span id="liveclock"></span>
{/if}
{else}
<span> Welcome, $[current_user.name].</span>$[current_user.avatar_quote] $[logout_link]
<span id="liveclock"></span>
{/if}
</p>
</div>
</header>
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[header]
<div id="timezone-container">
<timezone-board></timezone-board>
</div>
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
{if $[route.params.page_id] != "scavenger-hunt"}
$[shoutbox]
{/if}
</div>
$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
|
|
Kami
Forum Cat
Posts: 40,029
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,029
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 27, 2020 17:04:37 GMT -8
Hon, I think you're misunderstanding me :X
$[current_user.avatar_quote] out puts a div containing the image tag. the div will always force any surrounding content to shove to a different line. it isn't anything special, just basic HTML.
In order to accomplish this, the navigation menu as well as the output div will need to be modified, both in HTML and CSS. (For clarity -- I asked if you had made any modifications not because of a conflict, but because they are needed).
In short, you cannot simply just stick the variable in by itself. (:
|
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,779
January 2015
msg
|
Post by Lynx on Sept 27, 2020 17:13:12 GMT -8
Hon, I think you're misunderstanding me :X $[current_user.avatar_quote] out puts a div containing the image tag. the div will always force any surrounding content to shove to a different line. it isn't anything special, just basic HTML. In order to accomplish this, the navigation menu as well as the output div will need to be modified, both in HTML and CSS. (For clarity -- I asked if you had made any modifications not because of a conflict, but because they are needed). In short, you cannot simply just stick the variable in by itself. (: Can I **facepalm** myself now?  Can I blame it on lack of sleep and coffee? Thank you, Kami! I think I'd better leave this to someone more qualified, then - because, to be honest, I'm not sure of all what would have to be changed to make this work. Thanks for your replies, Kami - I appreciate it! Sorry, Yorko - I thought I could just plug in a template variable, but this is not the case - obviously. My apologies for not being able to help you with this. Hopefully someone can get you the solution you need. |
|
Kami
Forum Cat
Posts: 40,029
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,029
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 27, 2020 17:46:48 GMT -8
So as I mentioned, displaying a person's avatar next to their name in the WELCOME message on the Navigation bar isn't very easy, because the variable you would use to do this outputs a div. The best way to do this would be to modify the entire navigation to allow for the div to show properly rather than pushing all the content aside.
To accomplish this, we'll need to make a couple of edits.
1. Go to admin > structure > layout templates > forum wrapper. Make sure to select the correct theme you want to see these changes on (if you have more than one theme that you want to have this effect on, you'll need to repeat these instructions per theme).
2. Next, scroll down to find where it says <p id="welcome">. Then, continue scrolling until you see the closing </p> (it should be right before a </div>).
3. Replace both instances of "p" with "div", so they read <div id="welcome"> and </div>, respectively.
4. Just above the closing </p> you'll see a line that says <span> Welcome, $[current_user.name].</span> $[logout_link]. We are going to change that to the following HTML instead:
<div class="welcome-message-greeting">Welcome $[current_user.name].</div><div class="welcome-message-logout">$[logout_link]</div> $[current_user.avatar_quote]
5. Save your changes. This will look weird right now. That's okay, keep going.
6. Navigate to admin > themes > advanced styles & css. On this page, near the top-left, you'll see two tabs: Visual Editor and Stylesheet. You want Stylesheet. Again, make sure you have the correct theme selected as well.
7. Once you're on the style sheet, scroll all the way down and ignore all the code you see there. At the bottom, you're going to click into the text box, tap ENTER two times, and copy/paste the following CSS:
/* ========================================
START - Add Current User Icon to Welcome Nav Bar
==========================================*/
.welcome-message-greeting {
float: left;
padding-right: 0.5em;
}
.welcome-message-logout {
float: right;
padding-left: 0.5em;
}
/* ========================================
END - Add Current User Icon to Welcome Nav Bar
==========================================*/
8. Save your changes. The welcome message should now display "Welcome [Display Name]. [Icon] Logout." Note that this is only for logged in users and guests will not have an icon displayed.
|
|
inherit
216050
0
Mar 9, 2024 21:18:38 GMT -8
Yorko
686
November 2014
gasification
|
Post by Yorko on Sept 28, 2020 11:50:52 GMT -8
No need for apologies Lynx I’m grateful to you for trying, thank you very much |
|
inherit
216050
0
Mar 9, 2024 21:18:38 GMT -8
Yorko
686
November 2014
gasification
|
Post by Yorko on Sept 28, 2020 11:56:57 GMT -8
Many thanks Kami I will try it soon and let you know if I succeed Wish me luck |
|
inherit
216050
0
Mar 9, 2024 21:18:38 GMT -8
Yorko
686
November 2014
gasification
|
Post by Yorko on Sept 28, 2020 12:09:14 GMT -8
I did it on a test forum and its spot on  Thank you so much Kami for your help and to Lynx for trying |
|
Kami
Forum Cat
Posts: 40,029
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,029
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 28, 2020 12:23:29 GMT -8
You're welcome! Glad it works (:
|
|
