Extra Tab on Profile?

[Tiffy-Bean]

How do I do this?  



I want to have another tab appear on user profiles that is specific to just their user i.d. like the jackpot wheel plugin.  How do I go about making another tab that is functional that way?

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ - - you made the prize wheel plugin right?  can you halllp? XD

[Tiffy-Bean]

BUMP

[Brian]

I think most plugins do this by checking against the URL of the profile page. Each tab has its own path following the user ID (/user/1/following, /user/1/notifications, etc.), and if you specify a path that the forum doesn't recognize it just takes you to the Summary tab again instead of an error page so the plugins exploit that by replacing the page contents on an unused path.

Example of necessary Javascript (this would go on a new line at the very bottom of Themes > Layout Templates > User Profile):

<script type="text/javascript">
if(pb.data('route').name == "user"){
    if(location.pathname.match('/user/'+pb.data('page').member.id+'/yourtabname')){
        $('.original-tab-content, .extra-tab-content').toggle();
    }
}
</script>

The above if statements would toggle which content shows whenever you visit /user/(user ID)/yourtabname on any profile, provided that content has the class extra-tab-content tied to it.

In Themes > Layout Templates > User Profile on the default layout you can replace this line:

<div class="pad-all-double ui-helper-clearfix clear">

With this:

<div class="original-tab-content pad-all-double ui-helper-clearfix clear">

Then you'd add this either before that line or after its closing </div> (it doesn't matter which since only one will ever be showing at a time) and place your custom tab content inside of it:

<div class="extra-tab-content" style="display: none;">
    Your custom content here.
</div>

Edit: This doesn't cover adding the actual clickable tab but that's just done via plain old HTML. I'm sure you know all about that if you're already at the point where you're trying to add a new tab with its own content.

[Lynx]

Dec 13, 2016 11:08:48 GMT -8 Brian said:

I think most plugins do this by checking against the URL of the profile page. Each tab has its own path following the user ID (/user/1/following, /user/1/notifications, etc.), and if you specify a path that the forum doesn't recognize it just takes you to the Summary tab again instead of an error page so the plugins exploit that by replacing the page contents on an unused path.

Example of necessary Javascript (this would go on a new line at the very bottom of Themes > Layout Templates > User Profile):

<script type="text/javascript">
if(pb.data('route').name == "user"){
    if(location.pathname.match('/user/'+pb.data('page').member.id+'/yourtabname')){
        $('.original-tab-content, .extra-tab-content').toggle();
    }
}
</script>

The above if statements would toggle which content shows whenever you visit /user/(user ID)/yourtabname on any profile, provided that content has the class extra-tab-content tied to it.

In Themes > Layout Templates > User Profile on the default layout you can replace this line:

<div class="pad-all-double ui-helper-clearfix clear">

With this:

<div class="original-tab-content pad-all-double ui-helper-clearfix clear">

Then you'd add this either before that line or after its closing </div> (it doesn't matter which since only one will ever be showing at a time) and place your custom tab content inside of it:

<div class="extra-tab-content" style="display: none;">
    Your custom content here.
</div>

This is very helpful, as I was thinking of trying something with adding a tab to the profile page, but didn't know how. Now to just figure out how to work it inside a plugin.

Thank you very much for this.

[Brian]

Lynx: It's pretty much the same in a plugin, only instead of adding HTML to the template itself you'd be targeting elements on the page and replacing their contents upon page load. The Javascript that identifies the route and URL is the only part that's really unique to this process.

[Tiffy-Bean]

thecityofsin.freeforums.net/user/1/

doing it here brian..added the link "comments" but when it goes to the new page..it does go to thecityofsin.freeforums.net/user/1/comments

(mind you I haven't stylized it yet via CSS)

It doesn't display the content I want there. Instead, it just shows the normal profile stuff but says it's on that page...I don't know what's broken.

[Tiffy-Bean]

actually I just realized all the buttons are doing that..what in the heck did I do...all the custom ones anyway (send xp, prize wheel, and tab I just made)

[Brian]

I have no explanation for the other buttons, but you appear to have added the HTML incorrectly. You added the extra-tab-content div inside of the original-tab-content element instead of before or after it.

[Tiffy-Bean]

Dec 13, 2016 14:29:20 GMT -8 Brian said:

I have no explanation for the other buttons, but you appear to have added the HTML incorrectly. You added the extra-tab-content div inside of the original-tab-content element instead of before or after it.

thank you I fixed that.  <3

[Tiffy-Bean]

working..I made an additional tab for comments only...using the Profile Comments plugin by Wormopolis.
I haven't stylized it but now I do have an extra tab on profiles that just displays comments.  Thank you for all your help!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Dec 14, 2016 5:03:11 GMT -8 Tiffy-Bean said:

working..I made an additional tab for comments only...using the Profile Comments plugin by Wormopolis .
I haven't stylized it but now I do have an extra tab on profiles that just displays comments.  Thank you for all your help!

I just use yootil for that. Peter made a couple easy commands to create a new tab and have it like the others. If it's Styled u could probably target it copy and then append a copy, change the name and the URL of course. And when the page loads with that URL just target the profile section and .remove it on page load, then add your own content there. Basically all a new tab does is remove the profile section and replace it with your own info. That makes it look like its on a new page but it's just a modified profile page. That's how wormo is able to take the custom profile fields. He loads the user page, hides all the content, saves the custom profile fields, clears the data, and allows u to design a page in its place with the information he removed for you.

[Tiffy-Bean]

Dec 15, 2016 4:49:59 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Dec 14, 2016 5:03:11 GMT -8 Tiffy-Bean said:

working..I made an additional tab for comments only...using the Profile Comments plugin by Wormopolis .
I haven't stylized it but now I do have an extra tab on profiles that just displays comments.  Thank you for all your help!

I just use yootil for that. Peter made a couple easy commands to create a new tab and have it like the others. If it's Styled u could probably target it copy and then append a copy, change the name and the URL of course. And when the page loads with that URL just target the profile section and .remove it on page load, then add your own content there. Basically all a new tab does is remove the profile section and replace it with your own info. That makes it look like its on a new page but it's just a modified profile page. That's how wormo is able to take the custom profile fields. He loads the user page, hides all the content, saves the custom profile fields, clears the data, and allows u to design a page in its place with the information he removed for you.

I won't lie, that all went over my head.  I'm not sure how you 'use' yootil.  I'm not even sure how yootil works.  I think this is beyond my knowledge base at the moment, but thank you for taking the time to attempt to explain it to me even if I just went huh over all this.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Dec 15, 2016 6:01:33 GMT -8 Tiffy-Bean said:

Dec 15, 2016 4:49:59 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

I just use yootil for that. Peter made a couple easy commands to create a new tab and have it like the others. If it's Styled u could probably target it copy and then append a copy, change the name and the URL of course. And when the page loads with that URL just target the profile section and .remove it on page load, then add your own content there. Basically all a new tab does is remove the profile section and replace it with your own info. That makes it look like its on a new page but it's just a modified profile page. That's how wormo is able to take the custom profile fields. He loads the user page, hides all the content, saves the custom profile fields, clears the data, and allows u to design a page in its place with the information he removed for you.

I won't lie, that all went over my head.  I'm not sure how you 'use' yootil.  I'm not even sure how yootil works.  I think this is beyond my knowledge base at the moment, but thank you for taking the time to attempt to explain it to me even if I just went huh over all this.

Yootil was designed to make proboards Easy to use. It's basically the same as the jquery of JavaScript. Jquery does JavaScript codes but easier. Yootil runs many JavaScript codes but it takes half of the lines to write. Also makes things easier to update and troubleshoot.
All your custom tabs are on the same page. When you click one it basically uses white out on the profile area and prints something new in its place.

[Tiffy-Bean]

that's awesome..except I don't know the proper codes to use with it. If I use JQuery, I can look things up and figure it out..but if Yootil uses easier codes, it's still like rocket science to me cause I don't know the proper codes that work with it..if that makes sense.

I do a lot of researching when I'm coding since I'm still learning. If you have a suggestion how I can use yootil to accomplish this easier, I'd love that. I've been thinking of doing individual tabs on the members list too so I can separate it by group, which I'm assuming it'd be easier to do multiple tabs using yootil if I can figure out how best to use it.

[Lynx]

Dec 16, 2016 11:38:01 GMT -8 Tiffy-Bean said:

that's awesome..except I don't know the proper codes to use with it. If I use JQuery, I can look things up and figure it out..but if Yootil uses easier codes, it's still like rocket science to me cause I don't know the proper codes that work with it..if that makes sense.

I do a lot of researching when I'm coding since I'm still learning. If you have a suggestion how I can use yootil to accomplish this easier, I'd love that. I've been thinking of doing individual tabs on the members list too so I can separate it by group, which I'm assuming it'd be easier to do multiple tabs using yootil if I can figure out how best to use it.

Yootil API: yootil.pixeldepth.net/

Specifically: yootil.pixeldepth.net/#!/api/yootil.create - profile_tab

EDIT: Seems the link breaks in the 2nd one. Just go to the 1st link and click on yootil.create