The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

User Profile Tabs

View previous topic View next topic Go down

Solved User Profile Tabs

Post by Awesome Animals on March 17th 2015, 3:46 am

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. Smile
Ashley

URL:http://awesomeanimals.forumakers.com


Last edited by Awesome Animals on March 29th 2015, 7:19 am; edited 2 times in total

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by brandon_g on March 17th 2015, 4:44 am

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


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5143
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 17th 2015, 6:22 pm

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

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 17th 2015, 7:32 pm

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 ..? )

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 18th 2015, 1:14 am

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.

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 19th 2015, 7:20 pm

Hello?

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 19th 2015, 10:26 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 12:22 am

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

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 1:44 am

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

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 20th 2015, 2:10 am

Could you post the modified code here ? Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 2:16 am

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
});

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 20th 2015, 2:19 am

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
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 2:21 am

It's still not working.

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 20th 2015, 2:26 am

my mistake, I missed a comma TT

see if it works now fufufu
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
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 2:30 am

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

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 20th 2015, 2:36 am

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>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 2:49 am

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.

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 20th 2015, 2:51 am

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>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 3:01 am

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

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 20th 2015, 8:29 am

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"/>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 6:06 pm

It worked! Thank you so much! :party:

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 20th 2015, 6:39 pm

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.

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 21st 2015, 6:06 am

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>


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 22nd 2015, 10:01 pm

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.

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 22nd 2015, 11:12 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 24th 2015, 3:21 am

In the Administration Panel in the Header and Navigation section.

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 24th 2015, 10:05 am

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Awesome Animals on March 29th 2015, 7:17 am

It worked perfect. Thanks!

Awesome Animals
New Member

Posts : 22
Reputation : 1
Language : English

http://awesomeanimals.forumakers.com

Back to top Go down

Solved Re: User Profile Tabs

Post by Ange Tuteur on March 29th 2015, 9:07 pm

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum