2 Changes in the Xenbase view :)?

[Black]

Hey,
I am using the Xenbase style and would like to make 3 changes, where could I do this?
I'd like to make the sticky icon look like this:


Then I would like to have the Staff Buttons over the Avatar and would also like to change the look of the buttons. Like on the picture the right button "Moderator".


Those are my 2 questions

 

[Russ]

This CSS can be placed in extra.less:

i.structItem-status.structItem-status--sticky {
    background-color: rgb(0, 128, 0);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    text-align: center;
    line-height: 23px;
    font-size: 14px;
&:before { color: #FFF; }
}

Would get you close...

To move the banner you need to edit the template message_macros

Move:

<xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />

To your desired location in that template.

We have styling for the banners, check style properties -> User banners, assuming they're the default staff banners you can style them there.

 

[Black]

Thank you so much. It worked.

I would like to reduce the size of the Staff Banner, how could I do this?

 

[Black]

Thank you so much. It worked.

I would like to reduce the size of the Staff Banner, how could I do this?

It's done, I've got it with :
width: 80px;
made

 

[Black]

sry for double mail but unfortunately cannot edit...
The question then would be, how could I get more space between the Staff Banner and the Avatar ? so there should be about 5px between it...?



thank you

 

[Russ]

You could just add a simple:

.message-avatar { margin-top: 10px; }

To your extra.less, should work.