help

Yoel Rodriguez

New member
Threads
2
Messages
14
foro1.PNG
xenforo2.PNG


Hello, how could I do so that the statistics of the users, that is, this comes out with icons as it is found here, I leave them in a photo, I would like it to come out with icons in the 2 parts like, when you publish in a post and there is in the visitor of the memberI am using xenforo 2.2) @Wave
 
Last edited:

Wave

Member
Threads
20
Messages
44
Add the below code to extra.less. You have to customize the code if you don't have Solutions enabled.

CSS:
.message-userExtras
{
    display: flex;
    flex-wrap: wrap;

    .pairs.pairs--justified
    {
        &:nth-child(2),
        &:nth-child(4),
        &:nth-child(5)
        {
            display: grid;
            position: relative;
            justify-content: center;
            background: #fff;
            margin: 4px auto;
            padding: 6px;
            text-align: center;
            width: 31%;
            border-radius: 2px;
            order: -1;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
          
            > dt
            {
                font-size: 0;
                margin-right: 0;
              
                &:before
                {
                    .m-faBase();
                    font-size: @xf-fontSizeSmall;
                }
            }
          
            > dd
            {
                text-align: center;
            }
          
            &:nth-child(2) dt:before { content: @fa-var-comments; }
            &:nth-child(4) dt:before { content: @fa-var-thumbs-up; }
            &:nth-child(5) dt:before { content: @fa-var-trophy; }
        }
    }
}

Example:
 

Yoel Rodriguez

New member
Threads
2
Messages
14
Let's see brother that code I already put it and I have it like this, worse I want those same icons to appear in the visitor panel, see here that they appear where the visitor's messages are
 

Attachments

  • foro1.PNG
    foro1.PNG
    25.6 KB · Views: 6

Wave

Member
Threads
20
Messages
44
You must change visitor_panel to your widget key.

CSS:
[data-widget-key="visitor_panel"]
{
    .contentRow-minor
    {
        .pairs.pairs--justified.fauxBlockLink
        {
            > dt:before
            {
                .m-faBase();
                margin-right: 6px;
            }
            
            &:nth-child(1) > dt:before { content: @fa-var-comments; }
            &:nth-child(2) > dt:before { content: @fa-var-thumbs-up; }
            &:nth-child(3) > dt:before { content: @fa-var-trophy; }
        }
    }
}

Example:
 

Yoel Rodriguez

New member
Threads
2
Messages
14
Excuse me but could you explain how to do it? Because what I did was put the code you gave me in widget_visitor_panel but it did nothing just put the command that I put below
 

Wave

Member
Threads
20
Messages
44
You should put this code in extra.less then change visitor_panel to your widget key.

If your visitor panel widget key is widget_visitor_panel, use the code below.
CSS:
[data-widget-key="widget_visitor_panel"]
{
    .contentRow-minor
    {
        .pairs.pairs--justified.fauxBlockLink
        {
            > dt:before
            {
                .m-faBase();
                margin-right: 6px;
            }
            
            &:nth-child(1) > dt:before { content: @fa-var-comments; }
            &:nth-child(2) > dt:before { content: @fa-var-thumbs-up; }
            &:nth-child(3) > dt:before { content: @fa-var-trophy; }
        }
    }
}
 

Yoel Rodriguez

New member
Threads
2
Messages
14
You should put this code in extra.less then change visitor_panel to your widget key.

If your visitor panel widget key is widget_visitor_panel, use the code below.
CSS:
[data-widget-key="widget_visitor_panel"]
{
    .contentRow-minor
    {
        .pairs.pairs--justified.fauxBlockLink
        {
            > dt:before
            {
                .m-faBase();
                margin-right: 6px;
            }
           
            &:nth-child(1) > dt:before { content: @fa-var-comments; }
            &:nth-child(2) > dt:before { content: @fa-var-thumbs-up; }
            &:nth-child(3) > dt:before { content: @fa-var-trophy; }
        }
    }
}

Thank you now, perfect, thank you very much
 
Top