Using helper spans

[Trombones13]

I'd like to use the helper span in message_user_info in my custom style...but I think I missed the explanation on how to use them. I know how to add images to the navigation bar using them (thanks, Brogan ), but can I make a similar edit in EXTRA.css for other helper spans?

Thanks in advance!

 

[Trombones13]

Any ideas on this?

 

[Paul B]

What other helper spans do you want to utilise?

I haven't actually checked which ones are available.

 

[Trombones13]

Wait...did I add that myself? Looking at Chrome's editor, I have on my site a span class="helper" right above div class="avatarHolder," but it's not here on XF. If possible, I'd like to have a helper class to put an image (like the snow was placed in the header) over the avatar block. Hopefully that makes sense.

 

[Shelley]

I added the following in my extra.css to get the following effect.

#messageList .postbit1 {
background: transparent url('@imagePath/xenforo/gradients/headphones.png') no-repeat;
display: block;
height: 100px;
left: 180px;
position: absolute;
top: 300px;
width: 140px;
}

Though I never had any helper span in message_user_info I inserted mine at the bottom. And the output is the following (below) I remember you talking about headphones so assumed.

 

[Trombones13]

*snip*

Thanks, Shelley--yes, that was my plan. Is it possible to have them stretch around the entire box (probably removing the arrow to accommodate for it)?

 

[Shelley]

I would personally leave the Arrow in. It wouldn't be too much work to re-size the headphones so that it covers the arrow. There is one problem though, I haven't spent any time nor figured out how to get the headphones displaying in each post of the thread, only the first post. If maybe someone could help here or I could look into it further once I get some time.

Edit: Almost there. I just need to fix the gap issue. It's now displaying in each post in the thread.