Rename Profile Tabs

[Stinky666]

Not sure if this is the correct board or not tbh, everything is rather confusing as to where it should be posted.
I want to change the words in the tabs for the profile from saying, for example "Summary, Following, Friends, etc" to "Main, Stalking, My Peeps, etc"

I can find each individual tab to edit the page of, but I can't see how to rename the actual tabs themselves.

Much appreciated.

[Peter]

This board is getting help with something you are creating.  So if you are creating a code, plugin, layout modification, CSS change, then you would come in here so people can guide you.  What it is not, is a board to request something to be made (i.e plugin), which might confuse people.

As to your question; there are a few ways to go about that.  One way would be to loop through the tabs.  Or if you wish to target a few of them for changing, then you would need to use a CSS Selector that does matching, because there is no way to distinguish between the li's.

Here's the HTML for the tabs...


<div class="ui-tabMenu">
    <ul class="ui-helper-clearfix">
        <li class="ui-active"><a href="/user/1">Summary</a></li><li><a href="/user/1/activity">Activity</a></li><li><a href="/user/1/following">Following</a></li><li><a href="/user/1/friends">Friends</a></li><li><a href="/user/1/groups">Groups</a></li><li><a href="/user/1/notifications">Notifications</a></li><li><a href="/user/1/gift">Gift</a></li>
    </ul>
</div>
So really, there is no simple way to get the "Summary" tab, so this is where you could use a selector to do some matching, or you could try and match based on the HTML.  So many ways to do it, I will show you one way, though it isn't the best way if you want to change quite a few...


$("div.ui-tabMenu ul li a:contains(Summary)")

So this would give us back the summary tab "a" element.

Like I said there are many ways to do this, if you want something different, let us know.

[Stinky666]

I'm honestly confused haha. I'm no coder at all. I was messing slightly yesterday with the "Admin > Themes > Layout Templates > User Profile", and noticed I could change stuff. I thought that somewhere, maybe, in there would be how to change the tabs very simply.. but is there no "simple" way? By simple I mean lets say someone with no coding knowledge, or only knows a BARE minimum at least...



For something like this, is this the correct board to be asking help? For future reference and for nows.

[Peter]

Ah Ok, well if you wanted to do it via the template, then you would need to check each text and change it to what you want...




<div class="ui-tabMenu">
    <ul class="ui-helper-clearfix">
        {foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
    </ul>
</div>

You could do an if else, am unsure what other logic is supported (i.e switch).

[Texas]

I'm actually in the middle of writing a plugin for this.

Edit: I'm finished, you can find it on this thread.

[Stinky666]

2 Peters replying =O..

To Peter, although you think you're explaining in simple terms, you're honestly not lol.
I really do appreciate your help though. But I am really confused and don't know what is going on.

I originally thought these could easily be changed like the words "View Profile - Stinky666 (stinky666)", but I was mistaken.
Kind of seemed like it would be, pity it isn't. But then I dunno anything about code.

[Peter]

Nov 27, 2012 9:19:30 GMT -8 Stinky666 said:

2 Peters replying =O..

To Peter, although you think you're explaining in simple terms, you're honestly not lol.
I really do appreciate your help though. But I am really confused and don't know what is going on.

I originally thought these could easily be changed like the words "View Profile - Stinky666 (stinky666)", but I was mistaken.
Kind of seemed like it would be, pity it isn't. But then I dunno anything about code.

This board is really aimed at people with a little bit of coding knowledge, so it would help you had some

While my post may have been complicated to you, it's really not

[Stinky666]

Nov 27, 2012 10:35:38 GMT -8 Peter said:

Nov 27, 2012 9:19:30 GMT -8 Stinky666 said:

2 Peters replying =O..

To Peter, although you think you're explaining in simple terms, you're honestly not lol.
I really do appreciate your help though. But I am really confused and don't know what is going on.

I originally thought these could easily be changed like the words "View Profile - Stinky666 (stinky666)", but I was mistaken.
Kind of seemed like it would be, pity it isn't. But then I dunno anything about code.

This board is really aimed at people with a little bit of coding knowledge, so it would help you had some

While my post may have been complicated to you, it's really not

See there's no where else for code support that I can see, it's all aimed directly at specifics.
I guess General Discussion from now on. Unless you think there's somewhere else I should post stuff like this in future?

I really do appreciate you trying to help though.

[Peter]

I worded my post incorrectly. What I meant to say, was that what I had posted would require some coding knowledge.



This is board should be fine for you to post in if you are wanting to learn how to develop plugins, use template logic etc. Problem is, while something (like my post) is detailed and you still aren't understanding it, then I would start very basic for now.



Create a plugin with a very simple user interface, learn how to get the data from the plugin and use it, learn keys etc. Learn some JavaScript and jQuery API. Start basic, then go from there.

If it's a template change, have a play around with the variables, loops, if, else, elseif etc.  Learn them, and how they work.


You said "I'm no coder at all", so I offered an alternative, and that would be to modify the template layout, you would then need to use else if logic to determine what the current text is in that iteration of the loop, if it matches one you want to change, then use your version of the text, otherwise the else part would use the default.

[Peter]

Nov 26, 2012 18:02:51 GMT -8 Texas said:

I'm actually in the middle of writing a plugin for this.

Edit: I'm finished, you can find it on this thread.

There is no need to have 7 separate loops (very inefficient) that loop through all the links in the DOM

[Texas]

I tried using an autoform but you can't enter variables into this line

lnk.href.match(/activity/i)) {

So the auto form didn't work.

What else could I do?

[Peter]

Nov 27, 2012 12:41:52 GMT -8 Texas said:

I tried using an autoform but you can't enter variables into this line

lnk.href.match(/activity/i)) {

So the auto form didn't work.

What else could I do?

I would have used jQuery, that way I can get only the links inside the div with a class of "ui-tabMenu".

But for that way you are doing it, I would change your loop so that it's just 1.

One way of doing it..


var links = document.getElementsByTagName("a");

for(var a = 0, l = links.length; a < l; a ++){
    var link = links.item(a).firstChild;

    if(link && link.nodeValue){
        switch(link.nodeValue.replace(/\W/g, "")){

            case "Summary":
                links.item(a).innerHTML = "Apples";
                break;

        }
    }
}

[Texas]

Yea I updated it. Now it looks like this.


       var plug_sets = proboards.plugin.get('rename_profile_tabs').settings;
       if(proboards.data('route').name == "user") {

       lnk=document.getElementsByTagName('a');
       for (i=0; i<lnk.length; i++) {
   
       if (plug_sets.summary != "" && plug_sets.summary != "null") {
       if (lnk[i].innerHTML=="Summary") {
       lnk[i].innerHTML=plug_sets.summary;
       }
       }
       if (plug_sets.activity != "" && plug_sets.activity != "null") {
       if (lnk[i].innerHTML=="Activity" && lnk[i].href.match(/activity/i)) {
       lnk[i].innerHTML=plug_sets.activity;
       }
       }
       if (plug_sets.following != "" && plug_sets.following != "null") {
       if (lnk[i].innerHTML=="Following" && lnk[i].href.match(/following/i)) {
       lnk[i].innerHTML=plug_sets.following;
       }
       }
       if (plug_sets.friends != "" && plug_sets.friends != "null") {
       if (lnk[i].innerHTML=="Friends" && lnk[i].href.match(/friends/i)) {
       lnk[i].innerHTML=plug_sets.friends;
       }
       }
       if (plug_sets.groups != "" && plug_sets.groups != "null") {
       if (lnk[i].innerHTML=="Groups" && lnk[i].href.match(/groups/i)) {
       lnk[i].innerHTML=plug_sets.groups;
       }
       }
       if (plug_sets.notifications != "" && plug_sets.notifications != "null") {
       if (lnk[i].innerHTML=="Notifications" && lnk[i].href.match(/notifications/i)) {
       lnk[i].innerHTML=plug_sets.notifications;
       }
       }
       if (plug_sets.gift != "" && plug_sets.gift != "null") {
       if (lnk[i].innerHTML=="Gift" && lnk[i].href.match(/gift/i)) {
       lnk[i].innerHTML=plug_sets.gift;
       }
       }
   }
}