Custom Mini-Profile Creator

[Brian]

The one inside the if statement right after it is missing the part where you add v6 as a class to the mini-profile, hence why it's not working where you're testing it.

[Alan Vende]

Nov 1, 2015 14:55:28 GMT -8 Brian said:

The one inside the if statement right after it is missing the part where you add v6 as a class to the mini-profile, hence why it's not working where you're testing it.

I feel like a complete idiot for that one. I just saw that part. I fixed it and they have finally disappeared. I just don't know why the background isn't showing on the whole mini-profile variant now. Is there any reason for this?

Got that to work! Thanks so much, Brian!

One final question for you: I have found that in some of my mini-profiles that the member group and stars have disappeared.

Example is below:



My staff's mini-profiles are fine, but it's the member ones that this is happening to. Such as the Paranormal Investigator Mini-Profile (Paranormal Investigator in the drop-down).

Thank you so much for your help on this!

[Brian]

Nov 1, 2015 19:00:20 GMT -8 Alan Vende said:

One final question for you: I have found that in some of my mini-profiles that the member group and stars have disappeared.

Example is below:



My staff's mini-profiles are fine, but it's the member ones that this is happening to. Such as the Paranormal Investigator Mini-Profile (Paranormal Investigator in the drop-down).

Thank you so much for your help on this!

That user isn't a member of any groups, and since you only have the variables for the group name and stars in its HTML and not the rank name and stars there's nothing for it to show.

[Alan Vende]

Nov 2, 2015 9:25:27 GMT -8 Brian said:

Nov 1, 2015 19:00:20 GMT -8 Alan Vende said:

One final question for you: I have found that in some of my mini-profiles that the member group and stars have disappeared.

Example is below:



My staff's mini-profiles are fine, but it's the member ones that this is happening to. Such as the Paranormal Investigator Mini-Profile (Paranormal Investigator in the drop-down).

Thank you so much for your help on this!

That user isn't a member of any groups, and since you only have the variables for the group name and stars in its HTML and not the rank name and stars there's nothing for it to show.

Thanks, Brian! I overlooked that detail. It's not required to have both variables in there, is it? I didn't think that you could make it show the user rank if a user wasn't in a group anyway since you can't use if statements?

One other question: What's the code again to make it so the MP only shows if you're in the correct group? I searched this thread, but I can't seem to locate it.

EDIT: What is the URL to make anything go to the user's respective page when you click on it - such as to their profile's user group page? I want to have a link that I say "click here to join the ______ group" and I want to have the link return their profile's member group page so that they can join it. I just don't remember how to do general links.

[Brian]

Nov 2, 2015 11:22:47 GMT -8 Alan Vende said:

Thanks, Brian! I overlooked that detail. It's not required to have both variables in there, is it? I didn't think that you could make it show the user rank if a user wasn't in a group anyway since you can't use if statements?

Every single example that came with the plugin used Javascript if statements to show or hide the rank if the user is in a group.

Nov 2, 2015 11:22:47 GMT -8 Alan Vende said:

One other question: What's the code again to make it so the MP only shows if you're in the correct group? I searched this thread, but I can't seem to locate it.

Page two: support.proboards.com/post/6445474/thread

Nov 2, 2015 11:22:47 GMT -8 Alan Vende said:

EDIT: What is the URL to make anything go to the user's respective page when you click on it - such as to their profile's user group page? I want to have a link that I say "click here to join the ______ group" and I want to have the link return their profile's member group page so that they can join it. I just don't remember how to do general links.

In your HTML you'd use /user/$[user.id] as the URL to direct to the profile page of the user the mini-profile belongs to.

If you mean the profile page of the account you're logged in as you'd need to use Javascript to produce a link that directs them there as there's nothing in the plugin itself that references your own ID. The following obtains the user ID of the account you're logged in as.

pb.data('user').id

[Alan Vende]

Nov 2, 2015 11:49:13 GMT -8 Brian said:

Nov 2, 2015 11:22:47 GMT -8 Alan Vende said:

Thanks, Brian! I overlooked that detail. It's not required to have both variables in there, is it? I didn't think that you could make it show the user rank if a user wasn't in a group anyway since you can't use if statements?

Every single example that came with the plugin used Javascript if statements to show or hide the rank if the user is in a group.

Thank you. I'll go look again!

Nov 2, 2015 11:49:13 GMT -8 Brian said:

Nov 2, 2015 11:22:47 GMT -8 Alan Vende said:

One other question: What's the code again to make it so the MP only shows if you're in the correct group? I searched this thread, but I can't seem to locate it.

Page two: support.proboards.com/post/6445474/thread

Thanks! I used the in-thread search (which is down, I assume, right, like the other searches?) and it didn't yield any results.

EDIT: I thought that that makes it so the piece that's in the JS there only shows. I didn't think that that made it so the MP didn't show if you're not in the respective group. I ask because I put my test account in a group and tried to use my MP to see if it would show if he wasn't in the Head Administrator group and it still put the background of my MP onto that MP as if it was in the group, but the only pieces that didn't show where the pieces encased in the if statements (such as the diamonds), but the background did show.

Nov 2, 2015 11:49:13 GMT -8 Brian said:

Nov 2, 2015 11:22:47 GMT -8 Alan Vende said:

EDIT: What is the URL to make anything go to the user's respective page when you click on it - such as to their profile's user group page? I want to have a link that I say "click here to join the ______ group" and I want to have the link return their profile's member group page so that they can join it. I just don't remember how to do general links.

In your HTML you'd use /user/$[user.id] as the URL to direct to the profile page of the user the mini-profile belongs to.

If you mean the profile page of the account you're logged in as you'd need to use Javascript to produce a link that directs them there as there's nothing in the plugin itself that references your own ID. The following obtains the user ID of the account you're logged in as.

pb.data('user').id

Could I encompass that in an if statement so I can add a class to it so I can reference it in CSS so I can position it and put a background on it and whatnot?

[Brian]

Nov 2, 2015 12:36:56 GMT -8 Alan Vende said:

EDIT: I thought that that makes it so the piece that's in the JS there only shows. I didn't think that that made it so the MP didn't show if you're not in the respective group. I ask because I put my test account in a group and tried to use my MP to see if it would show if he wasn't in the Head Administrator group and it still put the background of my MP onto that MP as if it was in the group, but the only pieces that didn't show where the pieces encased in the if statements (such as the diamonds), but the background did show.

I'm not sure what you're referring to then. Perhaps the other custom field that's usable in the plugin? If it's not that then I'd have no clue.

Nov 2, 2015 12:36:56 GMT -8 Alan Vende said:

Could I encompass that in an if statement so I can add a class to it so I can reference it in CSS so I can position it and put a background on it and whatnot?

Yes. Remember once again that it's referencing the ID of the account you're logged in as, not the account the mini-profile belongs to.

[Alan Vende]

Nov 2, 2015 13:03:32 GMT -8 Brian said:

Nov 2, 2015 12:36:56 GMT -8 Alan Vende said:

EDIT: I thought that that makes it so the piece that's in the JS there only shows. I didn't think that that made it so the MP didn't show if you're not in the respective group. I ask because I put my test account in a group and tried to use my MP to see if it would show if he wasn't in the Head Administrator group and it still put the background of my MP onto that MP as if it was in the group, but the only pieces that didn't show where the pieces encased in the if statements (such as the diamonds), but the background did show.

I'm not sure what you're referring to then. Perhaps the other custom field that's usable in the plugin? If it's not that then I'd have no clue.

I don't think I'm explaining it correctly, but I'm not really sure how to explain it. You said in this thread a while ago that the Helpful Member Group MP isn't showing on the MP if the user isn't in that group and you made that possible by putting the if statement. I thought you could make it so the whole MP doesn't show for a person who isn't in the respective group. Does that help any? Sorry!

Nov 2, 2015 12:36:56 GMT -8 Alan Vende said:

Could I encompass that in an if statement so I can add a class to it so I can reference it in CSS so I can position it and put a background on it and whatnot?

Yes. Remember once again that it's referencing the ID of the account you're logged in as, not the account the mini-profile belongs to.[/quote]

That's what I want - it to reference the ID of the account that you're logged in as, since my members will be clicking a variant of my MP. Sorry for the confusion. Thank you! I'll write something up and come back if I have further questions!

[Alan Vende]

Nov 2, 2015 13:03:32 GMT -8 Brian said:

Nov 2, 2015 12:36:56 GMT -8 Alan Vende said:

Could I encompass that in an if statement so I can add a class to it so I can reference it in CSS so I can position it and put a background on it and whatnot?

Yes. Remember once again that it's referencing the ID of the account you're logged in as, not the account the mini-profile belongs to.

This is my (terrible) attempt at writing JS with the code you gave me. I doubt that this is correct, but...

if(user.group){
   if(user.group.name == "Head Administrator"){
       ('<div class="user_custom_link">pb.data('user').id</div>');
   }
}
...I attempted to use what I had above it for the staff-diamond, but if it's not correct, is it close at all?

[Brian]

Nov 2, 2015 13:16:55 GMT -8 Alan Vende said:

I don't think I'm explaining it correctly, but I'm not really sure how to explain it. You said in this thread a while ago that the Helpful Member Group MP isn't showing on the MP if the user isn't in that group and you made that possible by putting the if statement. I thought you could make it so the whole MP doesn't show for a person who isn't in the respective group. Does that help any? Sorry!

The moment you place anything in the HTML component of the mini-profile it's going to replace the original regardless of anything you place in the Javascript field. There was never an instance where I mentioned the ability to replace the mini-profile only under certain circumstances because that's only possible by exclusively using the CSS and Javascript components which I can't be bothered to inevitably debug on anyone's behalf (and really shouldn't have to because designing things for people isn't what this thread is for).

Nov 2, 2015 13:31:38 GMT -8 Alan Vende said:

This is my (terrible) attempt at writing JS with the code you gave me. I doubt that this is correct, but...

if(user.group){
   if(user.group.name == "Head Administrator"){
       ('<div class="user_custom_link">pb.data('user').id</div>');
   }
}
...I attempted to use what I had above it for the staff-diamond, but if it's not correct, is it close at all?

The if statements are correct, but the line inside of them doesn't do anything. All you did in the example was specify a string. There's nothing on that line specifying that the page should do anything with that string.

[Alan Vende]

Nov 2, 2015 14:32:01 GMT -8 Brian said:

Nov 2, 2015 13:16:55 GMT -8 Alan Vende said:

I don't think I'm explaining it correctly, but I'm not really sure how to explain it. You said in this thread a while ago that the Helpful Member Group MP isn't showing on the MP if the user isn't in that group and you made that possible by putting the if statement. I thought you could make it so the whole MP doesn't show for a person who isn't in the respective group. Does that help any? Sorry!

The moment you place anything in the HTML component of the mini-profile it's going to replace the original regardless of anything you place in the Javascript field. There was never an instance where I mentioned the ability to replace the mini-profile only under certain circumstances because that's only possible by exclusively using the CSS and Javascript components which I can't be bothered to inevitably debug on anyone's behalf (and really shouldn't have to because designing things for people isn't what this thread is for).

I guess I was mixing up things that you said in the thread then, sorry about that. I thought you said you had the Helpful Member where the MP for it isn't to be displayed unless the user is apart of that group, which I thought was by the if statements, but it looks like the if statements can only do individual pieces of the MP, not the whole thing.

I probably make no coherent sense. Sorry!

Nov 2, 2015 14:32:01 GMT -8 Brian said:

Nov 2, 2015 13:31:38 GMT -8 Alan Vende said:

This is my (terrible) attempt at writing JS with the code you gave me. I doubt that this is correct, but...

if(user.group){
   if(user.group.name == "Head Administrator"){
       ('<div class="user_custom_link">pb.data('user').id</div>');
   }
}
...I attempted to use what I had above it for the staff-diamond, but if it's not correct, is it close at all?

The if statements are correct, but the line inside of them doesn't do anything. All you did in the example was specify a string. There's nothing on that line specifying that the page should do anything with that string.

if(user.group){
   if(user.group.name == "Head Administrator"){
       ('<div class="user_custom_link">window.open("pb.data('user').id")</div>');
   }
}
Is this any closer? It opens the window that's supposed to display the data. I found it here.

[Brian]

Nov 2, 2015 16:23:12 GMT -8 Alan Vende said:

Is this any closer? It opens the window that's supposed to display the data. I found it here.

Nope.

The line doesn't reference the mini-profile in any way. There's nothing telling the page to append anything to the mini-profile. It's still literally just HTML inserted into a text string that's inside parenthesis. In its current state it's the equivalent of me randomly inserting this by itself on a single line:

"test";

[Alan Vende]

Nov 2, 2015 17:09:20 GMT -8 Brian said:

Nov 2, 2015 16:23:12 GMT -8 Alan Vende said:

Is this any closer? It opens the window that's supposed to display the data. I found it here.

Nope.

The line doesn't reference the mini-profile in any way. There's nothing telling the page to append anything to the mini-profile. It's still literally just HTML inserted into a text string that's inside parenthesis. In its current state it's the equivalent of me randomly inserting this by itself on a single line:

"test";

I don't think I fully understand what you're saying then. I looked on W3Schools.com and that's what I found. I'm not sure how to word what I want to look for. I want it to open in a new window, which I thought that did, but it doesn't?

[Brian]

Nov 2, 2015 17:14:46 GMT -8 Alan Vende said:

I don't think I fully understand what you're saying then. I looked on W3Schools.com and that's what I found. I'm not sure how to word what I want to look for. I want it to open in a new window, which I thought that did, but it doesn't?

You specified that you wanted to add a link to the mini-profile, correct? You've already done this exact thing previously with the diamond badge.

if(user.group){
    if(user.group.name == "Head Administrator"){
        $(this).append('<div class="staff_diamond"><a href="http://psychic-psyghtings.proboards.com/thread/755/new-badges-on-mini-profiles"><img src="http://storage.proboards.com/6033396/i/z0ia563wclNdTJSvDxFq.png"></a></div>');
    }
}

So with that in mind, do the exact same thing again but format the link to point to your preferred destination.

$(this).append('<div class="add-to-group"><a href="/user/' + pb.data('user').id + '/groups">Text goes here</a></div>');

As I mentioned several pages back you need to read your statements backwards to interpret how they work. In the above line the HTML placed inside the .append() function is being appended to $(this), where $(this) stands for the mini-profile as explained by the help window included in the plugin.

The easiest way to find the Javascript or jQuery you need to use is to type the name of the coding language you're using into Google, followed by a short description containing simple terms that explain what you're trying to do. Typing "jquery insert html" gives me the jQuery API page for the .append() function as the first result.

[Alan Vende]

Nov 2, 2015 17:35:31 GMT -8 Brian said:

So with that in mind, do the exact same thing again but format the link to point to your preferred destination.

$(this).append('<div class="add-to-group"><a href="/user/' + pb.data('user').id + '/groups">Text goes here</a></div>');

As I mentioned several pages back you need to read your statements backwards to interpret how they work. In the above line the HTML placed inside the .append() function is being appended to $(this), where $(this) stands for the mini-profile as explained by the help window included in the plugin.

The easiest way to find the Javascript or jQuery you need to use is to type the name of the coding language you're using into Google, followed by a short description containing simple terms that explain what you're trying to do. Typing "jquery insert html" gives me the jQuery API page for the .append() function as the first result.

I never thought that the append function could be used for links and things like that. I thought it was only for images and the likes of those.

I think I was overthinking this to the nth degree. That is almost exactly like what the image is, like you said in the beginning of your reply to me. I was thinking it was something totally different than append, though, that's why I was getting confused. I was second-guessing myself and not letting myself think through it like you said.

So, to make that work with the HTML, I would:

HTML

<div class="add-to-group"></div>
JS

$(this).append('<div class="add-to-group"><a href="/user/' + pb.data('user').id + '/groups">Text goes here</a></div>');
Since the JS is what appends what is in the div, I leave that blank, correct?

EDIT: What you gave me appended the link to the MP, but there's a stray hover effect above where I want the button to go. I checked in my CSS and I changed the CSS to the class that was specified in the jS (add-to-group).

Is there a reason that this is happening? Unless I have a stray character my eyes aren't seeing?



It's right under "Investigator's Group" and above the Request to Join. The Request to Join button should be in the place of the small hover over above it, inside the box there. All code I have denotes that it should be also, yet it's not showing there.

v6 HTML

<div class="switch v6">
   $[user]
   <div class="investigator-text"><p>Are you a paranormal investigator and want to prominently display that on your full- and mini-profiles?</p>
       <br />
       <p>If so, please click the button below to be directed to the Groups tab of your profile where you can request to join the Paranormal Investigator's Group.</p>
       <div class="add-to-group"></div>
   </div>
</div>
v6 CSS

/* v6 CSS */
.mini-profile.mp-variant.v6 {
   background-color: #000000;
}
.mini-profile.mp-variant .investigator-text {
   color: #FF9933;
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 2px 2px 2px #FF9933;
   padding: 5px;
   margin-top: 10px;
   text-align: left;
}
.mini-profile.mp-variant.v6 .staff_diamond,
.mini-profile.mp-variant.v6 .short-black-banner {
display: none !important;
}
.mini-profile.mp-variant.v6 .add-to-group {
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   background-color: #FFFFFF;
   text-align: center;
   margin-top: 5px;
}
.mini-profile.mp-variant.v6 .add-to-group:hover {
   background-color: #FF9933;
   color: #FFFFFF;
   font-weight: bold;
   box-shadow: 2px 2px 2px #FFFFFF;
}
/* // End v6 CSS \\ */
I changed out what would have been the hover above it, yet it's still there. It looks like a cache issue, but I just cleared it and came back. It's a stray something in the code, but I changed all instances of the prior class to this one.