Custom Mini-Profile Creator

[Brian]

Sept 15, 2015 11:27:56 GMT -8 Alan Vende said:

I fixed that error. Thank you for that. That didn't make a change in my mini profile, though.

I'm on TestTheme3, by the way, of my forum while testing this out.

You don't have a space between the classes in your CSS so the browser is interpreting it as searching for an object with both the mini-profile class and the class following it.

[Alan Vende]

I put the space and now it's showing. Thanks so much, Brian!

[Alan Vende]

Brian: For some reason, I can't get my Graphic Design Artist MP to work. I copy and pasted the CSS and JS and manipulated it for that MP, but it won't show up on the Mini Profile - it doesn't show an error message either, so I know that it's right, I just can't get it to show up on the MP for some reason. It's in the same as I showed before - the Test MP here.

[Brian]

Sept 15, 2015 14:37:25 GMT -8 Alan Vende said:

Brian: For some reason, I can't get my Graphic Design Artist MP to work. I copy and pasted the CSS and JS and manipulated it for that MP, but it won't show up on the Mini Profile - it doesn't show an error message either, so I know that it's right, I just can't get it to show up on the MP for some reason. It's in the same as I showed before - the Test MP here.

Last time you posted you were missing a closing brace on one of your if statements, but that seems to be corrected now. The error icon only shows if you've selected a mini-profile that doesn't exist within the plugin. There's no way for me to account for coding errors, so if one of your mini-profiles doesn't show but doesn't produce the error icon that's likely the problem.

In the case of this one the mini-profile theme you've cited isn't selected in that user's profile and thus will not show.

[Alan Vende]

Thanks, Brian. I was adding my account to member groups too quick and they weren't registering, I think.

[Alan Vende]

Brian: I have two new MPs that I'm creating. I was wondering if it was possible to make it so a certain custom profile field, only one, would display in the mini profile.

Also, how can I make it so the information displays as bullets in the mp?

Thanks!

[Alan Vende]

Also, how do you make it so the width of the MP is the same width across browsers? Do you use this: border-radius: 0; -webkit-border-radius: 0; overflow: visible;?

EDIT: I also have a mini-profile field that I want to be displayed as a dropdown in mini-profiles. I assume that I would have to use JS in order to make this work, right? How could I go about it?

I wanted to make it so every line is a new line on the mini-profile. Much like what the Sub-board Manager Plugin does - making it an option to have the sub-boards displayed in a drop-down list.

EDIT 2: My staff and I were also wanting to make it so people could have multiple badges on the top right of their mini-profiles. Much like what's on my profile, but have it so all of the badges show up when the one badge that's on the mini-profile is hovered over.

Thanks so much for your guidance in this!

[Brian]

Sept 17, 2015 19:23:07 GMT -8 Alan Vende said:

Brian: I have two new MPs that I'm creating. I was wondering if it was possible to make it so a certain custom profile field, only one, would display in the mini profile.

You can use $[user.customfieldname], substituting customfieldname with the name of one of your custom fields all in lowercase with no spaces and only alphanumeric characters (no punctuation, no special characters, etc.).

For example, Mini-Profile Theme would become $[user.miniprofiletheme] since you'd need to strip out the hyphen and spaces. You can also reference it in the Javascript component using user.miniprofiletheme just like how the other variables work.

Sept 17, 2015 19:23:07 GMT -8 Alan Vende said:

Also, how can I make it so the information displays as bullets in the mp?

Bullets are generated using the HTML <ul> tag in conjunction with the <li> tag.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

Also, how do you make it so the width of the MP is the same width across browsers? Do you use this: border-radius: 0; -webkit-border-radius: 0; overflow: visible;?

I used the width CSS property.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

EDIT: I also have a mini-profile field that I want to be displayed as a dropdown in mini-profiles. I assume that I would have to use JS in order to make this work, right? How could I go about it?

Dropdowns are created using the HTML <select> tag. If you want the dropdown to do something when you've selected something you'll need to use Javascript to make it do that.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

I wanted to make it so every line is a new line on the mini-profile. Much like what the Sub-board Manager Plugin does - making it an option to have the sub-boards displayed in a drop-down list.

I have no experience with that plugin so I have no idea what you're asking for here.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

EDIT 2: My staff and I were also wanting to make it so people could have multiple badges on the top right of their mini-profiles. Much like what's on my profile, but have it so all of the badges show up when the one badge that's on the mini-profile is hovered over.

This is in the territory of me designing things for you which is not what this thread is for. I can help you understand the features of the plugin itself but I'm not going to make your mini-profiles for you.

[Alan Vende]

Sept 20, 2015 8:59:30 GMT -8 Brian said:

Sept 17, 2015 19:23:07 GMT -8 Alan Vende said:

Brian: I have two new MPs that I'm creating. I was wondering if it was possible to make it so a certain custom profile field, only one, would display in the mini profile.

You can use $[user.customfieldname], substituting customfieldname with the name of one of your custom fields all in lowercase with no spaces and only alphanumeric characters (no punctuation, no special characters, etc.).

For example, Mini-Profile Theme would become $[user.miniprofiletheme] since you'd need to strip out the hyphen and spaces. You can also reference it in the Javascript component using user.miniprofiletheme just like how the other variables work.

Sept 17, 2015 19:23:07 GMT -8 Alan Vende said:

Also, how can I make it so the information displays as bullets in the mp?

Bullets are generated using the HTML <ul> tag in conjunction with the <li> tag.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

Also, how do you make it so the width of the MP is the same width across browsers? Do you use this: border-radius: 0; -webkit-border-radius: 0; overflow: visible;?

I used the width CSS property.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

EDIT: I also have a mini-profile field that I want to be displayed as a dropdown in mini-profiles. I assume that I would have to use JS in order to make this work, right? How could I go about it?

Dropdowns are created using the HTML <select> tag. If you want the dropdown to do something when you've selected something you'll need to use Javascript to make it do that.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

I wanted to make it so every line is a new line on the mini-profile. Much like what the Sub-board Manager Plugin does - making it an option to have the sub-boards displayed in a drop-down list.

I have no experience with that plugin so I have no idea what you're asking for here.

Sept 18, 2015 4:35:09 GMT -8 Alan Vende said:

EDIT 2: My staff and I were also wanting to make it so people could have multiple badges on the top right of their mini-profiles. Much like what's on my profile, but have it so all of the badges show up when the one badge that's on the mini-profile is hovered over.

This is in the territory of me designing things for you which is not what this thread is for. I can help you understand the features of the plugin itself but I'm not going to make your mini-profiles for you.

In regards to the Bullets: I did that with the HTML, but they didn't show up for some reason. It output as if the Bullet HTML wasn't there. (I have since removed it because I thought I'd have to use JS, but I can't remember where that thread is. I asked about this once before, but I couldn't find the thread.)

In regards to the width: The width css property? I thought that you'd have to use web-kit and so forth? Or am I wrong in that?

In regards to Edit 2: I didn't mean to make it sound like I was asking you to design it for me. I just wanted to know if it was possible to do it with the Plugin. Sorry about that.

[Brian]

Sept 20, 2015 9:07:52 GMT -8 Alan Vende said:

In regards to the Bullets: I did that with the HTML, but they didn't show up for some reason. It output as if the Bullet HTML wasn't there. (I have since removed it because I thought I'd have to use JS, but I can't remember where that thread is. I asked about this once before, but I couldn't find the thread.)

There's likely CSS in the default style sheet telling the page to hide the bullets.

Sept 20, 2015 9:07:52 GMT -8 Alan Vende said:

In regards to the width: The width css property? I thought that you'd have to use web-kit and so forth? Or am I wrong in that?

Yes, the width CSS property. It's universally accepted across all browsers.

Sept 20, 2015 9:07:52 GMT -8 Alan Vende said:

In regards to Edit 2: I didn't mean to make it sound like I was asking you to design it for me. I just wanted to know if it was possible to do it with the Plugin. Sorry about that.

You can do just about anything to a mini-profile with the plugin. That's definitely possible.

[Alan Vende]

Sept 20, 2015 9:41:31 GMT -8 Brian said:

Sept 20, 2015 9:07:52 GMT -8 Alan Vende said:

In regards to the Bullets: I did that with the HTML, but they didn't show up for some reason. It output as if the Bullet HTML wasn't there. (I have since removed it because I thought I'd have to use JS, but I can't remember where that thread is. I asked about this once before, but I couldn't find the thread.)

There's likely CSS in the default style sheet telling the page to hide the bullets.

Sept 20, 2015 9:07:52 GMT -8 Alan Vende said:

In regards to the width: The width css property? I thought that you'd have to use web-kit and so forth? Or am I wrong in that?

Yes, the width CSS property. It's universally accepted across all browsers.

Sept 20, 2015 9:07:52 GMT -8 Alan Vende said:

In regards to Edit 2: I didn't mean to make it sound like I was asking you to design it for me. I just wanted to know if it was possible to do it with the Plugin. Sorry about that.

You can do just about anything to a mini-profile with the plugin. That's definitely possible.

In regards to the bullets: I don't remember putting in anything like that. I don't think that it would be in PB's default CSS, would there? I doubt that, though.

[Brian]

Sept 20, 2015 9:44:28 GMT -8 Alan Vende said:

In regards to the bullets: I don't remember putting in anything like that. I don't think that it would be in PB's default CSS, would there? I doubt that, though.

There is. It's so that they're hidden in other elements that use those same tags such as the navigation bar and title bars that contain buttons.

[Alan Vende]

Sept 20, 2015 10:30:39 GMT -8 Brian said:

Sept 20, 2015 9:44:28 GMT -8 Alan Vende said:

In regards to the bullets: I don't remember putting in anything like that. I don't think that it would be in PB's default CSS, would there? I doubt that, though.

There is. It's so that they're hidden in other elements that use those same tags such as the navigation bar and title bars that contain buttons.

To my knowledge, though, none of my classes interfere with PB's default CSS. How would I make it so they appear?

[Brian]

Sept 20, 2015 10:33:15 GMT -8 Alan Vende said:

To my knowledge, though, none of my classes interfere with PB's default CSS. How would I make it so they appear?

Never said they conflicted with anything you added. I said that the default CSS hides them all.

You'll need to add a class to your <ul> tag and assign this CSS to that class:

list-style: disc outside none;
margin-left: 15px;

[Alan Vende]

Sept 20, 2015 10:41:01 GMT -8 Brian said:

Sept 20, 2015 10:33:15 GMT -8 Alan Vende said:

To my knowledge, though, none of my classes interfere with PB's default CSS. How would I make it so they appear?

Never said they conflicted with anything you added. I said that the default CSS hides them all.

You'll need to add a class to your <ul> tag and assign this CSS to that class:

list-style: disc outside none;
margin-left: 15px;

So it's not that any of my classes interfered with the CSS, it's that the CSS in general hides bullets of any class?

Thank you for the CSS!