Custom Mini-Profile Creator

[Brian]

Dec 30, 2015 11:56:06 GMT -8 Heildgar said:

Dec 30, 2015 9:55:30 GMT -8 Brian said:

That would have to do more with the admin area than the plugin itself as the only aspects of plugins that authors control are the components and settings that go inside them.

Does the same thing happen in incognito mode? (Ctrl+Shift+N)

Yeah the same thing happens in incognito. 

Where exactly could I find help for this if not this thread?

The Support Board would normally be the place for it, but since I can't duplicate this issue myself I'm inclined to believe it has to do with your browser. Can you try the same thing in another browser?

[SafeInSanity]

That's pretty cool but why not make a mini profile plugin that would be more useful with options like "Follow User", "PM User", "View Profile" ?

[Brian]

Dec 30, 2015 13:18:24 GMT -8 SafeInSanity said:

That's pretty cool but why not make a mini profile plugin that would be more useful with options like "Follow User", "PM User", "View Profile" ?

No need for a plugin. Those are already built into the forum and can be added through a forum's layout templates with minimal effort. You can also add Profile and PM links anywhere on the forum by simply modifying the URL structure to include the user's ID.

Examples:
support.proboards.com/user/33409
support.proboards.com/conversation/new/33409

The reason I make the majority of my plugins is to provide new functionality on top of the existing functionality or to provide a quick shortcut to accomplishing a task that would normally take a monumental amount of code to accomplish. If something takes only a few lines of code to achieve I don't feel it necessary to dedicate an entire plugin slot on someone's forum to it.

[SafeInSanity]

Dec 30, 2015 14:02:16 GMT -8 Brian said:

Dec 30, 2015 13:18:24 GMT -8 SafeInSanity said:

That's pretty cool but why not make a mini profile plugin that would be more useful with options like "Follow User", "PM User", "View Profile" ?

No need for a plugin. Those are already built into the forum and can be added through a forum's layout templates with minimal effort. You can also add Profile and PM links anywhere on the forum by simply modifying the URL structure to include the user's ID.

Examples:
support.proboards.com/user/33409
support.proboards.com/conversation/new/33409

The reason I make the majority of my plugins is to provide new functionality on top of the existing functionality or to provide a quick shortcut to accomplishing a task that would normally take a monumental amount of code to accomplish. If something takes only a few lines of code to achieve I don't feel it necessary to dedicate an entire plugin slot on someone's forum to it.

I understand. So basically, what I want to do requires code changes to the template but doesn't require a plugin to be wrote. The problem is that most of us are not coders and do not understand how to write/change codes on our own to create our ideas. I will post this in the Template code requests board. Thanks.

[Brian]

Dec 30, 2015 14:24:41 GMT -8 SafeInSanity said:

Dec 30, 2015 14:02:16 GMT -8 Brian said:

No need for a plugin. Those are already built into the forum and can be added through a forum's layout templates with minimal effort. You can also add Profile and PM links anywhere on the forum by simply modifying the URL structure to include the user's ID.

Examples:
support.proboards.com/user/33409
support.proboards.com/conversation/new/33409

The reason I make the majority of my plugins is to provide new functionality on top of the existing functionality or to provide a quick shortcut to accomplishing a task that would normally take a monumental amount of code to accomplish. If something takes only a few lines of code to achieve I don't feel it necessary to dedicate an entire plugin slot on someone's forum to it.

I understand. So basically, what I want to do requires code changes to the template but doesn't require a plugin to be wrote. The problem is that most of us are not coders and do not understand how to write/change codes on our own to create our ideas. I will post this in the Template code requests board. Thanks.

A template change isn't required (as in not the only way to accomplish it), but since it's such a small change it's the easier way to go and offers you a lot more freedom in how you'd like the link to be displayed versus a plugin which will likely be a lot more restrictive in where it's going to place the link. And since it's in the mini-profile a plugin would have to add the link after the page loads versus a template modification which includes it on the page by default when it's requested from the server.

Without any coding knowledge you'd ultimately end up making a request in one of the Coding & Development boards anyways. My response was solely because the question was posed in response to what my plugin offered.

[Alan Vende]

Hey, Brian !

I am working on a default theme of PB (titled MP Layout Test Theme) to try and get the div that was put under the mini-profiles of the MP Custom Design Contest to work correctly. I have the div, but every time I try to place it in there, at the bottom of the MP, below everything else, it does this:



I think I had asked you once before if this was done in your Mini-Profile Creator Plugin, and you said yes, it was. I talked to my other admins, though, and they think that it's done partly with the template's mini-profile template that's working along side the Custom Mini-Profile for Kami and everyone else.

I just wanted to know what was true and what wasn't. (I'm not trying to ask for design help here, I'm just a bit stuck on how to implement this effectively on my forum, and I'm running into a few snag areas, such as the one above; I just wanted to ask if I was going about this the correct way.)

---

Also, on an unrelated, but somewhat related note: I am working in the same theme that I listed above and I noticed that the images that I have appended to the mini-profiles of my admins (including mine) aren't rendering correctly with the images. I haven't changed any of the .append JS or anything like that, I just created the new, default theme to make sure I got the div at the bottom of the whole mini-profile, and it shows me this, yet I have the images appended to the mini-profiles within the Custom Mini-Profile Creator Plugin, which is set to show on that theme:



(I understand why the text is over to the left (that's because in my other themes, the theme itself actually made it so the text was aligned-center, so I didn't put that into the plugin. I will be doing so, though, after I finish this post.) I just didn't know, though, about why the images aren't rendering and they're in the MPs of the plugin.

For example's sake:

The following is all of the JS in my MP template.

// Default JS for MP
// Staff 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>');
   }
}

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

// Make group tag short
if(user.group){
   if(user.group.name == "Head Administrator")
       $(this).children('.short-black-banner').html('Admin');
}



// Hide custom title if none exists
if(!user.custom_title)
$(this).children('.custom_title').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();

// Hide Birthstone if none exists
if(!user.birthstosne)
   $(this).find('.birthstone').hide();
// End default JS

// Add unique class to reference this mini-profile in CSS:
$(this).addClass('mp-variant');

// Show v1
if($(this).parents('#post-8').length)
   $(this).addClass('switched').children('.v1').show();

// Show v2
if($(this).parents('#post-1784').length)
   $(this).addClass('switched').children('.v2').show();

// Show v3
if($(this).parents('#post-2230').length)
   
$(this).addClass('switched v3').children('.v3').show();

// Show v4
if($(this).parents('#post-1956').length)

$(this).addClass('switched').children('.v4').show();

// Show v5
if($(this).parents('#post-2210').length)

$(this).addClass('switched').children('.v5').show();

// Show v6
if($(this).parents('#post-2331').length)

$(this).addClass('switched v6').children('.v6').show();

// Show v6 on all posts in The World of the Paranomral and its sub-boards
if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 232 || pb.data('page').thread.board_id == 115 || pb.data('page').thread.board_id == 240){
$(this).addClass('switched v6').children('.v6').show();
}
}

// Group button on v6
$(this).find('.add-to-group').append('<a href="/user/' + pb.data('user').id + '/groups">Request to Join!</a>');

// v7 JS
// Show v7
// Show v7 on a particular post.
if($(this).parents('#post-2366').length)

$(this).addClass('switched v7').children('.v7').show();

// v8 JS
// Show v8
// Show v8 on all posts in a particular thread.
if(pb.data('page').thread){
if(pb.data('page').thread.id == 787){
$(this).find('.switch').hide();
$(this).addClass('switched v8').children('.v8').show();
}
}

// Append Paranormal Badge to v8
$(this).find('.v8').find('.para-badge').append('<a href="http://psychic-psyghtings.proboards.com/thread/755/new-badges-on-mini-profiles"><img src="http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png"></a>');
And the following is all of the JS in the MP that is shown above in the screenshot(s):


// Staff Badge
if(user.group){
   if(user.group.name == "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>');
   }
}

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

// Make group tag short
if(user.group){
   if(user.group.name == "Administrator")
       $(this).children('.staff-group-tag').html('Admin');
}

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

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

// Hide online status if offline
if(!user.is_online)
$(this).find('.msg-online').hide();

// Hide Birthstone if none exists
if(!user.birthstone)
   $(this).find('.birthstone').hide();

// Hide Badges if none exists
if(!user.badges)
   $(this).find('.badges').hide();
As you can see from the above, the staff badge, the one that's supposed to be on the far-right upper corner of the MP, is in the JS, but it's not on the mini-profile itself of that theme. It's on all of the others, though.

I didn't know if this was something that I was doing wrong, or something that should be brought to your attention, to which is why I'm adding it here today. I hope that that's okay.

Thanks for your help, Brian!

[Brian]

So basically, "I'm not asking for design help but please provide design help."

The code you want to place it after the mini-profile is this:

$(this).after('YOUR HTML HERE');

I'm not touching that thing with a 10 foot pole, but if I were to do so the most obvious question I'd ask first is whether or not the image that isn't showing is contained inside an if statement that dictates that it only shows under certain circumstances similar to how you're only appending your badge to the .v8 element.

[Alan Vende]

Jan 10, 2016 11:09:34 GMT -8 Brian said:

So basically, "I'm not asking for design help but please provide design help."

The code you want to place it after the mini-profile is this:

$(this).after('YOUR HTML HERE');

I'm not touching that thing with a 10 foot pole, but if I were to do so the most obvious question I'd ask first is whether or not the image that isn't showing is contained inside an if statement that dictates that it only shows under certain circumstances similar to how you're only appending your badge to the .v8 element.

I guess, so, yes. I just can't figure it out for the life of me - no matter where I looked - and neither could anyone in the Coding and Design board.

So, I would put all of my HTML in there in the mini-profile? For example, on the mini-profile above in the screenshot?

It is. It's like what happened on Lynx 's forum Avatar Ascent a few months ago - it's on the upper right-hand corner of the screen when I am on a page with my replies on it (same with Lynx ), but if I put position: relative; instead of position: absolute;, it messes with the other themes that are correct.

I just don't understand how it shows correctly on all of my other themes, but when I attempt to create a theme from scratch (not copying a theme, creating the default PB Theme with no other styling and putting the Custom Mini-Profile Creator in it.

It's a really weird occurrence.

EDIT: I've done some tweaking on the .after() JS and am finding that if I put something like this:

<div class="content-box" style="font-size: 9px; text-align: center; padding: 0 0 5px; position: relative; top: 5px; margin-bottom: 5px;">
<img style="width: 16px; height: 16px; position: relative; top: 4px;" src="http://images.proboards.com/v5/badges/small_icons/designer.png">
<a href="http://support.proboards.com/thread/491036/results-mini-profile-design-contest">MP Design Contest Winner</a>
</div>
into it, I immediately see red in the HTML. I assume, then, that that's not the HTML that you were talking about, so I put in <div class="msg-bottom">test</div> and the following into the CSS area:

.mini-profile.msg-mp .msg-bottom {
border: 1px solid #000000;
background-color: #000000;
    font-size: 9px;
text-align: center;
padding: 0 0 5px;
    margin-top: 5px;
}
and it stills hows as if it was just put there without any styling. I'm not putting a class on it the wrong way, am I? That's the only thing I can think I'm doing wrong since there's no red on the HTML anymore.

This is what I had when I put the 

<div class="content-box" style="font-size: 9px; text-align: center; padding: 0 0 5px; position: relative; top: 5px; margin-bottom: 5px;">
<img style="width: 16px; height: 16px; position: relative; top: 4px;" src="http://images.proboards.com/v5/badges/small_icons/designer.png">
<a href="http://support.proboards.com/thread/491036/results-mini-profile-design-contest">MP Design Contest Winner</a>
</div>
code into the $(this).after() and got red marks around it, as shown:



The above led me to believe that I have to put the CSS above into the CSS area and put a <div class""></div> inside the (' ') So, I did, with <div class="msg-bottom">Test</div> and...

...this is what I have now:



But, for some reason, the CSS isn't taking affect, even though there is a div class on it.

[Brian]

The HTML you place in that line of jQuery is going to show up after your mini-profile just like how the ones for the mini-profile design contest show up after those assigned to the winners.

I wouldn't know the cause of the second issue without seeing a live example.

[Alan Vende]

That's what I thought. So, I put what I had from here:

<div class="content-box" style="font-size: 9px; text-align: center; padding: 0 0 5px; position: relative; top: 5px; margin-bottom: 5px;">
<img style="width: 16px; height: 16px; position: relative; top: 4px;" src="http://images.proboards.com/v5/badges/small_icons/designer.png">
<a href="http://support.proboards.com/thread/491036/results-mini-profile-design-contest">MP Design Contest Winner</a>
</div>

...but that's what showed the red marks, and what made the mini-profiles go wonky. I have changed it back to the wonkiness, so you can see it here.

When that made it wonky like it shows in the live example, I removed it and put <div class="msg-bottom">Test</div> into the .after() and I can't style it for some reason, even though I have the correct class in the CSS:

.mini-profile.msg-mp .msg-bottom {
border: 1px solid #000000;
background-color: #000000;
    font-size: 9px;
text-align: center;
padding: 0 0 5px;
    margin-top: 5px;
}

[Brian]

Your HTML needs to be all on the same line if you're placing it inside of a jQuery method. So in the case of your HTML:

$(this).after('<div class="content-box" style="font-size: 9px; text-align: center; padding: 0 0 5px; position: relative; top: 5px; margin-bottom: 5px;"><img style="width: 16px; height: 16px; position: relative; top: 4px;" src="http://images.proboards.com/v5/badges/small_icons/designer.png"><a href="http://support.proboards.com/thread/491036/results-mini-profile-design-contest">MP Design Contest Winner</a></div>');

[Alan Vende]

Thanks, that worked correctly! Can you please explain what you mean by on the same line? I thought that it was.

[Brian]

You had line breaks after each tag.

<div>
<img>
<a>Text</a>
</div>

Versus the lack of line breaks in the example I posted.

<div><img><a>Text</a></div>

[Alan Vende]

Oh, I never realized that. Thanks so much, Brian!

[Former Member]

So I decided I was very fond of the simple Example 1 style. So I copied the CSS and javascript into a new profile theme slot, and titled it Example 2 (deleting the default Example 2 and 3 first). The Example 1 seems to be working fine on its own. Same with Example 2. However, when 2 members (one wearing Example 1 theme and the other wearing Example 2 theme) post in the same thread, the example one seems to override all themes.

live-another-day.boards.net/