Avatar Banners

[Kami]

Aug 5, 2017 13:37:04 GMT -8 Vapers United said:

If the "wrap around" only touches the edges, then it's not really wrapping around?

Well, of course the MP portion that holds the avatar and text info would have to "look" narrower so the banner could touch the 172px boundary. See what I mean?

I guess the border of the MP around the avatar could be the normal border color, with everything inside that being the background color, and everything outside of the border could be transparent... to accommodate the banner's wrap around touching the 172px edges.

Is transparency an option?

No, that doesn't make sense.

If you want the banner to wrap around, in other words exceed the boundaries of the mini profile, then the mini profile would need to be smaller than the width of the banner. How this is accomplished can vary; either we make the MP itself smaller, or we make the table cell for the entire mini profile column in the thread list wider, which would mean that the post body area would also need to be smaller.

If you want the banner to touch the edges then that is mutually exclusive to it wrapping around. Think of a present. If you wrap a box, the size of the paper exceeds the size of the box. If you simply want the paper to touch the edges, then it won't wrap around.

What I'm thinking you're intending to say, however, is that you want the banner to be 172 px and still exceed the width of the mini profile, without changing the mini profile's width. Would that be accurate? If not, please be more concise in what you're expecting (a pictorial demonstration could be useful here) (:

[Vapers United]

I edited that quite a number of times. Please read it again. I think I explained it much better.

EDIT:
Everything is to remain within the normal 172px boundary. The border of the MP around the avatar would be inset 3-4px on each side, so the banner would have 3-4px on each side to wrap around it, touching the outer 172px boundary on each side.

[Kami]

Aug 5, 2017 13:57:06 GMT -8 Vapers United said:

I edited that quite a number of times. Please read it again. I think I explained it much better.

EDIT:
Everything is to remain within the normal 172px boundary. The border of the MP around the avatar would be inset 3-4px on each side, so the banner would have 3-4px on each side to wrap around, touching the outer 172px boundary on each side.

I'm sorry, I'm still not comprehending. Could you perhaps demonstrate with a picture of what you're imagining?

[Vapers United]

Let's agree that the entire thing, reddish pink and all, is 172px wide, OK?

The reddish pink would be made transparent, so the banner has room to wrap around within the 172px boundary. That reddish pink is 4px wide on each side, so the appearance would be that the MP is 164px wide with a 4px wrap around on each side.

EDIT:
The only potential issue I see is that the MP of everyone who doesn't get an Avatar Banner would appear to be 8px wider.

Could you post an image that describes what you had in mind before I started this, please?

[Kami]

Vapers United - as a heads up I'm dealing with the aftermath of last night's emergency so my replies will be slow.

[Kami]

Ive had some time to think about this and what you're asking is what I had done to begin with.

172px is the MAXIMUM width we have to work with. Whether we make it transparent or actually reduce the width, the mp container will have to be less than 172px in order to have the banners fit within the containing table cell and still exceed the boundary (or perceived boundary) of the mp container.

[Vapers United]

OK, then we are in agreement. I hope things are going well with family. I understand if you want/need the day off, so either way, I'm ready to proceed when you are.

[Kami]

Aug 5, 2017 16:22:01 GMT -8 Vapers United said:

OK, then we are in agreement. I hope things are going well with family. I understand if you want/need the day off, so either way, I'm ready to proceed when you are.

My mother is currently in the hospital after an emergency situation so it's not really... great. I will hopefully be able to work on this this weekend, but thank you for understanding if I'm not able to do so.

[Chris]

Aug 5, 2017 16:46:38 GMT -8 Kami said:

My mother is currently in the hospital after an emergency situation so it's not really... great. I will hopefully be able to work on this this weekend, but thank you for understanding if I'm not able to do so.

So sorry to hear that Kami , family always take precedence. I hope it all works out

[Kami]

Chris - thank you (:

Vapers United - OK have a take a look at this:

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

I kept the default mini profile width, which is 150px. The table cell is 174px to accommodate for the mp's inner padding. I made the banner width exactly 174px.

The overhang isn't particularly noticeable, and as you can see it runs dangerously close to overlapping any long bodies of text, but not quite. If you're OK with this set up (colours not final, of course) then we can get to the CSS today.

[Vapers United]

I do like it and I think I see where you're going, but if the MP boundary is 172px, how is 174px supposed to fit? Wouldn't that mean having to make adjustments to MP boundary? Never mind, I understand now.

Edit:
And I'd also like to have 2px borders on the MP and the Banner.

[Kami]

Aug 6, 2017 12:33:17 GMT -8 Vapers United said:

I do like it and I think I see where you're going, but if the MP boundary is 172px, how is 174px supposed to fit? Wouldn't that mean having to make adjustments to MP boundary? Never mind, I understand now.

Edit:
And I'd also like to have 2px borders on the MP and the Banner.

The 2px border on the banner is doable, but like I said. You're already overhanging into the post body with the border, and adding a thicker border is going to encroach on that space even more.

The 2px border on the mp is also doable, but in my opinion it's... aesthetically odd to have the same weight border on the mp as a whole and the banner -- here is an example of how it looks:

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

EDIT: I made a typo earlier as well: the table cell is 172px as you noted, but the banner is 174px so you can have that moderate overhang. The banner div is positioned absolutely, which means that it's removed from the flow of other elements on the page allowing it to overlap other elements.

EDIT 2: I went ahead and used the hex colours you specified for a more accurate representation of the outcome.

[Vapers United]

Before I go any further, I want to tell you how much I appreciate you coming back here to work on this with so much going on!!!


Let's continue with making the wrap around, please, and let me try adding the code when you're to that point. I'll leave one tab with things as they are now, and open another tab with the same page, so I can compare them.

EDIT:
In the meantime, I'll compare them on your Test page. When you get them to a point that we think is far enough for you to give me the code, I'll try them on Vapers United.

[Kami]

Aug 6, 2017 13:03:20 GMT -8 Vapers United said:

Before I go any further, I want to tell you how much I appreciate you coming back here to work on this with so much going on!!!


Let's continue with making the wrap around, please, and let me try adding the code when you're to that point. I'll leave one tab with things as they are now, and open another tab with the same page, so I can compare them.

EDIT:
In the meantime, I'll compare them on your Test page. :D When you get them to a point that we think is far enough for you to give me the code, I'll try them on Vapers United.

So, due to how wide the mini-profiles are, the wrap around CSS doesn't really ... look good, I guess. It's much too narrow and almost unnoticeable. If I make the MP narrower it would work, would you like me to try that?

[Vapers United]

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.