Avatar Banners

[Kami]

I have re-written the code to be shorter and far simpler (: I was just about to post that. However I will remind you that I a) have already said this, and b) asked you to let me do this one step at a time. I don't mind your eagerness but I am taking a significant time to write all this for you in the easiest way possible (:

Anyway, sorry for the delay, I had a family emergency to take care of.

Next, we are going to handle the avatar banners.


Assuming you still want the content in the same location as before, then you will need to put the following code (in the black box) after these lines in your mp templates:


{if $[user.personal_text.message]}

$[user.personal_text]<br />

{/if}

<div class="mp-group-banner">
    {if $[user.group.name] == "Administrator"}
        Site Owner
    {elseif $[user.group.name] == "Admin"}
        Contest Organizer
    {elseif $[user.group.name] == "Global Moderator" || $[user.group.name] == "Vaping Blips Moderator" || $[user.group.name] = "Contest Organizer" || $[user.group.name] == "Facebook Leader" || $[user.group.name] == "Member Vendor" || $[user.group.name] == "Banned"}
        $[user.group.name]
    {elseif $[user.group.name] == "Supplier"}
        Forum Supplier
    {elseif $[user.group.name] == "Advocate"}
        E-Cig Advocate
    {elseif $user.group.name] == "Strike One"}
        Strike 1 - Barred
    {elseif $[user.group.name] == "Strike Two"}
        Strike 2 - Barred
    {elseif $[user.group.name] == "Strike Three"}
        Strike 3 - Barred
    {/if}
</div>

<!-- This is for the second Vaping Blips banner -->
{if $[user.group.name] == "Vaping Blips Moderator"}
    <div class="mp-group-banner-2">
        Safe Zone Moderator
    </div>
{/if}

Let me know when that is done, and I will provide you with the CSS.

[Vapers United]

Got that put in and checked.

Changed this:

{if $[user.group.name] == "Administrator"}
Site Owner

to:

{if $[user.group.name] == "Administrator"}
Site Administrator

And all looks good for the members that I looked at.

[Kami]

Fantastic. I'm still sorting out the CSS (I'm trying to do that wrap around bit) but as of right now you can use this:

/* == Style the group banners == */
.mp-group-name, .mp-group-name-2 {
  display: block;
  width: 172px;
  text-align: center;
  background-color: #C6E7F8;
  color: #000000;
  border: 1px solid #000000;
  margin-bottom: 10px;
}

Change the red text to the appropriate hex colours
Change the green text to the appropriate pixel distance

I'm still dealing with the aforementioned family emergency so I may not finish the new CSS tonight.

[Vapers United]

Aug 4, 2017 20:26:25 GMT -8 Kami said:

I'm still dealing with the aforementioned family emergency so I may not finish the new CSS tonight.

Thank you for this! I really appreciate you working with me today, considering your family emergency!!!

I'll get it installed and report back.

[Kami]

It's provided a bit of distraction, so it's not too bad. I have a lull in the action so to speak and I have an update:

I'm not sure I can personally get the wrap around effect with pure CSS. I know it's possible, but that's something I haven't ever done myself.

I can, however, get the overhang so it kinda looks similar, though I run into a problem with the one group that will have the double-banner. Now, I can potentially fix that, if when I provide the CSS, you link me to a post by that person so I can see the banners in action and make a user-specific adjustment.

Thoughts?

[Vapers United]

Glad you're getting a break from it. I hope it's not too serious.

I'm still working on feedback for what you've already given me today. There are some issues that I will report later. But in the meantime, could you do this "you link me to a post by that person" thing without being able to access the forum? I tried configuring the site for you as a guest, but you couldn't see much.

Another issue is that the Vaping Blips Moderator hasn't made a post yet. His forum is being set up for a move to my forum, so all he has now is an account. But I could give myself a second banner for you, and make a post in the Sandbox. Do you think that would work?

[Vapers United]

OK. Two things:

The code you supplied did nothing at all for the Banners, so I played with it and found what must have been a typo (you are probably exhausted). This is what worked for the people who get an Avatar Banner...

/* == Style the group banners == */
.mp-group-banner, .mp-group-banner-2 {
display: block;
width: 172px;
margin-left: -12px; <----- had to add this again.
text-align: center; ..<----- is there a center center? (see picture below).
background-color: #bde3f7;
color: #000000;
border: 2px solid #97cef8;
margin-bottom: 10px;
}

But there is an unfortunate side effect for everyone else's MP. This code adds a 4px line of color 97CEF8 below the avatar itself, being 2px each where a text title like Contest Organizer would be.

<div class="mp-group-banner">
{if $[user.group.name] == "Administrator"}
Site Owner
{elseif $[user.group.name] == "Admin"}
Contest Organizer
{elseif $[user.group.name] == "Global Moderator" || $[user.group.name] == "Vaping Blips Moderator" || $[user.group.name] = "Contest Organizer" || $[user.group.name] == "Facebook Leader" || $[user.group.name] == "Member Vendor" || $[user.group.name] == "Banned"}
$[user.group.name] <---------------------------------------- I think it falls apart here.
{elseif $[user.group.name] == "Supplier"}
Forum Supplier
{elseif $[user.group.name] == "Advocate"}
E-Cig Advocate
{elseif $user.group.name] == "Strike One"}
Strike 1 - Barred
{elseif $[user.group.name] == "Strike Two"}
Strike 2 - Barred
{elseif $[user.group.name] == "Strike Three"}
Strike 3 - Barred
{/if}
</div>

<!-- This is for the second Vaping Blips banner -->
{if $[user.group.name] == "Vaping Blips Moderator"}
<div class="mp-group-banner-2">
Safe Zone Moderator
</div>
{/if}

[Kami]

As I've mentioned before, please edit your posts instead of double posting (:

To answer in order:

1. No, I cannot see anything if guests do not have access. I am not quite sure how you would expect otherwise ;x

2. Excellent catch on that class name error! You're 100% correct, I had the name totally wrong.

3. Similarly, good catch on the margin. Boy, I really shouldn't code when I'm stressed, apparently haha.

4. I think the titles are centred within the banner div itself -- you may, however, need to play around with the left-margin amount to centre it correctly.

5. For the 4px line issue, replace this: $[user.group.name] with $[user.group] and see how that goes.

EDIT: 6. Re: Supplier / Forum Supplier, I'm not sure why that's not working. I've made sure to specify specifically that it should say FORUM supplier for anyone in the supplier group -- see if fixing #5 also fixes this issue. If not, let me know.

7. Feel free to do that for the secondary group (adding it to your own profile). You would need to change this:

{if $[user.group.name] == "Vaping Blips Moderator"}
   <div class="mp-group-banner-2">
       Safe Zone Moderator
   </div>
{/if}

To also include your user group, so add || $[user.group.name] == "Administrator" to the end of that, before the closing curly bracket.

---

UPDATE: I figured out a much simpler fix for the earlier issue I mentioned that should not require me to view the thread at ALL. (:

kamitest2.proboards.com/thread/2/test?page=1&scrollTo=3

Let me know what you think (the colours are just so you can see everything, obviously you'd be free to switch it up as you need)

[Vapers United]

1. I didn't expect anything to change. I asked how it might be able to work for you.

4. Playing with the left-margin amount changes the positioning of the Banner text box, but not the text inside of it.

5. Replace this: $[user.group.name] with $[user.group] where? Changing it in the line where I said "I think it falls apart here" didn't fix the 4px line, but it made the text color of Supplier (that should say Forum Supplier) turn Green.

6. The Avatar Banners work perfectly for Administrator and Admin. It falls apart somewhere after that. I double checked the spelling of Supplier in the Member Groups, so that's not it. Trying number 5 created a different error, as mentioned above.

7. Could I do it this way, to get its own title?

{if $[user.group.name] == "Vaping Blips Moderator"}
<div class="mp-group-banner-2">
Safe Zone Moderator
</div>
{elseif $[user.group.name] == "Administrator"}
<div class="mp-group-banner-2">
Site Creator
</div>
{/if}

The first title says Site Administrator.

[Kami]

1. Well I mean, it wouldn't, that's my point ;x If it is not guest accessible, then it is not guest accessible, period.

4 & 5 -- Okay, change it back. That variable should work to display the text there (I just tried it on the test forum). I think I understand what the problem is: the members of hidden groups don't have anything declared so let me see if this makes a difference:

after this line: Strike 3 - Barred
but BEFORE this: {/if}

Add: {else}

SCRATCH THAT. I know what's going on lmao. It's because I didn't put the div itself in if tags. Give me a minute and Ill whip you up a fix!

And leave it blank. I am not 100% sure this will work, but if not I'll have to play around some more. As I'm sure you can appreciate, unless I create an account for each group AND duplicate the groups exactly on my test forum, I cannot accurately test this on my own.

7. There should be no reason to do that. I want to test whether or not this works so you having the incorrect title should be 100% irrelevant for testing purposes. Like... You will wind up removing it anyway, and the less you have to delete and potentially mess up the better (not a slight on you, just in general for any user). BUT this is now irrelevant because I've figured out a fix that won't require me to see the profile.

---

Try this to fix the bar for hidden groups

{if $[user.group]}
<div class="mp-group-banner">
    {if $[user.group.name] == "Administrator"}
        Site Owner
    {elseif $[user.group.name] == "Admin"}
        Contest Organizer
  {elseif $[user.group.name] == "Global Moderator" || $[user.group.name] == "Vaping Blips Moderator" || $[user.group.name] = "Contest Organizer" || $[user.group.name] == "Facebook Leader" || $[user.group.name] == "Member Vendor" || $[user.group.name] == "Banned"}
        $[user.group.name]
    {elseif $[user.group.name] == "Supplier"}
        Forum Supplier
    {elseif $[user.group.name] == "Advocate"}
        E-Cig Advocate
    {elseif $user.group.name] == "Strike One"}
        Strike 1 - Barred
    {elseif $[user.group.name] == "Strike Two"}
        Strike 2 - Barred
    {elseif $[user.group.name] == "Strike Three"}
        Strike 3 - Barred
    {/if}
</div>

<!-- This is for the second Vaping Blips banner -->
{if $[user.group.name] == "Vaping Blips Moderator"}
    <div class="mp-group-banner-2">
        Safe Zone Moderator
    </div>
{/if}
{/if}

I added a check in red to make sure that the banner divs display ONLY if the user is in a group -- since "hidden" groups don't register as the user being in a group, this should work for non-grouped users AND hidden group users.

Check it out and let me know.

[Vapers United]

If this is what you meant:

Strike 3 - Barred
{else}
{/if}

it didn't fix anything. The 4px lines are still there, and Supplier did not change to Forum Supplier.

#1 ???But you said you could see one of the two links I gave you???

#7 Even still, would doing it that way work, if someone else were to get a 2nd banner?

[Kami]

Aug 5, 2017 0:32:53 GMT -8 Vapers United said:

If this is what you meant:

Strike 3 - Barred
{else}
{/if}

it didn't fix anything. The 4px lines are still there, and Supplier did not change to Forum Supplier.

#1 ???But you said you could see one of the two links I gave you???

#7 Even still, would doing it that way work, if someone else were to get a 2nd banner?

Okay let's back up, sorry.

1. I was able to see ONE of the two links you previously posted. However, you have since returned the forum to guests must log in, so if you send me a link with the forum closed (IE "without [me] being able to access the forum") then I will not be able to see anything.

4. I'm not able to duplicate this on my end so I may need to view the forum again. Hold off on this until you try #5.

5. Please see my previous post's edit.

7. It would work, but it's sloppy. If you need to add more secondary banners in the future I can give you a code for that but let's tackle one issue at a time okay? We haven't even gotten the single banners working 100% and you're jumping ahead again.

[Vapers United]

#5 didn't work.

Aug 5, 2017 0:19:20 GMT -8 Kami said:

Try this to fix the bar for hidden groups

{if $[user.group]}
<div class="mp-group-banner">
    {if $[user.group.name] == "Administrator"}
        Site Owner
    {elseif $[user.group.name] == "Admin"}
        Contest Organizer
  {elseif $[user.group.name] == "Global Moderator" || $[user.group.name] == "Vaping Blips Moderator" || $[user.group.name] = "Contest Organizer" || $[user.group.name] == "Facebook Leader" || $[user.group.name] == "Member Vendor" || $[user.group.name] == "Banned"}
        $[user.group.name]
    {elseif $[user.group.name] == "Supplier"}
        Forum Supplier
    {elseif $[user.group.name] == "Advocate"}
        E-Cig Advocate
    {elseif $user.group.name] == "Strike One"}
        Strike 1 - Barred
    {elseif $[user.group.name] == "Strike Two"}
        Strike 2 - Barred
    {elseif $[user.group.name] == "Strike Three"}
        Strike 3 - Barred
    {/if}
</div>

<!-- This is for the second Vaping Blips banner -->
{if $[user.group.name] == "Vaping Blips Moderator"}
    <div class="mp-group-banner-2">
        Safe Zone Moderator
    </div>
{/if}
{/if}

I added a check in red to make sure that the banner divs display ONLY if the user is in a group -- since "hidden" groups don't register as the user being in a group, this should work for non-grouped users AND hidden group users.

Check it out and let me know.

This fixed the 4px line, but the Supplier still says Supplier instead of Forum Supplier.

[Kami]

Aug 5, 2017 0:42:06 GMT -8 Vapers United said:

This fixed the 4px line, but the Supplier still says Supplier instead of Forum Supplier.

It absolutely worked since I was not attempting to fix the supplier line with this :P Like I said, I was skipping over #4 and explicitly stated that the fix was for the bar on hidden groups.

Does everything else work otherwise, discounting the supplier / forum supplier issue? Please also ignore any CSS alignment issues for the time being. I just want to get the content fixed.

---

EDIT: So I noticed earlier you said, "And all looks good for the members that I looked at."

Did you not check the Supplier group at this point? Because the CSS I provided did not affect the displayed content in any manner except aesthetically. If it displayed "Forum Supplier" without the CSS, I cannot fathom why it would change with the CSS. If you did not check the supplier group, that's fine. I have an idea on how to test it if so.

[Vapers United]

I believe that comment was referring to the group names appearing properly under the usernames, and repairing the broken MPs. The Supplier has never shown Forum Supplier in his Avatar Banner.

EDIT:
And I have only tested the members in the pictures posted earlier. I have not tested Barred/Banned, or any of the others yet. I stopped when I saw the 4px lines.