Custom Mini-Profile Creator

[Brian]

Download

Build a mini-profile from the ground up, then apply it to a member using custom profile fields! Comes with three example mini-profiles to showcase the plugin's capabilities.

Each mini-profile you create comes with four sections for customization:

• Name
  This is the name you'll be adding to your custom profile field dropdown once you've finished coding the mini-profile. Pretty self-explanatory. Make sure this name is unique from every other name you use for your mini-profiles or you'll end up overwriting the earlier ones in the list.
• HTML
  This is the HTML that will go inside your mini-profile. You can use just about any HTML tag here so long as it's appropriate for where the mini-profile is showing on the page. Please refrain from using <style> or <script> tags here. You have the next two sections for that! Also, remember that mini-profiles can show multiple times on the same page, so you shouldn't add ID attributes to any of your elements here. Two elements on the same page cannot have the same ID per HTML standards.
• CSS
  This is where you'll place what would normally go in your forum's style sheet or what would normally be between <style> tags. Try to code your mini-profile's HTML in a way that will allow you to target it specifically with your selectors. For example, you can surround all of the content in your HTML with a <div> element with a class and target that class and its child elements specifically with your CSS. That way you don't accidentally target every mini-profile on the page with CSS that was meant for the one you're building. One more thing: The forum theme's CSS still applies beforehand, so your mini-profile may look right in one theme but not in another. The best way to circumvent this is to define as many styles as you can to override the theme's CSS.
• Javascript
  Anything that normally goes between <script> tags will go here. This one's a bit tricky since you'll obviously want to target the custom mini-profile specifically. Luckily there's an easy way to do that. In your statements you can use the $(this) variable to target the mini-profile if you're coding using jQuery. Otherwise, if you only plan on using standard Javascript you can target this instead.

Turn on the Show Help option in the plugin for installation instructions as well as a list of customization features.



Disclaimer

The purpose of this plugin is to add different mini-profiles for users to select in the Personal tab of their profile settings. This plugin should never be used as a substitute for editing the Mini-Profile layout template of your theme. The customizations you make to the Mini-Profile layout template will almost always load faster than any made using this plugin. Additionally, you'll never see the theme's default mini-profile prior to the page fully loading when you do your work through the layout templates, and load times will be drastically shortened since this plugin has to do a lot of client-side work with Javascript to get everything on the page built and replaced.



Adding a Default Mini-Profile

Specifying Default as the name of one of your mini-profiles will cause the CSS and JS you add to that mini-profile to run on the mini-profile of every user on the forum. This is specifically to add something that cannot be achieved through your forum's layout templates. You should still be using the mini-profile layout template to make the base customizations to your forum's default mini-profiles as the HTML will load faster when delivered straight from the server, versus relying on the plugin to change the mini-profile client-side after the page has already been loaded.

Using the HTML section is not recommended when using this option as any HTML you specify will automatically overwrite that of any mini-profile theme the user already has selected.



Expansion Plugin

If you receive an error when saving the plugin settings saying that you've exceeded the maximum allowed byte size feel free to install this expansion plugin if you want to add more mini-profiles. Then simply add your new mini-profile to the expansion plugin instead. Note that this plugin must come before the Custom Mini-Profile Creator plugin in order to work since it needs to add its mini-profiles to the list before the main plugin functions run.

Custom MPC Expansion 1.pbp (1.23 KB)

If you need another expansion install a second copy of this expansion plugin, then go to Plugins > Build > Custom MPC Expansion 1 (make sure you're editing the one you just installed and not your previous expansion). In the Settings tab change the Display Name and the Plugin ID fields to say 2 (or the next most appropriate number) instead of 1. In the Components tab do the same thing to all three instances of custom_mp_ex1 found in the plugin's Javascript.



Preview











PLUGIN AUTHOR'S NOTE: This thread is not for help designing your mini-profiles. If you do not have prerequisite knowledge of any of the languages within its components there are several resources available online to aid you in learning each of them.

• Learn HTML
• Learn CSS
• Learn Javascript
• Learn jQuery
• jQuery API

[Brian]

Plugin has now been accepted into the library. Enjoy!

[ryohira]

Hello hello. I can't get a .gif to work. Even after resizing it to your suggested 170x325. However, when I replace the default background image you have with a gif...That works. I'm not sure what I'm doing wrong here.

[Brian]

Aug 25, 2015 6:28:43 GMT -8 ryohira said:

Hello hello. I can't get a .gif to work. Even after resizing it to your suggested 170x325. However, when I replace the default background image you have with a gif...That works. I'm not sure what I'm doing wrong here.

On your Edit Profile page are you uploading the image directly to the forum or are you linking to an external image? Uploaded avatars get resized to fit 150x150 if they exceed that limit while externally linked images can be any resolution.

If it's happening even with a linked image please link to the profile in question and I'll have a look.

[ryohira]

I am linking from photobucket. Could that also be why, when I used a standard jpg, the picture in the mini profile is huge?

[Brian]

Aug 25, 2015 14:44:47 GMT -8 ryohira said:

I am linking from photobucket. Could that also be why, when I used a standard jpg, the picture in the mini profile is huge?

If your image is larger than the mini-profile it isn't resized in any way. The image you have linked at the moment is 262x600 pixels which well exceeds the mini-profile's dimensions and is properly overriding the original background image.

[ryohira]

Aug 25, 2015 14:49:30 GMT -8 Brian said:

Aug 25, 2015 14:44:47 GMT -8 ryohira said:

I am linking from photobucket. Could that also be why, when I used a standard jpg, the picture in the mini profile is huge?

If your image is larger than the mini-profile it isn't resized in any way. The image you have linked at the moment is 262x600 pixels which well exceeds the mini-profile's dimensions and is properly overriding the original background image.

Alright, so 170x325 is the max size for mini-profiles? Because I actually re-sized that picture to be that size. Not sure why its that big.

[Brian]

Aug 25, 2015 14:57:14 GMT -8 ryohira said:

Aug 25, 2015 14:49:30 GMT -8 Brian said:

If your image is larger than the mini-profile it isn't resized in any way. The image you have linked at the moment is 262x600 pixels which well exceeds the mini-profile's dimensions and is properly overriding the original background image.

Alright, so 170x325 is the max size for mini-profiles? Because I actually re-sized that picture to be that size. Not sure why its that big.

170x325 is the exact size of that particular mini-profile design. Your image doesn't necessarily have to be that size, but if you want to ensure the image you want to use fits the background perfectly that's the size you can go off of.

[ryohira]

Aug 25, 2015 14:59:08 GMT -8 Brian said:

170x325 is the exact size of that particular mini-profile design. Your image doesn't necessarily have to be that size, but if you want to ensure the image you want to use fits the background perfectly that's the size you can go off of.

Cool. So, that's all figured out and I've got it working. Thank you, sir.

I'm going to see if that's the same issue I was having with the gif.

---

And, it was. Thanks again!

[Phear]

So great to see this plugin finally!

I'll have to try my hand at it, soon and see if there's any good way to work it into my board in the near future.

EDIT: Brian I don't suppose it's possible for us to make use of this plugin on the Support Board the way that you have, as well, is it? Just a staff perk?

[Brian]

Aug 26, 2015 12:59:47 GMT -8 Phear said:

So great to see this plugin finally!

I'll have to try my hand at it, soon and see if there's any good way to work it into my board in the near future.

EDIT: Brian I don't suppose it's possible for us to make use of this plugin on the Support Board the way that you have, as well, is it? Just a staff perk?

The custom field dropdowns used by the plugin are set to staff-only here.

Only three regular users have custom mini-profiles here as they won a mini-profile design contest that let them keep them as a reward.

[Phear]

Aug 26, 2015 13:22:43 GMT -8 Brian said:

Aug 26, 2015 12:59:47 GMT -8 Phear said:

So great to see this plugin finally!

I'll have to try my hand at it, soon and see if there's any good way to work it into my board in the near future.

EDIT: Brian I don't suppose it's possible for us to make use of this plugin on the Support Board the way that you have, as well, is it? Just a staff perk?

The custom field dropdowns used by the plugin are set to staff-only here.

Only three regular users have custom mini-profiles here as they won a mini-profile design contest that let them keep them as a reward.

*shakes fist* One Day... for now I suppose I'll settle for testing it out on my board and dreaming for it, here.

[Gibby]

Aug 26, 2015 9:16:06 GMT -8 Brian said:

Aug 26, 2015 3:01:26 GMT -8 @joecool111 said:

i dont why its not their for me then. maybe brian can tell.

So long as you're going there directly from the link in your admin area it should show your forum URL on the top left of the library page, after which you just need to search for the plugin.

Try it in an incognito window if it's not working normally (Ctrl+Shift+N). The link in your admin area sets a cookie to determine which forum you're installing plugins for. If your forum URL isn't showing on the top left of the library when it opens it means that your browser is rejecting the cookie for whatever reason.

Hello 

Can you let me know what I need to do to get the mini profile looking like yours ? I have read the instructions but the coding makes no sense to me i am afraid, I updated the mini profile template in the first set of instructions but then when it talks about the coding i dont understand , thanks 

[Brian]

Sept 3, 2015 5:21:22 GMT -8 Gibby said:

Aug 26, 2015 9:16:06 GMT -8 Brian said:

So long as you're going there directly from the link in your admin area it should show your forum URL on the top left of the library page, after which you just need to search for the plugin.

Try it in an incognito window if it's not working normally (Ctrl+Shift+N). The link in your admin area sets a cookie to determine which forum you're installing plugins for. If your forum URL isn't showing on the top left of the library when it opens it means that your browser is rejecting the cookie for whatever reason.

Hello 

Can you let me know what I need to do to get the mini profile looking like yours ? I have read the instructions but the coding makes no sense to me i am afraid, I updated the mini profile template in the first set of instructions but then when it talks about the coding i dont understand , thanks 

The mini-profile I'm using here at the moment is Example 2 which comes with the plugin.

After installing the plugin and adding the code from the instructions to your mini-profile template all you should need to do is add the custom profile field shown in the instructions and add Example 2 to the list, then select it in your profile settings to make it take effect.

[Gibby]

Sept 3, 2015 9:26:24 GMT -8 Brian said:

Sept 3, 2015 5:21:22 GMT -8 Gibby said:

Hello 

Can you let me know what I need to do to get the mini profile looking like yours ? I have read the instructions but the coding makes no sense to me i am afraid, I updated the mini profile template in the first set of instructions but then when it talks about the coding i dont understand , thanks 

The mini-profile I'm using here at the moment is Example 2 which comes with the plugin.

After installing the plugin and adding the code from the instructions to your mini-profile template all you should need to do is add the custom profile field shown in the instructions and add Example 2 to the list, then select it in your profile settings to make it take effect.

o k example 2 , i will look for that and give it a go !