Trying to do userprofile

i been looking to add a userprofile which is similar to what you have here and i found the code which is used for
phpbb 3 but my site is phpbb 2. https://help.forumotion.com/t141657-new-log-in-navigation-bar
if anyone can help me do understand how to make the code to fix phpbb 2 site, that would be great!

What happens when you add it to your forum?

https://i.servimg.com/u/f58/17/19/74/28/thisha10.png
this happens

Do you have HTML activated for the whole forum and in your profile?

The code in the screenshot is incomplete from what I can tell.. Not sure whether your forum altered the coding after you posted it up or whether you may have accidentally left out a few small bits of the code..
Could you post the code you're using in this topic in the code tags please

Code:

style type="text/css">#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; padding:3px; }#userProfile .leftCol { float:left; text-align:center; width:20%; } #userProfile .rightCol { float:left; width:25%; } #userName { background:#ECF3F7; color:#0076B1; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-18px; padding:0 12px; line-height:18px; } #userName span { font-weight:normal } #userAvatar img { max-width:100px } #userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; } #userProfile .title { color:#0076B1; font-weight:bold; border-bottom:1px solid #0076B1; padding-bottom:3px; margin-bottom:3px; width:90%; } #userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; } <script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'),
      homepage = J('.introduction', main)[0],
      profil;
 
  if (U.session_logged_in) {
    profil = document.createElement('DIV');
    profil.id = 'userProfile';
    profil.className = 'panel introduction';
    profil.innerHTML = '<div id="userName"><span>Logged in as </span>' + U.username + '</div><div class="leftCol"><span id="userAvatar">' + U.avatar + '</span></div><div class="rightCol"><div class="title">General</div><div><span class="statLabel">Rank : </span>' + L.rank_title + '</div><div><span class="statLabel">' + L.Posts + ' : </span>' + U.user_posts + '</div><div><span class="statLabel">' + L.PMs + ' : </span>' + U.user_nb_privmsg + '</div><div><span class="statLabel">' + L.Reputation + ' : </span>' + U.point_reputation + '</div></div><div class="rightCol"><div class="title">Profile</div><div><a href="/u' + U.user_id + '">' + L.See_my_profile + '</a></div><div><a href="/profile?mode=editprofile">' + L.Edit_profile + '</a></div><div><a href="/privmsg?folder=inbox">' + L.All_PMs + '</a></div><div><a href="/profile?mode=editprofile&page_profil=notifications">' + L.Notif_see_all + '</a></div></div><div class="rightCol"><div class="title">Search</div><div><a href="/sta/' + U.username + '">' + L.All_Topics + '</a></div><div><a href="/spa/' + U.username + '">' + L.All_Messages + '</a></div><div><a href="/search?search_id=watchsearch">' + L.js_topics_followed + '</a></div><div><a href="/search?search_id=newposts">View new posts</a></div></div><div class="clear"></div>';
    main.insertBefore(profil, homepage);
  }
  // par ange tuteur
})(jQuery, _userdata, _lang);
//]]></script>

note that forum is phpbb 2. also i did enable the html for myself and whole forum and still same result

You are missing the < at the start of the code

see

Code:

<style type="text/css">#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; padding:3px; }#userProfile .leftCol { float:left; text-align:center; width:20%; }#userProfile .rightCol { float:left; width:25%; }#userName { background:#ECF3F7; color:#0076B1; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-18px; padding:0 12px; line-height:18px; }#userName span { font-weight:normal }#userAvatar img { max-width:100px }#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }#userProfile .title { color:#0076B1; font-weight:bold; border-bottom:1px solid #0076B1; padding-bottom:3px; margin-bottom:3px; width:90%; }#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }</style><script type="text/javascript">// <![CDATA[(function(J, U, L) {  var main = document.getElementById('main-content'),      homepage = J('.introduction', main)[0],      profil;      if (U.session_logged_in) {    profil = document.createElement('DIV');    profil.id = 'userProfile';    profil.className = 'panel introduction';    profil.innerHTML = '<div id="userName"><span>Logged in as </span>' + U.username + '</div><div class="leftCol"><span id="userAvatar">' + U.avatar + '</span></div><div
 class="rightCol"><div
class="title">General</div><div><span
class="statLabel">Rank : </span>' + L.rank_title + '</div><div><span class="statLabel">' + L.Posts + ' : </span>' + U.user_posts + '</div><div><span class="statLabel">' + L.PMs + ' : </span>' + U.user_nb_privmsg + '</div><div><span class="statLabel">' + L.Reputation + ' : </span>' + U.point_reputation + '</div></div><div class="rightCol"><div class="title">Profile</div><div><a href="/u' + U.user_id + '">' + L.See_my_profile + '</a></div><div><a href="/profile?mode=editprofile">' + L.Edit_profile + '</a></div><div><a href="/privmsg?folder=inbox">' + L.All_PMs + '</a></div><div><a href="/profile?mode=editprofile&page_profil=notifications">' + L.Notif_see_all + '</a></div></div><div
 class="rightCol"><div
class="title">Search</div><div><a href="/sta/' + U.username + '">' + L.All_Topics + '</a></div><div><a href="/spa/' + U.username + '">' + L.All_Messages + '</a></div><div><a href="/search?search_id=watchsearch">' + L.js_topics_followed + '</a></div><div><a
 href="/search?search_id=newposts">View new
posts</a></div></div><div
class="clear"></div>';    main.insertBefore(profil, homepage);  }  // par ange tuteur})(jQuery, _userdata, _lang);//]]></script>

Yeah the missing "<" was causing an issue, as well as the missing closing style tag which didn't allow the CSS to end and the JS to kick in. Ape's version seems good so give that a go ^^

so i put the code in:
https://i.servimg.com/u/f58/17/19/74/28/part5510.png

this is what happened:
https://i.servimg.com/u/f58/17/19/74/28/didint10.png
thats my forum if you think something is wrong:
http://demondragons.motionsforum.com/

Do you have the code on your forum now? It would help us if you do.

yes i do.

Are you adding the code to the homepage message or an announcement?

homepage message

I do not see the homepage message.

this is where i placed it.
https://i.imgur.com/Ikw7ldP.png

Could you send me a test account by PM?

Hello @Goppyrules,
Please also check this topic it should be helps you.

which part becasue it keeps leaching into another topic?

What is leaking?

i mean like its not straight forward for me becasue every topic i look at, it moves into another topic.

Are you using a mobile device to view the support forum?

no what i am saying is the link van-helsing posted isnt exactly clear on how to solve my problem.

Hi @Goppyrules,

Try adding the following code to your homepage message.

Code:

<div id="homepage-profil"></div>
<style type="text/css">#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; padding:3px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#ECF3F7; color:#0076B1; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-18px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#0076B1; font-weight:bold; border-bottom:1px solid #0076B1; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }</style>
<script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('homepage-profil'),
      profil;
 
  if (U.session_logged_in) {
    profil = document.createElement('DIV');
    profil.id = 'userProfile';
    profil.className = 'panel introduction';
    profil.innerHTML = '<div id="userName"><span>Logged in as </span>' + U.username + '</div><div class="leftCol"><span id="userAvatar">' + U.avatar + '</span></div><div class="rightCol"><div class="title">General</div><div><span class="statLabel">Rank : </span>' + L.rank_title + '</div><div><span class="statLabel">' + L.Posts + ' : </span>' + U.user_posts + '</div><div><span class="statLabel">' + L.PMs + ' : </span>' + U.user_nb_privmsg + '</div><div><span class="statLabel">' + L.Reputation + ' : </span>' + U.point_reputation + '</div></div><div class="rightCol"><div class="title">Profile</div><div><a href="/u' + U.user_id + '">' + L.See_my_profile + '</a></div><div><a href="/profile?mode=editprofile">' + L.Edit_profile + '</a></div><div><a href="/privmsg?folder=inbox">' + L.All_PMs + '</a></div><div><a href="/profile?mode=editprofile&page_profil=notifications">' + L.Notif_see_all + '</a></div></div><div class="rightCol"><div class="title">Search</div><div><a href="/sta/' + U.username + '">' + L.All_Topics + '</a></div><div><a href="/spa/' + U.username + '">' + L.All_Messages + '</a></div><div><a href="/search?search_id=watchsearch">' + L.js_topics_followed + '</a></div><div><a href="/search?search_id=newposts">View new posts</a></div></div><div class="clear"></div>';
    main.appendChild(profil);
  }
  // par ange tuteur
})(jQuery, _userdata, _lang);
//]]></script>

Make sure to remove or replace the existing code you've placed in there.

This variant of the code should work on any forum version, only downside is it will not display outside of the homepage message. Of course you can always place it in a template or anywhere else HTML (and scripting) formats.

Ange Tuteur wrote:Hi @Goppyrules,

Try adding the following code to your homepage message.

Code:

<div id="homepage-profil"></div>
<style type="text/css">#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; padding:3px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#ECF3F7; color:#0076B1; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-18px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#0076B1; font-weight:bold; border-bottom:1px solid #0076B1; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }</style>
<script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('homepage-profil'),
      profil;
 
  if (U.session_logged_in) {
    profil = document.createElement('DIV');
    profil.id = 'userProfile';
    profil.className = 'panel introduction';
    profil.innerHTML = '<div id="userName"><span>Logged in as </span>' + U.username + '</div><div class="leftCol"><span id="userAvatar">' + U.avatar + '</span></div><div class="rightCol"><div class="title">General</div><div><span class="statLabel">Rank : </span>' + L.rank_title + '</div><div><span class="statLabel">' + L.Posts + ' : </span>' + U.user_posts + '</div><div><span class="statLabel">' + L.PMs + ' : </span>' + U.user_nb_privmsg + '</div><div><span class="statLabel">' + L.Reputation + ' : </span>' + U.point_reputation + '</div></div><div class="rightCol"><div class="title">Profile</div><div><a href="/u' + U.user_id + '">' + L.See_my_profile + '</a></div><div><a href="/profile?mode=editprofile">' + L.Edit_profile + '</a></div><div><a href="/privmsg?folder=inbox">' + L.All_PMs + '</a></div><div><a href="/profile?mode=editprofile&page_profil=notifications">' + L.Notif_see_all + '</a></div></div><div class="rightCol"><div class="title">Search</div><div><a href="/sta/' + U.username + '">' + L.All_Topics + '</a></div><div><a href="/spa/' + U.username + '">' + L.All_Messages + '</a></div><div><a href="/search?search_id=watchsearch">' + L.js_topics_followed + '</a></div><div><a href="/search?search_id=newposts">View new posts</a></div></div><div class="clear"></div>';
    main.appendChild(profil);
  }
  // par ange tuteur
})(jQuery, _userdata, _lang);
//]]></script>

Make sure to remove or replace the existing code you've placed in there.

This variant of the code should work on any forum version, only downside is it will not display outside of the homepage message. Of course you can always place it in a template or anywhere else HTML (and scripting) formats.

Works great! You are a saint man! topic solved!