NPC Profiles

[Ginger]

How can i make it work?

[Brian]

Jun 30, 2014 10:20:19 GMT -8 Ginger said:

How can i make it work?

Follow the steps in the first post under How to Use!

[N A T]

Hey Brian!

I just installed the plugin on two forums and while I managed to make the profiles work on my primary forum, I can't seem to figure out the coding for the second one, Relinquish Your Fate.

I attached a screenshot of what it looks like when I do not replace the default coding on the Mini-Profile HTML box in the NPC List tab. It's just totally splashed all over the place because of the mini-profile coding on the actual Monster Mash skin. I already talked to the creator of the skin but she wasn't able to figure it out after playing around with it, so I am trying to see if you have suggestions. I would love for the NPC profiles to match the mini-profiles the skin has but would also be fine if there was a fix to at least make the profiles look like the default Proboards ones!

This is the coding of the Mini Profiles on the skin:
(I tried to play around with that coding and embed just the variables that the NPC profiles accept and it also worked just fine on my other forum, just not on Relinquish.)

SPOILER: Click to show

<!-- MINI PROFILE BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

<center>
   <div style="width: 220px;">
    $[user]<br /><br />
   </div>
</center>
<div class="$[miniprofile_class]" style="width: 200px; height: 350px; background-image: url('http://storage.proboards.com/5440294/i/Et4jONCVgrq7qwL82NMc.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach} background-size: cover;">
   {if $[user.is_member]}
   <div class="profilemini"{if $[user.is_deleted]} style="display: none;"{/if}>
       <table>
           <tbody>
               <tr>
                   <td colspan="3" style="vertical-align: bottom;">
                       
                     <div style="margin-top: 10px;">
                           <span style="padding: 4px; background-color: black; color: white; font-size: .8em;"><b>I.</b></span>
                           <a style="color: white; font-size: .8em;" href="$[user.pm_href]">Send Personal Message</a>
                       </div><br>
                       
                       <table>
                           <tbody>
                               <td style="vertical-align: bottom;">
                                   <span style=" padding: 4px; background-color: black; color: white; font-size: .8em;"><b>II.</b></span>
                                   <a style="color: white; font-size: .8em;" href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Profile"}$[user.mini_custom_field.value]{/if}{/foreach}">Profile</a>
                                   <br /><br />
                                   <span style=" padding: 4px; background-color: black; color: white; font-size: .8em;"><b>III.</b></span>
                                   <a style="color: white; font-size: .8em;" href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Residence"}$[user.mini_custom_field.value]{/if}{/foreach}">Residence</a>
                               </td>
                               <td style="vertical-align: bottom;">
                                   <span style=" padding: 4px; background-color: black; color: white; font-size: .8em;"><b>IV.</b></span>
                                   <a style="color: white; font-size: .8em;" href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}$[user.mini_custom_field.value]{/if}{/foreach}">Plotter</a>
                                   <br /><br />
                                   <span style=" padding: 4px; background-color: black; color: white; font-size: .8em;"><b>V.</b></span>
                                   <a style="color: white; font-size: .8em;" href="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker"}$[user.mini_custom_field.value]{/if}{/foreach}">Tracker</a>
                               </td>
                           </tbody>
                       </table>
                       
                   </td>
               </tr>
               <tr><td colspan="3" height="10px"></td></tr>
               <tr>
                   <td style="vertical-align: bottom;">
                       <div style="font-size: 1.5em; font-family: georiga; color: white; margin-bottom: -4px;"><i>$[user.posts]</i><br /></div>
                       <b>post{if $[user.posts] != 1}s{/if}</b>
</td>
                   <td style="vertical-align: bottom;">
                       <div style="font-size: 1.5em; font-family: georiga; color: white; margin-bottom: -4px;"><i>$[user.likes]</i><br /></div>
                       <b>like{if $[user.likes] != 1}s{/if}</b>
                   </td>
                   <td>
                    <div style="font-size: 1.5em; font-family: georiga; color: white; margin-bottom: -4px;"><span style="display: none;">$[user]</span><i><span class="money_symbol"></span><span class="money_amount"></span></i><br /></div>
                       <b>cash</b>
                   </td>
</tr>
               <tr>
                   <td colspan="3" style="height: 10px; vertical-align: bottom;">
                    {foreach $[user.mini_custom_field]}
                       {if $[user.mini_custom_field.name] == "Music"}
                       <div class="player">
                           <object width="180" height="20" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
                               <param name="wmode" value="transparent">
                               <param value="mp3=$[user.mini_custom_field.value]&loadingcolor=ffffff&buttoncolor=ffffff&slidercolor=000000;" name="FlashVars">
                           </object>
                       </div>
                       {/if}
                       {/foreach}
                   </td>
               </tr>
               <tr>
                   <td colspan="3" style="vertical-align: bottom;">
                       <div style="background-color: white; padding: 8px; position: relative; z-index: 0;">
                           <div style="font-size: 5em; position: absolute; z-index: 1; opacity: 0.2;">?</div>
                           <div style="position: relative; z-index: 2; text-align: justify; height: 55px;">
                           {if $[user.personal_text.message] != ''}
$[user.personal_text.message]
{else}
        This is a default personal text message! Edit your profile to change it to anything your heart desires!
{/if}
                           </div>
                       </div>
                       <div style="margin-top: -10px; color: white; font-size:2em;">?</div>
                   </td>
               </tr>
           </tbody>
       </table>
   </div>
   {else}
   {/if}
</div>
<div style="width: 220px;">
   <hr>
</div>
<div class="$[miniprofile_class]" id="avie">
   {if $[user.avatar]}
   <div class="avatar">$[user.avatar]</div><br />
   {/if}
</div>
<div style="margin-top: -191px; width: 220px; text-align: center; padding-top: 100px; padding-bottom: 30px; color: white; background-color: {if $[user.group]}#000$[user.group.color]{else}#a0a0a0{/if};">
   {if $[user.is_member]}
   {if $[user.group.name]}
   $[user.group.name]<br />
   {elseif $[user.rank.name]}
   $[user.rank.name]<br />
   {/if}
   {elseif $[user.is_guest]}
   Anonymous
   {/if}
   {if $[user.is_deleted]}
   Removed Member
   {/if}
   {if $[user.is_banned]}
   Banned Member
   {/if}
   {if $[user.custom_title]}
   <i>$[user.custom_title]</i><br />
   {/if}
</div>

<!-- THIS IS THE CSS -->
<style type="text/css">
   #avie {
    position: relative;
       top: -91px;
       left: 25px;
       z-index: 10;
   }
   .profilemini {
       padding: 100px 15px 15px 15px;
       margin-top: -12px;
       margin-left: -9px;
       width: 187px;
       height: 342px;
       opacity: 0;
       -webkit-transition-duration: 1s;
       transition-duration: 1s;
       position: relative;
       top: 200px;
   }
   .profilemini:hover {
       width: 187px;
       height: 342px;
       opacity: 1;
       -webkit-transition-duration: 1s;
       transition-duration: 1s;
       position: relative;
       top: 0px;
   }
</style>

<!-- END MINI PROFILE BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

Attachments:

[Brian]

N A T, all you should have to do is remove any if statements and foreach loops, then structure the HTML however you like starting from the <div class="profilemini" line up until right before the closing </div> tag for the mini-profile.

Also, any CSS within style tags in the mini-profile template should be in the style sheet as there's no sense in them being output over and over again every time a mini-profile is rendered on the page. CSS applies to every previous and future element on the page the moment the browser reads it for the first time.

Right now it's adding two mini-profiles because the avatar div (div id="avie") also has the mini-profile class for some reason.

[N A T]

Alright, I will play around with it, thanks Brian!

[Boy_Wonder]

I have a really odd question - is the a url I could use to load the pop up window from somewhere other then the PBN bar

[Brian]

Jul 8, 2014 1:45:27 GMT -8 Boy_Wonder said:

I have a really odd question - is the a url I could use to load the pop up window from somewhere other then the PBN bar

Nope. The function that opens the dialog is tied to the element in the PBN bar.

[Boy_Wonder]

Damnit - sadly due to the cbox on my site I can't use the pbn bar plugin as it lags as it scrolls even though yootil didn't

[Brian]

That's a bug with Chrome, Boy_Wonder.

The PBN bar is a fixed position element, but its HTML is contained within the wrapper. For some reason the PBN bar vanishes and leaves a phantom one when scrolling due to the fact that you changed the opacity of the wrapper.

An easy fix for this is to move the PBN bar's HTML out of the wrapper using Javascript. I suggest placing this in your global footer to ensure it runs after your plugins.

<script type="text/javascript">
$(document).ready(function(){
$('#pbn-bar-wrapper').insertAfter('#wrapper');
});
</script>

[Boy_Wonder]

Yes that's exactly the problem I was having! Thank you so much for this! it also seems to be affecting the UI scroll bar - could you edit it to fix that as well please (When you have some time!)

[Brian]

Jul 8, 2014 10:25:12 GMT -8 Boy_Wonder said:

Yes that's exactly the problem I was having! Thank you so much for this! it also seems to be affecting the UI scroll bar - could you edit it to fix that as well please (When you have some time!)

The workaround wouldn't work for that one. Its HTML needs to remain in the same place for it to work.

[Boy_Wonder]

Gah looks like I'm still stuck on trying to work out how to fix that problem then

[McRascal]

Silly question, and sorry if I skipped over someone already asking this, but would it be possible if certain NPCs could be used only by certain members instead of just limiting it to groups? Like if someone had their sort of OC NPC that only they could use aside from a category where other NPCs were allowed to be used by anyone?

[Brian]

Jul 8, 2014 19:18:31 GMT -8 McRascal said:

Silly question, and sorry if I skipped over someone already asking this, but would it be possible if certain NPCs could be used only by certain members instead of just limiting it to groups? Like if someone had their sort of OC NPC that only they could use aside from a category where other NPCs were allowed to be used by anyone?

For the sake of keeping the plugin's pages clean I don't plan to add a member search to it. You can simply create a hidden group for each NPC and add any necessary users to each NPC's group.

It wouldn't be possible to assign different permissions for each NPC per board/category. There's no simple way to keep track of that in the plugin's UI.

[McRascal]

Ah, that makes sense. Thanks for the idea on the groups, that'll make it easier on my board since I plan on using this plugin regardless (it's just so perfect!). Thanks for making it, Brian!