NPC Profiles

[Brian]

Feb 7, 2021 14:49:22 GMT -8 snapu said:

Hi! Great addon. For my forum we're trying to change the sizes of the avatar for the mini profile without breaking the layout in the process? We've tried to customize the theme's CSS in order to make the default size larger but that managed to break the code in the process. 

Any help or pointers would be appreciated? Thanks!

Are you trying to change just the avatars added by the plugin or are you trying to change them on regular posts as well?

Both would be handled by the same CSS, though if you're trying to change all of them that's more of a question for the Templates board than this thread.

[Ratty Poe]

I'm sorry to bump this up! This is a really amazing plugin! There's one thing that doesn't want to seem to cooperate haha

At first, it wasn't matching the width of the other mini profiles. Then I experimented and added width: 100%; to the CSS. This fixed it mostly, but as you can see for some reason it's indented over to the right and doesn't match up. I did try all the template modifications
muffled-raindrops.proboards.com/thread/4/npc-test?page=1&scrollTo=7

Also, for some reason when viewing on my mobile device (but on normal desktop view!), nothing shows up. It just has the normal Admin profile and no sword icon. Is it just me?

Many thanks in advance

EDIT I opened Inspector, I feel like I have narrowed it down but don't know where to go from there, I feel like it is something to do with my theme, so if it's too complicated or hard to figure out don't worry about it

[Brian]

Ratty Poe:

Since the mini-profile class already has padding it's pushing the elements you added away from the top left of the container. A lot of the problem stems from the fact that the styles in your mini-profile are declared inline via style attributes in Themes > Layout Templates > Mini-Profile instead of in the style sheet which makes it more difficult to make the NPC mini-profile match the existing mini-profiles. (Unrelated: You're currently missing a closing </div> tag at the end of that layout template)

For example, the white background color can be assigned to the existing .mini-profile class that exists in the first <div> on both your default mini-profiles and the NPC mini-profiles, as can the text-align and font properties in the <div> element that follows it.

You can create a new class for the <div> that surrounds the $[user] variable and assign the styles that exist there to that new class.

Once all of that's done there should be no need for the .NPCProfile class you added.

[Ratty Poe]

Wow thank you! That did it!

[alvarez]

Hello,

I tried adding extra fields for the npc profile, but they don't appear. I added them through 'build plugin' on the 'npc list'. They appear in the list when I manage it, but not on the profiles on the forum. Am I skipping a step?

Edit: Managed it. Now how do I get those some ields in the expansion?  

[Brian]

Aug 22, 2021 4:18:34 GMT -8 alvarez said:

Hello,

I tried adding extra fields for the npc profile, but they don't appear. I added them through 'build plugin' on the 'npc list'. They appear in the list when I manage it, but not on the profiles on the forum. Am I skipping a step?

Edit: Managed it. Now how do I get those some ields in the expansion?  

You would do the exact same thing in the expansion plugin.

[Former Member]

Brian, I just wanted to say, finally got around to doing the latest version, and WOW! Fantastic looking.

I had to do the template edits for names/avatars, and even that was easy to do.

Thanks a lot for such an important plugin for the RP community!

[JD]

Brian
Which elements does the list of NPC options pull from? I have a lot of NPC profiles in this plugin + expansion and when I click the icon on a post, the list of names is so long it goes off the screen. How can I edit the css of this list - e.g. edit the padding to bring the names closer together and the list shorter, or maybe add a scroll bar?
I'm not sure which elements of the style sheet the boxes are using...?

[Brian]

Jan 7, 2023 17:23:32 GMT -8 JD said:

Brian
Which elements does the list of NPC options pull from? I have a lot of NPC profiles in this plugin + expansion and when I click the icon on a post, the list of names is so long it goes off the screen. How can I edit the css of this list - e.g. edit the padding to bring the names closer together and the list shorter, or maybe add a scroll bar?
I'm not sure which elements of the style sheet the boxes are using...?

The example image doesn't seem to be appearing in your post.

Have you categorized your NPCs? Adding them to menu categories would shorten the list by placing many of them in submenus.

Adding a scrollbar wouldn't be possible as it would prevent the submenus from showing properly since they're children of the main menu. Scrollbars are part of the overflow CSS property which determines whether or not content beyond the boundaries of the element should be outright hidden from view.

The outermost element of the menu uses the class .o-npc-menu.

[JD]

Jan 10, 2023 13:29:00 GMT -8 Brian said:

Jan 7, 2023 17:23:32 GMT -8 JD said:

Brian
Which elements does the list of NPC options pull from? I have a lot of NPC profiles in this plugin + expansion and when I click the icon on a post, the list of names is so long it goes off the screen. How can I edit the css of this list - e.g. edit the padding to bring the names closer together and the list shorter, or maybe add a scroll bar?
I'm not sure which elements of the style sheet the boxes are using...?

The example image doesn't seem to be appearing in your post.

Have you categorized your NPCs? Adding them to menu categories would shorten the list by placing many of them in submenus.

Adding a scrollbar wouldn't be possible as it would prevent the submenus from showing properly since they're children of the main menu. Scrollbars are part of the overflow CSS property which determines whether or not content beyond the boundaries of the element should be outright hidden from view.

The outermost element of the menu uses the class .o-npc-menu.

Damn, apologies on the image. Not sure why that didn't load properly. I'll try loading it in again at the bottom of this post...

I have categorised them yes. But the best ways I can categorise them either leave the main menu too long or the secondary menu too long - I can't win! XD Unless it's possible to make a third/fourth categorisation level so I can funnel them down to shorter lists? 


 

[Brian]

Jan 17, 2023 21:04:48 GMT -8 JD said:

Jan 10, 2023 13:29:00 GMT -8 Brian said:

The example image doesn't seem to be appearing in your post.

Have you categorized your NPCs? Adding them to menu categories would shorten the list by placing many of them in submenus.

Adding a scrollbar wouldn't be possible as it would prevent the submenus from showing properly since they're children of the main menu. Scrollbars are part of the overflow CSS property which determines whether or not content beyond the boundaries of the element should be outright hidden from view.

The outermost element of the menu uses the class .o-npc-menu.

Damn, apologies on the image. Not sure why that didn't load properly. I'll try loading it in again at the bottom of this post...

I have categorised them yes. But the best ways I can categorise them either leave the main menu too long or the secondary menu too long - I can't win! XD Unless it's possible to make a third/fourth categorisation level so I can funnel them down to shorter lists?

Unfortunately it only supports two levels. The best I can offer in that regard is making another category and reducing the amount in the other one.

The menu repurposes the existing classes for the menus used in ProBoards which don't appear to take the browser height into consideration, likely because most of them contain very few items with the exception of the one in the Security Log.

However, now that I know the issue is limited to the submenus I've taken a closer look and it is possible to add a scrollbar to the submenus using CSS.

.o-npc-menu__submenu {
   overflow: auto;
   max-height: 100vh;
}

[homogenix]

Hello Brian, do you know how to put a background image on the NPCs mini-profiles? I only know how to do it via CSS and that doesn't work with them

[Brian]

Jan 18, 2023 15:05:38 GMT -8 homogenix said:

Hello Brian , do you know how to put a background image on the NPCs mini-profiles? I only know how to do it via CSS and that doesn't work with them

Not by default since the mini-profile HTML option in the settings only affects the inner HTML of the mini-profile, but I can offer a workaround achieved by editing the plugin.

In Plugins > Build > NPC Profiles click on the Components tab and find the JavaScript section.

Scroll to line 279 which should look like this:
$mini_parent.append('<div class="mini-profile is-npc-element o-npc-mini">'+plugin.mini(post_id,npc)+'</div>');
And change it to this:
$mini_parent.append('<div class="mini-profile is-npc-element o-npc-mini o-npc-mini--'+npc+'">'+plugin.mini(post_id,npc)+'</div>');
Then save the changes to the plugin via the Save Changes button in either the right sidebar or the bottom of the page.

This should let you target the NPC mini-profile with CSS based on the username you've given the NPC. So if your NPC's username in the plugin settings is npc1 you can use this CSS rule to target it:
.o-npc-mini--npc1 {
    background-image: url(IMAGE URL HERE);
}

[homogenix]

Jan 19, 2023 12:48:33 GMT -8 Brian said:

Jan 18, 2023 15:05:38 GMT -8 homogenix said:

Hello Brian , do you know how to put a background image on the NPCs mini-profiles? I only know how to do it via CSS and that doesn't work with them

Not by default since the mini-profile HTML option in the settings only affects the inner HTML of the mini-profile, but I can offer a workaround achieved by editing the plugin.

In Plugins > Build > NPC Profiles click on the Components tab and find the JavaScript section.

Scroll to line 279 which should look like this:
$mini_parent.append('<div class="mini-profile is-npc-element o-npc-mini">'+plugin.mini(post_id,npc)+'</div>');
And change it to this:
$mini_parent.append('<div class="mini-profile is-npc-element o-npc-mini o-npc-mini--'+npc+'">'+plugin.mini(post_id,npc)+'</div>');
Then save the changes to the plugin via the Save Changes button in either the right sidebar or the bottom of the page.

This should let you target the NPC mini-profile with CSS based on the username you've given the NPC. So if your NPC's username in the plugin settings is npc1 you can use this CSS rule to target it:
.o-npc-mini--npc1 {
   background-image: url(IMAGE URL HERE);
}

Thanks! Worked like a charm

[ViceCSR]

It is possible to count posting/likes for this NPC's and showing that in mini-profiles?