Custom Mini-Profile Creator

[Gibby]

Sept 3, 2015 11:40:52 GMT -8 Gibby said:

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

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 !

thank you I did it on my test board , however how do you get the image to cover the whole of the mini profile like you have it , on mine i had a square with my avatar in then then background image, i would like my avatar to cover it all like your image does.

[Brian]

Sept 3, 2015 11:53:11 GMT -8 Gibby said:

Sept 3, 2015 11:40:52 GMT -8 Gibby said:

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

thank you I did it on my test board , however how do you get the image to cover the whole of the mini profile like you have it , on mine i had a square with my avatar in then then background image, i would like my avatar to cover it all like your image does.

If you link an image as your avatar that meets or exceeds the dimensions of the mini-profile it'll be used as the background image.

Note that uploading an image will not work as uploaded images are restricted to a maximum size of 150x150. You must link to an image hosted elsewhere online for it to work.

[Gibby]

Sept 3, 2015 13:00:29 GMT -8 Brian said:

Sept 3, 2015 11:53:11 GMT -8 Gibby said:

thank you I did it on my test board , however how do you get the image to cover the whole of the mini profile like you have it , on mine i had a square with my avatar in then then background image, i would like my avatar to cover it all like your image does.

If you link an image as your avatar that meets or exceeds the dimensions of the mini-profile it'll be used as the background image.

Note that uploading an image will not work as uploaded images are restricted to a maximum size of 150x150. You must link to an image hosted elsewhere online for it to work.

do you mean like photobucket? thanks 

[Brian]

Sept 3, 2015 13:25:23 GMT -8 Gibby said:

Sept 3, 2015 13:00:29 GMT -8 Brian said:

If you link an image as your avatar that meets or exceeds the dimensions of the mini-profile it'll be used as the background image.

Note that uploading an image will not work as uploaded images are restricted to a maximum size of 150x150. You must link to an image hosted elsewhere online for it to work.

do you mean like photobucket? thanks 

Yes, whichever you preferred image host is.

[Gibby]

Sept 3, 2015 13:30:16 GMT -8 Brian said:

Sept 3, 2015 13:25:23 GMT -8 Gibby said:

do you mean like photobucket? thanks 

Yes, whichever you preferred image host is.

imgur but it doesnt seem to want to do it, i have it set to the right size 170 -325 and it wont do it just keeps showing the default background ?

see Mr Phoenix profile here gibbysplace.freeforums.net/thread/519/abc-occupations?page=20

[Alan Vende]

Brian: I am playing around with the Plugin on my test forum now. I want to make the Administrator black banner on the top Admin and such (like what I asked you about in this thread. I put in that piece of code and replaced the variable there with my own (staffgroup-tag), but for some reason, it gives me this:



I have tried and tried again to change that code around to make it work correctly, but I'm lost because no matter how I manipulate it, it gives me that output. My test forum is pp-testforum.proboards.com/thread/3/test. That is a link to the thread that I am looking at for my MP.

The following is the code I have for that particular MP:

HTML
$[user]

<div class="group">$[user.group.name]<br />$[user.group.stars]</div>
<div class="rank">$[user.rank.name]<br />$[user.rank.stars]</div>
<div class="custom_title">$[user.custom_title]</div>
<div class="warning">$[user.warning.bar]</div>
<br />

<div class="avatar">$[user.avatar]</div>

<br />
<div class="status">$[user.personal_text]<br /></div>

<div class="info">
<span class="float-right">$[user.gender.image]</span>
Posts: $[user.posts]
<div class="online"><img src="http://i.imgur.com/YyNLx.gif"></div>
</div>
<br />
<div class="badges">$[user.badges]</div>

{if $[user.group]}
   <div class="staffgroup-tag">
       {if $[user.group.name] == "Administrator"}
           Admin
       {/if}
   </div>
{/if}
CSS
/* Outside */
.mini-profile.test-mp {
padding: 13px 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000;
   background-image: url("http://images.proboards.com/v5/banners/image-clear-skies.png");
   background-position: center top;
   border-width: 0;
   box-shadow: 0 0 2px #000;
   color: #ddd;
overflow: hidden;
position: relative;
width: 100%;
}

/* Display name */
.mini-profile.test-mp .user-link { color: #00af33; }

/* Hide rank by default */
.mini-profile.test-mp .rank { display: none; }

/* Personal text and info */
.mini-profile.test-mp .personal-text,
.mini-profile.test-mp .info {
font-weight: bold;
color: #000;
font-size: 80%;
}

/* Group tag */
.mini-profile.test-mp .staffgroup-tag {
   font-size: 7px;
   font-weight: bold;
text-transform: uppercase;
   text-align: center;
   background-color: #111;
   box-shadow: 0px 0px 2px #000;
   background-image: url(http://images.proboards.com/v5/gradients/sexy.png);
   color: #fff;
   text-shadow: 2px 2px 2px #000;
   border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
   padding: 3px 6px;
   position: absolute;
   top: 0px;
   right: 0px;
}
JS
// EXAMPLE 1
// The default mini-profile, but a bit more stylish.

// Add class to mini-profile to use in CSS
$(this).addClass('test-mp');

// Hide custom title if none exists
if(!user.custom_title)
$(this).children('.custom_title').hide();

// Show rank if not in group
if(!user.group){
$(this).children('.group').hide();
$(this).children('.rank').show();
if(!user.is_staff)
$(this).children('.group-tag').hide();
}

// Hide personal text if none exists
if(!user.personal_text)
$(this).children('.status').hide();

// Hide online status if offline
if(!user.is_online)
$(this).find('.online').hide();
I am attempting to manipulate Example 1. The name of my manipulation is Admin Example.

Thanks for your help!

[Brian]

Sept 4, 2015 5:32:38 GMT -8 Gibby said:

imgur but it doesnt seem to want to do it, i have it set to the right size 170 -325 and it wont do it just keeps showing the default background ?

see Mr Phoenix profile here gibbysplace.freeforums.net/thread/519/abc-occupations?page=20

Seems to be working on my end.

dev.prbrds.com/b/o/oqe5xz9spN.png

Sept 4, 2015 7:26:07 GMT -8 Alan Vende said:

Brian: I am playing around with the Plugin on my test forum now. I want to make the Administrator black banner on the top Admin and such (like what I asked you about in this thread. I put in that piece of code and replaced the variable there with my own (staffgroup-tag), but for some reason, it gives me this:

I have tried and tried again to change that code around to make it work correctly, but I'm lost because no matter how I manipulate it, it gives me that output. My test forum is pp-testforum.proboards.com/thread/3/test. That is a link to the thread that I am looking at for my MP.

{if} statements will not work in the HTML area of the plugin as mentioned in the [?] tooltip when you hover over it as this is a plugin and not a layout template.

If you only want the staff tag to show under certain conditions you'll need to use the JS component to hide it using a Javascript if statement.

[Alan Vende]

Sept 6, 2015 8:12:56 GMT -8 Brian said:

Sept 4, 2015 7:26:07 GMT -8 Alan Vende said:

Brian: I am playing around with the Plugin on my test forum now. I want to make the Administrator black banner on the top Admin and such (like what I asked you about in this thread. I put in that piece of code and replaced the variable there with my own (staffgroup-tag), but for some reason, it gives me this:

I have tried and tried again to change that code around to make it work correctly, but I'm lost because no matter how I manipulate it, it gives me that output. My test forum is pp-testforum.proboards.com/thread/3/test. That is a link to the thread that I am looking at for my MP.

{if} statements will not work in the HTML area of the plugin as mentioned in the [?] tooltip when you hover over it as this is a plugin and not a layout template.

If you only want the staff tag to show under certain conditions you'll need to use the JS component to hide it using a Javascript if statement.

Even if I wanted to change the user group from "Administrator" or "Head Administrator" to Admin or something like that, I would have to use a JavaScript {if} statement? I don't want to hide the whole banner, I just want to change the output of the text on the black banner.

[Former Member]

far too complicated for me atm

anyone got any ready made codes i can mess about with myself to get me started ... something real simple would do

i have a saw ready for my right arm.

[Brian]

Sept 7, 2015 6:56:00 GMT -8 Alan Vende said:

Sept 6, 2015 8:12:56 GMT -8 Brian said:

{if} statements will not work in the HTML area of the plugin as mentioned in the [?] tooltip when you hover over it as this is a plugin and not a layout template.

If you only want the staff tag to show under certain conditions you'll need to use the JS component to hide it using a Javascript if statement.

Even if I wanted to change the user group from "Administrator" or "Head Administrator" to Admin or something like that, I would have to use a JavaScript {if} statement? I don't want to hide the whole banner, I just want to change the output of the text on the black banner.

Yes, you'd have to use Javascript for that too.

[Alan Vende]

Sept 8, 2015 8:49:14 GMT -8 Brian said:

Sept 7, 2015 6:56:00 GMT -8 Alan Vende said:

Even if I wanted to change the user group from "Administrator" or "Head Administrator" to Admin or something like that, I would have to use a JavaScript {if} statement? I don't want to hide the whole banner, I just want to change the output of the text on the black banner.

Yes, you'd have to use Javascript for that too.

Would it be something like this?

if ($[user.group.name] == "Head Administrator") {
   Admin;
} else {
   $[user.group.name];
}
Is that even close? I think I'm missing something that goes with Admin;, aren't I?

If that's not close, is there anything remotely correct in the code above? (Sorry, I'm asking so I can learn.)

[Brian]

Sept 8, 2015 13:06:55 GMT -8 Alan Vende said:

Sept 8, 2015 8:49:14 GMT -8 Brian said:

Yes, you'd have to use Javascript for that too.

Would it be something like this?

if ($[user.group.name] == "Head Administrator") {
   Admin;
} else {
   $[user.group.name];
}
Is that even close? I think I'm missing something that goes with Admin;, aren't I?

If that's not close, is there anything remotely correct in the code above? (Sorry, I'm asking so I can learn.)

That's half correct at the very least. The if statement structure is perfect but the variables and everything else are wrong.

Based on the instructions provided by the plugin's help window you'd want something more like this:

if(user.group){
    if(user.group.name == "Head Administrator")
        $(this).children('.staffgroup-tag').html('Admin');
}

The first if statement checks if user.group exists. If it doesn't and you attempt to call user.group.name it'll cause the plugin to stop and error since you can't call a property of an undefined variable in Javascript.

The next if statement inside of it checks against user.group.name just like you would in a template's if statement. You don't need the braces after this if statement since the Javascript you're going to execute to change the HTML consists of only one statement.

Finally, the meat of the code is the line of jQuery that changes the HTML of the .staffgroup-tag element's HTML to the group name you'd prefer to show. You've seen this line in dozens of threads I've helped you in so I'm sure you know how this one works for the most part.



Hopefully this gives you some insight into why I didn't release this plugin right away. To make the most of it and really work its magic you need to know your stuff. You should've seen the first iteration when it consisted entirely of the Javascript component. Pain in the butt.

[Alan Vende]

Sept 8, 2015 13:54:43 GMT -8 Brian said:

Sept 8, 2015 13:06:55 GMT -8 Alan Vende said:

Would it be something like this?

if ($[user.group.name] == "Head Administrator") {
   Admin;
} else {
   $[user.group.name];
}
Is that even close? I think I'm missing something that goes with Admin;, aren't I?

If that's not close, is there anything remotely correct in the code above? (Sorry, I'm asking so I can learn.)

That's half correct at the very least. The if statement structure is perfect but the variables and everything else are wrong.

Based on the instructions provided by the plugin's help window you'd want something more like this:

if(user.group){
    if(user.group.name == "Head Administrator")
        $(this).children('.staffgroup-tag').html('Admin');
}

The first if statement checks if user.group exists. If it doesn't and you attempt to call user.group.name it'll cause the plugin to stop and error since you can't call a property of an undefined variable in Javascript.

The next if statement inside of it checks against user.group.name just like you would in a template's if statement. You don't need the braces after this if statement since the Javascript you're going to execute to change the HTML consists of only one statement.

Finally, the meat of the code is the line of jQuery that changes the HTML of the .staffgroup-tag element's HTML to the group name you'd prefer to show. You've seen this line in dozens of threads I've helped you in so I'm sure you know how this one works for the most part.



Hopefully this gives you some insight into why I didn't release this plugin right away. To make the most of it and really work its magic you need to know your stuff. You should've seen the first iteration when it consisted entirely of the Javascript component. Pain in the butt.

The part I put in the if statement was from this thread. I thought that it was supposed to be like what was in that thread. My bad!

I've seen it. I don't think I connected the dots, though.

It gives me a lot of insight. Now I realize that this is that Plugin that you "warned" me about!

I put the JavaScript in the JavaScript area and the 'output' (I don't even know whether to call it an output because nothing changed), is this:



I'll most certainly laugh if I copied something wrong! I am on a new test theme - testtheme2, with this Plugin. I am testing a few other things, too, that I may want to bring out to my other themes, but at the moment the problem is the background of the tag going into my display name and such.

I must say I feel completely dumb

[Brian]

Sept 8, 2015 16:37:45 GMT -8 Alan Vende said:

I put the JavaScript in the JavaScript area and the 'output' (I don't even know whether to call it an output because nothing changed), is this:

You made the change to a mini-profile you created called Example 1 Mods but you still have the original Example 1 selected in your profile which is why you're not seeing any changes.

[Alan Vende]

Sept 9, 2015 8:15:19 GMT -8 Brian said:

Sept 8, 2015 16:37:45 GMT -8 Alan Vende said:

I put the JavaScript in the JavaScript area and the 'output' (I don't even know whether to call it an output because nothing changed), is this:

You made the change to a mini-profile you created called Example 1 Mods but you still have the original Example 1 selected in your profile which is why you're not seeing any changes.

I didn't notice that. Thanks for that.

For some reason, though, it still looks like the background of the small admin banner is going out of that banner and is also the 'background' of my display name and such:



It extends down to my user group stars - or diamonds, rather.

Is that what it's supposed to do?

    Also, to make the change like that for my admins, mods and other staff members, could I put more than one if statement like that into the JS area?