Avatar Banners

[Kami]

Aug 6, 2017 14:18:26 GMT -8 Vapers United said:

If I make the MP narrower it would work, would you like me to try that?

I think that's the only way! My example used 4px on each side for the wrap around. If you can do it with 3px and make it look right, that would be OK, too.

How is the appearance on this?

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

It's a little more difficult to see with the double banners since they're so close together, but still visible.

[Vapers United]

Do the two banners need to be that close together vertically?

In this image, I separated them by 2 more pixels (I'm pretty sure it was 2), and changed the wrap to the top.

What do you think of this?...

The wraps could look more rounded, but this was done as quickly as I could. They looked "sharp" before. I hope you agree with the rounded look.

EDIT:

I noticed that the banner is 4px extended on the left side, and 5px extended on the right. Changing them both to 4px may help with aesthetics.

[Kami]

Aug 6, 2017 16:13:01 GMT -8 Vapers United said:

Do the two banners need to be that close together vertically?

In this image, I separated them by 2 more pixels (I'm pretty sure it was 2), and changed the wrap to the top.

What do you think of this?...

The wraps could look more rounded, but this was done as quickly as I could.

EDIT:

I noticed that the banner is 4px extended on the left side, and 5px extended on the right. Changing them both to 4px may help with aesthetics.

Unfortunately if I move it one pixel to the other direction it becomes 1px shorter ;x I saw that too, and I'm not sure how to fix that with the exception of making the width of the mini profile an odd number.

Additionally, the reason they are so close together is due to the rest of the information in the mini profile. I assumed (perhaps erroneously) that you didn't want a massive profile length so I tried to keep things as condensed as possible. I can fix that though!

[Vapers United]

Aug 6, 2017 16:26:24 GMT -8 Kami said:

Aug 6, 2017 16:13:01 GMT -8 Vapers United said:

Do the two banners need to be that close together vertically?

In this image, I separated them by 2 more pixels (I'm pretty sure it was 2), and changed the wrap to the top.

What do you think of this?...

The wraps could look more rounded, but this was done as quickly as I could.

EDIT:

I noticed that the banner is 4px extended on the left side, and 5px extended on the right. Changing them both to 4px may help with aesthetics.

Unfortunately if I move it one pixel to the other direction it becomes 1px shorter ;x I saw that too, and I'm not sure how to fix that with the exception of making the width of the mini profile an odd number.

Additionally, the reason they are so close together is due to the rest of the information in the mini profile. I assumed (perhaps erroneously) that you didn't want a massive profile length so I tried to keep things as condensed as possible. I can fix that though!

I guess we'll have to live with the first one.

On the second one, I'm OK with the whole MP getting longer (taller/whatever).

EDIT:

Unfortunately if I move it one pixel to the other direction it becomes 1px shorter ;x I saw that too, and I'm not sure how to fix that with the exception of making the width of the mini profile an odd number.

Wouldn't reducing the overall width of the banner by 1px fix that?

[Kami]

Aug 6, 2017 16:29:04 GMT -8 Vapers United said:

Wouldn't reducing the overall width of the banner by 1px fix that?

Well yes, but then you have almost zero overhang to speak of and it wouldn't be worth it to add the additional CSS that makes it look like the banner is wrapping around.


EDIT: Sorry, going to have to call it a night here. Some complications have arisen family wise.

[Vapers United]

Aug 6, 2017 16:49:38 GMT -8 Kami said:

Well yes, but then you have almost zero overhang to speak of and it wouldn't be worth it to add the additional CSS that makes it look like the banner is wrapping around.


EDIT: Sorry, going to have to call it a night here. Some complications have arisen family wise.

Sorry, but I don't understand. There are now 9px of wrap around with 4px on the left and 5px on the right. There's not a way to make it 4px on the left and 4px on the right?

But we'll continue this tomorrow. Pleasant Dreams.

[Kami]

I will adjust it tomorrow and see what you think of it (:

[Kami]

Aug 6, 2017 17:06:14 GMT -8 Vapers United said:

Aug 6, 2017 16:49:38 GMT -8 Kami said:

Well yes, but then you have almost zero overhang to speak of and it wouldn't be worth it to add the additional CSS that makes it look like the banner is wrapping around.


EDIT: Sorry, going to have to call it a night here. Some complications have arisen family wise.

Sorry, but I don't understand. There are now 9px of wrap around with 4px on the left and 5px on the right. There's not a way to make it 4px on the left and 4px on the right?

But we'll continue this tomorrow. Pleasant Dreams. :)

I couldn't stop thinking of a fix so :x

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

How's this? I reduced the width of the banner by one pixel, hopefully it's centred now? also switched the "wrap around" bits to the top instead of the bottom, as well as increased the distance between the two banners, and rounded the corners just a little.

[Vapers United]

Aug 6, 2017 19:46:04 GMT -8 Kami said:

I couldn't stop thinking of a fix so :x

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

How's this? I reduced the width of the banner by one pixel, hopefully it's centred now? also switched the "wrap around" bits to the top instead of the bottom, as well as increased the distance between the two banners, and rounded the corners just a little.

I laughed out loud when I saw that you came back for this. Lady, you are FANTASTIC!!!

It's beautiful!  And I didn't have to learn Latin.

[Kami]

Im out picking up dinner but when I get back home I'll walk you through the CSS (:

[Vapers United]

Aug 6, 2017 20:23:44 GMT -8 Kami said:

Im out picking up dinner but when I get back home I'll walk you through the CSS (:

Thank you! Enjoy your dinner.

[Kami]

Vapers United

OK so to preface: the CSS values may not be final; depending on other customisations you may have done to your forum, you may need to tweak these individual values to get them just right. They shouldn't be too far off however.

Step 1: Template Change - "Wrap Around" Bits

In order to get the wrap around bits, I need you to edit your templates one more time. Put the following after the opening {if} of the first banner coding, but before the opening <div>, as indicated in red below:

{if $[user.group]}
(in other words, right here)
<div class="mp-group-banner">


This is what you should put where the red text is:

<div class="arrow-left"></div>
<div class="arrow-right"></div>

NEXT, I'm going to need you to put the following above the second banner coding, again after the opening {if} but before the opening <div>:

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

<div class="arrow-left-2"></div>
<div class="arrow-right-2"></div>

---

Step 2 - Adjustments for the second banner

I'm going to need you to find this line:

<div class="info">

and add the following that I've marked in red:

<div class="info" {if $[user.group.name] == "Vaping Blips Moderator"}style="margin-top:60px!important;"{/if}>

**NOTE: I will teach you how to add multiple groups to the secondary banner coding AFTER this is done.

---

Step 3 - Add the CSS:

This should be a simple copy-paste job. ALL values are editable, so if you need to change any widths or distances look for properties that have 'px' in the value; if you need to change colour, look for properties with a # in the value.

This should REPLACE the previous CSS that I provided.

.mini-profile {
    margin-left: 2px;
    color: #000;
    border: 2px solid #97cfe8!important;
    z-index: 2;
    width: 145px;
}

/* == Style the group banners == */
.mp-group-banner, .mp-group-banner-2 {
    display: block;
    width: 173px;
    text-align: center;
    background-color: #bde3f7;
    color: #000000;
    border: 2px solid #97cfe8;
    padding-top: 2px;
    padding-bottom: 2px;
    position: absolute;
    margin-left: -16px!important;
    margin-bottom: 5px!important;
    z-index: 1;
    border-radius: 0px 0px 3px 3px;
}

.mp-group-banner-2 {
    margin-top: 30px;
}

/* == Moves everything to fit under banners == */
.mini-profile .info {
    color: #000!important;
    position: relative;
    margin-top: 35px;
}

/* == Wrap around bits == */
.arrow-left, .arrow-left-2 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 0px solid transparent; 
    border-right: 5px solid #6c9db2;
    position: absolute;
    margin-left: -16px;
    margin-top: -4px;
    z-index: 0;
}

.arrow-right, .arrow-right-2 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 5px solid #6c9db2;
    position: absolute;
    margin-left: 156px;
    margin-top: -4px;
    z-index: 0;
}

.arrow-right-2, .arrow-left-2 {
    margin-top: 26px;
}

Let me know how this goes. If you have any difficulties let me know, and as a reminder please do not append any additional issues that would be separate from the task at hand to your next post (eg: adding more groups to display a secondary banner, or any issues not related to the avatar banners themselves).

I'm going to bed for real this time though, so I'll touch base again in the morning (:

[Vapers United]

I didn't have to do anything but copy your code.

Thought you'd like to see the fruit of your labor...

I noticed that there's a new width for everyone. I also noticed that the banner titles are perfectly centered. Looks like you got everything in one try. At least, in one try for me. I know you spent a lot of time with this in your Test forum.

Great job!

You're the best!!!

NOTE:

The Vaping Blips Admin dude hasn't made a post, so I couldn't show you one with two banners... yet.

.

[Kami]

Vapers United - HUZZAH! I am still tired so I'm going to attempt to go back to sleep, but I'll show you how to add additional groups to the secondary banner bits when I am properly awake / if I can't go back to sleep.

[Kami]

Vapers United - So adding additional groups is super easy, especially in comparison to what we just did.

The main thing you need is this: || $[user.group.name] == "Name Here Case Sensitive"

I'm sure you recognise the above formatting, yes? This is how you will add additional groups to any of the coding that exists IF you want them to take on the properties of other groups. All you have to do is find whatever content you want to appear for an additional group, and append the above line after the last closing quote " but before the closing bracket }

So for example, if you wanted to add the 'administrator' group to have a secondary banner, you'd simply add the above to the end of that coding, replacing "Name Here Case Sensitive" with the group name, like so:

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

If you wanted to add in different content for a new group, you would use the 'elsif' tag, in this format:

{elseif $[user.group.name] == "Name Here Case Sensitive"}
--- the content you want for the above group

So say you wanted to use the secondary banner for the Administrator group, but with a different text. You'd modify it like so:

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

Notice how I added the green text to make sure that "Safe Zone Moderator" only appeared for the Vaping Blips group, the blue for the admin text, and then the closing if tag in purple.

You shouldn't have to add the opening if or closing if for the rest of the code I've provided, however, just either the first thing you append to the code (the || etc), or the new elseif.

Some background on what this does.

|| this means "and". So if you have a code that says "if the group is X, do action", adding a || to the code followed by a repeat of the code with a new group, it will then say "if the group is X, and if the group is Y, do action".


elseif is similar. If you have a code that says "if group is X do action A", adding an else if changes it to "If group is X do action A, or else if group is Y do action B".

I hope this all makes sense!