User Profile Tabs

Technical Details

Forum version : phpBB3
Position : Guest
Concerned browser(s) : Opera
Screenshot of problem : http://i19.servimg.com/u/f19/19/14/32/97/tabs10.jpg
Who the problem concerns : All members
Forum link : http://awesomeanimals.forumakers.com

Description of problem

I was wondering if someone knew how I could edit the tabs in the user profile area. Any help is appreciated.
Ashley

URL:http://awesomeanimals.forumakers.com

Hello,

I do not know preciselly about the tabs. But if it was/is possible it would most likely be be found in ACP-->Users and Usergroups--> Profiles

-Brandon

I checked there but couldn't find anything.  That's why I was hoping there was a code or area I could edit it that I haven't found yet.

Hi @Awesome Animals,

It's possible to edit those tab with either CSS or JavaScript depending on what you want to achieve. Could you elaborate on what you would like to do with these tabs ? ( e.g. change the color, texts ..? )

I would like to change the text on the tabs, change the info in some of the tabs and create a couple of new tabs. I found where you can change the text using a code but not where you can change, delete and create new tabs.

Hello?

Sorry for the late reponse, I was writing something up. Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Placement : In all the pages
Paste the following code :

Code:

// advanced profile modifications intended for phpbb3
/\/u\d+/.test(window.location.pathname) && $(function() {
 
  // change the names of tabs
  // syntax : tabURL : newTabName
  // if a tab isn't present use the tab URL name without the user ID
  var tabNames = {
    'wall' : 'Messages',
    'default' : 'Profile',
    'stats' : 'Stats',
    'friends' : 'Friends',
    'contact' : 'Contact'
  },
 
  // create simple tabs here
  // you should include the name of the tab and HTML content
  // separate multiple tabs by a comma
  newTabs = {
   
    tab1 : {
      name : 'Example Tab 1',
      html : '<span style="color:red">This tab is a simple example</span>'
    },
   
    tab2 : {
      name : 'Example Tab 2',
      html : '<fieldset class="stats-field genmed"><legend>Example</legend><ul><li><label>Label 1 : </label>Value 1</li><li><label>Label 2 : </label>Value 2</li></ul></fieldset><div>Another simple example using HTML. User specific datas would need to be fetched via an AJAX call.</div>'
    }
   
  },
     
  // technical data is below
  // if you've no experience in JavaScript, it's recommend you don't touch anything below
  main = document.getElementById('cp-main'), tablist = document.getElementById('tabs').getElementsByTagName('UL')[0], id = window.location.pathname.replace(/\/(u\d+).*/,'$1'), tabData = [];
 
  // change tab names
  for (var a = tablist.getElementsByTagName('A'), i = 0, j = a.length, u; i < j; i++) {
    for (var k in tabNames) a[i].href.replace(/.*?\/(u\d+.*)/,'$1').replace(/#$/,'') == ( id + k.replace(/default/,'') ) && ( a[i].firstChild.innerHTML = tabNames[k] );
   
    if (/activetab/.test(a[i].parentNode.className)) {
      a[i].parentNode.onclick = function() { tabChange(this, main) }
    }
  }
 
  // creates our tabs
  for (var k in newTabs) createTab(newTabs[k].name, newTabs[k].html);
   
  // hides all content and removes the activetab classname
  // the arguments passed will be used to show the new active tab
  function tabChange(tab, content) {
    for (var i = 0, j = tabData.length; i < j; i++) tabData[i].style.display = 'none';
    for (var a = tablist.getElementsByTagName('LI'), i = 0, j = a.length; i < j; i++) a[i].className = '';
    main.style.display = 'none';
    content.style.display = '';
    tab.className = 'activetab';
  }
 
  // our tab creator
  // pass along a name and some HTML to create a tab. e.g. createTab('newTab', 'Some content');
  function createTab(name, html) {
    var tab = document.createElement('LI'), content = document.createElement('DIV');
    tab.innerHTML = '<a href="#"><span>' + name + '</span></a>';
    content.innerHTML = '<h1>' + name + '</h1><div class="panel"><div class="inner"><span class="corners-top"><span></span></span>' + html + '<span class="corners-bottom"><span></span></span></div></div>';
    content.style.display = 'none';
    content.className = 'ucp-main';
    content.id = 'cp-main';
   
    tablist.appendChild(tab);
    main.parentNode.insertBefore(content, main);
   
    tabData.push(content);
   
    tab.onclick = function() { tabChange(this, content) }
  };
  // A.T
});

To change the tab names, modify the contents of this object :

Code:

  var tabNames = {
    'wall' : 'Messages',
    'default' : 'Profile',
    'stats' : 'Stats',
    'friends' : 'Friends',
    'contact' : 'Contact'
  },

The content to the left of the colon is the URL of that tab which it modifies. To the right of the colon is the new texts applied to that tab.

To create new tabs, I wrote a small prototype. You'll see this object :

Code:

  newTabs = {
   
    tab1 : {
      name : 'Example Tab 1',
      html : '<span style="color:red">This tab is a simple example</span>'
    },
   
    tab2 : {
      name : 'Example Tab 2',
      html : '<fieldset class="stats-field genmed"><legend>Example</legend><ul><li><label>Label 1 : </label>Value 1</li><li><label>Label 2 : </label>Value 2</li></ul></fieldset><div>Another simple example using HTML. User specific datas would need to be fetched via an AJAX call.</div>'
    }
   
  },

I've two example in there. To create a new tab, write this inside the object above, for example :

Code:

    tab1 : {
      name : 'Example Tab 1',
      html : '<span style="color:red">This tab is a simple example</span>'
    }

Make sure to increment the 1 in the name to another number not yet occupied. Inside the tab you can define the name, and content of that tab. The name will display on the tab name and in the tab content. The HTML is the main content of the tab, you can include simple contents, or go more advanced by pulling content from other tabs via AJAX.

I have comments in the script also, but if you have any questions let me know.

Also, you can choose which tabs display here :
Administration Panel > Users and Groups > Profiles > General options > Tabs to display

Thank you. I will try it and let you know if it works.

I tried to create a new tab using the code but for some reason it isn't working.

Could you post the modified code here ?

OK here it is.

Code:

  // if a tab isn't present use the tab URL name without the user ID
  var tabNames = {
    'wall' : 'Messages',
    'default' : 'Profile',
    'stats' : 'Stats',
    'friends' : 'Friends',
    'contact' : 'Contact'
  },
 
  // create simple tabs here
  // you should include the name of the tab and HTML content
  // separate multiple tabs by a comma
  newTabs = {
   
  tab1 : {
      name : 'My Pets',
      html : '<span style="color:red">http://awesomeanimals.forumakers.com/h2-pets</span>'
    },
     
  // technical data is below
  // if you've no experience in JavaScript, it's recommend you don't touch anything below
  main = document.getElementById('cp-main'), tablist = document.getElementById('tabs').getElementsByTagName('UL')[0], id = window.location.pathname.replace(/\/(u\d+).*/,'$1'), tabData = [];
 
  // change tab names
  for (var a = tablist.getElementsByTagName('A'), i = 0, j = a.length, u; i < j; i++) {
    for (var k in tabNames) a[i].href.replace(/.*?\/(u\d+.*)/,'$1').replace(/#$/,'') == ( id + k.replace(/default/,'') ) && ( a[i].firstChild.innerHTML = tabNames[k] );
   
    if (/activetab/.test(a[i].parentNode.className)) {
      a[i].parentNode.onclick = function() { tabChange(this, main) }
    }
  }
 
  // creates our tabs
  for (var k in newTabs) createTab(newTabs[k].name, newTabs[k].html);
   
  // hides all content and removes the activetab classname
  // the arguments passed will be used to show the new active tab
  function tabChange(tab, content) {
    for (var i = 0, j = tabData.length; i < j; i++) tabData[i].style.display = 'none';
    for (var a = tablist.getElementsByTagName('LI'), i = 0, j = a.length; i < j; i++) a[i].className = '';
    main.style.display = 'none';
    content.style.display = '';
    tab.className = 'activetab';
  }
 
  // our tab creator
  // pass along a name and some HTML to create a tab. e.g. createTab('newTab', 'Some content');
  function createTab(name, html) {
    var tab = document.createElement('LI'), content = document.createElement('DIV');
    tab.innerHTML = '<a href="#"><span>' + name + '</span></a>';
    content.innerHTML = '<h1>' + name + '</h1><div class="panel"><div class="inner"><span class="corners-top"><span></span></span>' + html + '<span class="corners-bottom"><span></span></span></div></div>';
    content.style.display = 'none';
    content.className = 'ucp-main';
    content.id = 'cp-main';
   
    tablist.appendChild(tab);
    main.parentNode.insertBefore(content, main);
   
    tabData.push(content);
   
    tab.onclick = function() { tabChange(this, content) }
  };
  // A.T
});

A few things wrapping some of the codes where missing. Try this :

Code:

// advanced profile modifications intended for phpbb3
/\/u\d+/.test(window.location.pathname) && $(function() {
 
  // change the names of tabs
  // syntax : tabURL : newTabName
  // if a tab isn't present use the tab URL name without the user ID
  var tabNames = {
    'wall' : 'Messages',
    'default' : 'Profile',
    'stats' : 'Stats',
    'friends' : 'Friends',
    'contact' : 'Contact'
  },
 
  // create simple tabs here
  // you should include the name of the tab and HTML content
  // separate multiple tabs by a comma
  newTabs = {
    // START TABS
 
    tab1 : {
      name : 'My Pets',
      html : '<span style="color:red">http://awesomeanimals.forumakers.com/h2-pets</span>'
    }
   
    // END TABS
  }
   
  // technical data is below
  // if you've no experience in JavaScript, it's recommend you don't touch anything below
  main = document.getElementById('cp-main'), tablist = document.getElementById('tabs').getElementsByTagName('UL')[0], id = window.location.pathname.replace(/\/(u\d+).*/,'$1'), tabData = [];
 
  // change tab names
  for (var a = tablist.getElementsByTagName('A'), i = 0, j = a.length, u; i < j; i++) {
    for (var k in tabNames) a[i].href.replace(/.*?\/(u\d+.*)/,'$1').replace(/#$/,'') == ( id + k.replace(/default/,'') ) && ( a[i].firstChild.innerHTML = tabNames[k] );
 
    if (/activetab/.test(a[i].parentNode.className)) {
      a[i].parentNode.onclick = function() { tabChange(this, main) }
    }
  }
 
  // creates our tabs
  for (var k in newTabs) createTab(newTabs[k].name, newTabs[k].html);
 
  // hides all content and removes the activetab classname
  // the arguments passed will be used to show the new active tab
  function tabChange(tab, content) {
    for (var i = 0, j = tabData.length; i < j; i++) tabData[i].style.display = 'none';
    for (var a = tablist.getElementsByTagName('LI'), i = 0, j = a.length; i < j; i++) a[i].className = '';
    main.style.display = 'none';
    content.style.display = '';
    tab.className = 'activetab';
  }
 
  // our tab creator
  // pass along a name and some HTML to create a tab. e.g. createTab('newTab', 'Some content');
  function createTab(name, html) {
    var tab = document.createElement('LI'), content = document.createElement('DIV');
    tab.innerHTML = '<a href="#"><span>' + name + '</span></a>';
    content.innerHTML = '<h1>' + name + '</h1><div class="panel"><div class="inner"><span class="corners-top"><span></span></span>' + html + '<span class="corners-bottom"><span></span></span></div></div>';
    content.style.display = 'none';
    content.className = 'ucp-main';
    content.id = 'cp-main';
 
    tablist.appendChild(tab);
    main.parentNode.insertBefore(content, main);
 
    tabData.push(content);
 
    tab.onclick = function() { tabChange(this, content) }
  };
  // A.T
});

It's still not working.

my mistake, I missed a comma

see if it works now

Code:

// advanced profile modifications intended for phpbb3
/\/u\d+/.test(window.location.pathname) && $(function() {
 
  // change the names of tabs
  // syntax : tabURL : newTabName
  // if a tab isn't present use the tab URL name without the user ID
  var tabNames = {
    'wall' : 'Messages',
    'default' : 'Profile',
    'stats' : 'Stats',
    'friends' : 'Friends',
    'contact' : 'Contact'
  },
 
  // create simple tabs here
  // you should include the name of the tab and HTML content
  // separate multiple tabs by a comma
  newTabs = {
    // START TABS
 
    tab1 : {
      name : 'My Pets',
      html : '<span style="color:red">http://awesomeanimals.forumakers.com/h2-pets</span>'
    }
 
    // END TABS
  },
 
  // technical data is below
  // if you've no experience in JavaScript, it's recommend you don't touch anything below
  main = document.getElementById('cp-main'), tablist = document.getElementById('tabs').getElementsByTagName('UL')[0], id = window.location.pathname.replace(/\/(u\d+).*/,'$1'), tabData = [];
 
  // change tab names
  for (var a = tablist.getElementsByTagName('A'), i = 0, j = a.length, u; i < j; i++) {
    for (var k in tabNames) a[i].href.replace(/.*?\/(u\d+.*)/,'$1').replace(/#$/,'') == ( id + k.replace(/default/,'') ) && ( a[i].firstChild.innerHTML = tabNames[k] );
 
    if (/activetab/.test(a[i].parentNode.className)) {
      a[i].parentNode.onclick = function() { tabChange(this, main) }
    }
  }
 
  // creates our tabs
  for (var k in newTabs) createTab(newTabs[k].name, newTabs[k].html);
 
  // hides all content and removes the activetab classname
  // the arguments passed will be used to show the new active tab
  function tabChange(tab, content) {
    for (var i = 0, j = tabData.length; i < j; i++) tabData[i].style.display = 'none';
    for (var a = tablist.getElementsByTagName('LI'), i = 0, j = a.length; i < j; i++) a[i].className = '';
    main.style.display = 'none';
    content.style.display = '';
    tab.className = 'activetab';
  }
 
  // our tab creator
  // pass along a name and some HTML to create a tab. e.g. createTab('newTab', 'Some content');
  function createTab(name, html) {
    var tab = document.createElement('LI'), content = document.createElement('DIV');
    tab.innerHTML = '<a href="#"><span>' + name + '</span></a>';
    content.innerHTML = '<h1>' + name + '</h1><div class="panel"><div class="inner"><span class="corners-top"><span></span></span>' + html + '<span class="corners-bottom"><span></span></span></div></div>';
    content.style.display = 'none';
    content.className = 'ucp-main';
    content.id = 'cp-main';
 
    tablist.appendChild(tab);
    main.parentNode.insertBefore(content, main);
 
    tabData.push(content);
 
    tab.onclick = function() { tabChange(this, content) };
  };
  // A.T
});

It's working but it's displaying the url inside the tab.

If you want to format an URL, you'll have to use HTML. The syntax for a link in HTML is :

Code:

<a href="/URL">LINK_TEXT</a>

/URL is where your link goes.
LINK_TEXT is the text of your link.

So we would get :

Code:

<a href="http://awesomeanimals.forumakers.com/h2-pets">LINK</a>

OK it's working but not the way I was trying to make it. I was hoping the picture would be displayed in the tab. Not by clicking on a link.

Hmm, you want to display the page itself ? You could try using an iframe. Replace it with this :

Code:

<iframe src="http://awesomeanimals.forumakers.com/h2-pets" style="width:100%;height:500px;"></iframe>

What I would like is for the picture to display here.

This picture ?
http://i19.servimg.com/u/f19/19/14/32/97/my_pet10.jpg

If so, you can display it with the following syntax.

Code:

<img src="http://i19.servimg.com/u/f19/19/14/32/97/my_pet10.jpg"/>

It worked! Thank you so much!

Oh, one last question. What is the url for view profile? I keep getting one that takes the users to my profile and not their's.

If it's for use on the profile page, this should work :

Code:

<a href="'+window.location.pathname.replace(/(\/u\d+).*/,'$1')+'">View Profile</a>

It's for one of the tabs in my forum header. I need the url of view profile so I can set it for the profile button in the header.

Are you adding this link in the Administration Panel or by a Script ?

In the Administration Panel in the Header and Navigation section.

There's no placeholder for the user id that I know of, so a little JavaScript can be used to change the URL. First go back to the navigation management to edit your custom navlink. Make its redirection URL the following :

Code:

#{USERLINK}

Save and then go to Modules > JS codes management > create a new script

Placement : in all the pages
Paste the following code and submit

Code:

$(function(){
  for (var a = document.getElementsByTagName('A'), i=0, j=a.length; i<j; i++) if (/#\{USERLINK\}$/.test(a[i].href)) a[i].href = '/u' + _userdata.user_id;
});

That should change any link which contains #{USERLINK} as the URL with the user's profile link.

It worked perfect. Thanks!

You're welcome ^^

Topic archived

Have a nice day.