Hover Banner

[CATCH]

Helloo,

I was having a problem finding a proper combination of codes to get the header look I was going for.
I haven't made my board yet, which is why I haven't linked to it, so assuming it's a blank slate, I was
hoping someone would be able to help me out?

I was collaborating with Sailor Pinn on FACE IN THE CROWD, since these images were her original speculative
skin, but we lost contact as the site was going through maintenance before she was able to help me put
together an actual code.

The images she sent were kind of large so I'll put the links here. This was our in-progress idea for the whole
board. The header/banner was a hover so it would look like this. I know it's a lot to ask to help piece this
together.. My main concern was the hover-able banner, which I couldn't find in the header/Footers category.

Any help would be much appreciated!!

[CATCH]

bump

[Tumbleweed]

CATCH, That's looks like a bit of a time consuming project, but I'll see what I can do. It may take me a couple days as I don't have loads of time to actually work on it. Will at least get the bare bones started now.
I do have a question, are the ribbon like backgrounds where the titles, announcements, links, etc. going to be images or do you want that done with css? I can do it in css but it is a bit of a pain. It would be much easier (for me) if they were just images.

Another question. Is any part of what you posted in the link going to be part of your non-hovered  banner? I was thinking that maybe the doll on the stand in the middle and your forum name at the bottom might be what members see until they hover over. Just guessing here but I can't go really much further until I know. I have the layout of the hover roughly set up though.

[Azy]

This looks like it could be fun! I can certainly see where various parts need to go, how I'd structure it and with what elements.
Let me know if you want a hand at all

[CATCH]

Thanks guys! And I don't need it asap, I know it's a project so don't
feel super rushed or anything! I just really appreciate the help

I think they might be css because if you look at the image for the whole
forum, the "post" and "thread" counts for each board have the same kind of
ribbon design.

I would preferr them to be css, but if you're having too much trouble with it
let me know and I can see what might make it easier! Again, thanks for the help!!


P.S. I HAVE been working on the actual site, but it's still a super baby, so here's
the testing board link [x].

[Azy]

I had a vaguely similar idea for the avatar and the ribbon coming out of it for another forum I'm working on, so I have a reasonably good idea of how the two pronged triangle pointy bit is done. (*hint* breadcrumb navbar).
It's all definitely doable! Content wise, some of it may depend of plugins, or some hefty coding, but structurally it shouldn't be a problem.
Tumbles and I will get it going, we're a team

[Tumbleweed]

Oct 17, 2015 15:50:06 GMT -8 CATCH said:

Thanks guys! And I don't need it asap, I know it's a project so don't
feel super rushed or anything! I just really appreciate the help

I think they might be css because if you look at the image for the whole
forum, the "post" and "thread" counts for each board have the same kind of
ribbon design.

I would preferr them to be css, but if you're having too much trouble with it
let me know and I can see what might make it easier! Again, thanks for the help!!


P.S. I HAVE been working on the actual site, but it's still a super baby, so here's
the testing board link [x].

I started to edit my previous post and then got a phone call and then came back and finished it not realizing you replied. lol Can you read my question in my previous post about what will actually be your banner people see before hovering. I already have the hover and the hover layout done as I said in my previous post. Ribbons are a pain to do in css but I'll work on them. (I currently have just filler graphic ribbons) Just don't want to go much further until I'm certain of everything.

Ack, I missed the part where you started working on it. Is the dragon-thingy your main banner or is it going to replace the doll?

[Tumbleweed]

Oct 17, 2015 16:19:43 GMT -8 Azy said:

I had a vaguely similar idea for the avatar and the ribbon coming out of it for another forum I'm working on, so I have a reasonably good idea of how the two pronged triangle pointy bit is done. (*hint* breadcrumb navbar).
It's all definitely doable! Content wise, some of it may depend of plugins, or some hefty coding, but structurally it shouldn't be a problem.
Tumbles and I will get it going, we're a team

I already got it going. If it weren't doable, I wouldn't be doing it.  I know the css to do ribbons like that but they are still a pain to get positioned perfectly but by all means, Azayles, if you want to do the css for ribbons, I won't cry that I didn't get to do them. hee hee. Whoops, too late, got the ribbons done.

[CATCH]

The dragon image is replacing the doll, so it is the main logo of the
forum I'm working on. The examples in my first post were speculative
drawings that me and Sailor Pinn were working on, they weren't finalized
for any site I was actually ready to build, so now I've got my idea and
I have an actual graphic.

So yeah! Thanks again! I'm glad you two are willing to help!!

[Azy]

Oct 17, 2015 17:47:32 GMT -8 Tumbleweed said:

Oct 17, 2015 16:19:43 GMT -8 Azy said:

I had a vaguely similar idea for the avatar and the ribbon coming out of it for another forum I'm working on, so I have a reasonably good idea of how the two pronged triangle pointy bit is done. (*hint* breadcrumb navbar).
It's all definitely doable! Content wise, some of it may depend of plugins, or some hefty coding, but structurally it shouldn't be a problem.
Tumbles and I will get it going, we're a team

I already got it going. If it weren't doable, I wouldn't be doing it.  I know the css to do ribbons like that but they are still a pain to get positioned perfectly but by all means, Azayles, if you want to do the css for ribbons, I won't cry that I didn't get to do them. hee hee. Whoops, too late, got the ribbons done.

Damn girl, you don't hang about! 
Nice one!
I didn't know you'd made that sort of headway already, so well done lass  Still here if you want help! Though I doubt you'll need it teehee! 

[Tumbleweed]

CATCH

Do you mind if I borrow that dragon image so I can get the size of everything in the ball park. I'm almost done, I have a bug in IE (Chrome and FF are perfect) that is giving me grief with the alignment of the ribbons (like 1 px off) and I have to add that welcome part where I have the round avatar and then just tweak a couple things. 

[CATCH]

Yeah that's totally fine! Can you get it off the site or do you need me to post
it here? Either way, here's the link [x]

[Azy]

Oct 18, 2015 11:56:28 GMT -8 Tumbleweed said:

CATCH

Do you mind if I borrow that dragon image so I can get the size of everything in the ball park. I'm almost done, I have a bug in IE (Chrome and FF are perfect) that is giving me grief with the alignment of the ribbons (like 1 px off) and I have to add that welcome part where I have the round avatar and then just tweak a couple things. 

It's to do with the way IE tits about with the box model, which throws off things like borders and margins. You might be able to set the box model property for the specific element, or its parent, and that might fix it. Or make it worse by another px. Who knows! 

Padding *seems* unaffected by this pain-in-the-arse bug, so try swapping out properties.
Good luck  xx

[Tumbleweed]

Oct 18, 2015 13:32:41 GMT -8 Azy said:

Oct 18, 2015 11:56:28 GMT -8 Tumbleweed said:

CATCH

Do you mind if I borrow that dragon image so I can get the size of everything in the ball park. I'm almost done, I have a bug in IE (Chrome and FF are perfect) that is giving me grief with the alignment of the ribbons (like 1 px off) and I have to add that welcome part where I have the round avatar and then just tweak a couple things. 

It's to do with the way IE tits about with the box model, which throws off things like borders and margins. You might be able to set the box model property for the specific element, or its parent, and that might fix it. Or make it worse by another px. Who knows! 

Padding *seems* unaffected by this pain-in-the-arse bug, so try swapping out properties.
Good luck  xx

I already fixed it. Ended up writing some special css for IE which isn't the ideal solution as it is more for AMEC to have to worry about if she wants to adjust things to suit her needs, which I'm sure she will.  When I have more time, I may try your suggestions. I had already tried everything I could think of and actually a change in padding is what fixed it for IE. The biggest trouble maker was the ribbon next to the avatar because I had to use positioning/z-index to get that ribbon behind the round avatar. I know it was something in my layout that was messing things up because I just took the ribbons outside the layout I have and they were fine on all browsers but I never could pin point what it was.

This did end up being a lot of css, for sure. Lots of little different things on her example but it's looking pretty good now. Just need to get the welcome part by the avatar and I'm pretty much done.

[CATCH]

I'm super exciting, thanks for all your hard work!!