User Profile Tabs
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
User Profile Tabs
Technical Details
Forum version : phpBB3Position : 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
Last edited by Awesome Animals on Sun 29 Mar 2015 - 7:19; edited 2 times in total
Re: User Profile Tabs
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 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.

Re: User Profile Tabs
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.

Re: User Profile Tabs
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 ..? )
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 ..? )
Re: User Profile Tabs
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.
Re: User Profile Tabs
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 :
To change the tab names, modify the contents of this object :
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 :
I've two example in there. To create a new tab, write this inside the object above, for example :
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
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
Re: User Profile Tabs
I tried to create a new tab using the code but for some reason it isn't working.
Re: User Profile Tabs
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
});
Re: User Profile Tabs
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
});
Re: User Profile Tabs
my mistake, I missed a comma
see if it works now

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
});
Re: User Profile Tabs
If you want to format an URL, you'll have to use HTML. The syntax for a link in HTML is :
/URL is where your link goes.
LINK_TEXT is the text of your link.
So we would get :
- 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>
Re: User Profile Tabs
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.
Re: User Profile Tabs
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>
Re: User Profile Tabs
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.
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"/>
Re: User Profile Tabs
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.
Re: User Profile Tabs
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>
Re: User Profile Tabs
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.
Re: User Profile Tabs
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 :
Save and then go to Modules > JS codes management > create a new script
Placement : in all the pages
Paste the following code and submit
That should change any link which contains #{USERLINK} as the URL with the user's profile link.
- 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.
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum