XF 2.2 НЕ работают коды .visitorPanel в боковой панели. ПОМОГИТЕ ;(

[oljarose]

Доброго времени суток!

Уже весь день мучаюсь с проблемой, и уже не знаю в чём дело. ПОМОГИТЕ, пожалуйста. [Xenforo 2.2.5 обычный стиль]

Я пытаюсь изменить виджет - панель посетителя (visitorPanel) в боковой панели.
Изменения делаю в extra.less.
Но ВООБЩЕ никакие изменения не показываются в панели посетителя. Полный ноль!!!
Если бы в extra.less не было других работающих модификаций стиля форума, я бы подумала что extra.less не пашет.

Все эти коды перепробовала, и НИ ОДИН не работает вообще никак.
Что я делаю не так? В чём может быть причина?!?

перепробовала все эти коды

.sidebar .visitorPanel .username {
color: red;
}

.sidebar .visitorPanel .secondaryContent {
overflow: hidden;
}

.sidebar .visitorPanel
{
display: none;
}


.sidebar .visitorPanel .secondaryContent {
text-align: center;
}


aside .sidebar .visitorPanel .avatar {
float: none;
margin: 0 auto;
}


.sidebar .visitorPanel .secondaryContent {
min-height: 100px;
height: auto;
}



.sidebar .visitorPanel .secondaryContent {
padding-bottom: 35px;
}


.visitorPanel .avatar__headingBlock {
text-align: center;
}


.visitorPanel .media__container {
display: block;
}

.visitorPanel .media--left {
margin-right: 0;
}



.sidebar .visitorPanel .secondaryContent {
width: 90%;
box-shadow: 3px 3px 3px #666;
}

 

[Atikin]

С чего вы взяли, что в XenForo 2 есть классы sidebar и visitorPanel?
Вместо этого используйте селектор [data-widget-definition="visitor_panel"].
Напомню, что классы любого элемента можно узнать через просмотр кода страницы.

 

[oljarose]

С чего вы взяли, что в XenForo 2 есть классы

Ни с чего я плохо разбираюсь в этих нюансах. Спасибо, что есть кому пояснить!

Вместо этого используйте селектор [data-widget-definition="visitor_panel">]

Подскажите, это в extra.less (???) или в другом месте делать?

 

[Atikin]

Подскажите, это в extra.less (???) или в другом месте делать?

Любой пользовательский CSS/LESS прописывается в extra.less.

 

[Skaiman]

Как то так выглядит вложенность классов визитер панели в LESS:

.p-body-sidebar {
    .block {
        &[data-widget-definition="visitor_panel"] {
            .block-container {
                .block-body {
                    .contentRow {
                        .contentRow-figure {
                            .avatarWrapper {
                                .avatar {
    
                                }
                            }
                        }
                        .contentRow-main {
                            .contentRow-header {
                                .username {

                                }
                            }
                            .contentRow-lesser {
                                .userTitle {

                                }
                            }
                            .contentRow-minor {
                                dl.pairs {
                                    dt {

                                    }
                                    dd {
                                    
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Не обязательно соблюдать такую структуру, что бы указать свойства для отдельного элемента, но что бы начать мучаться с проблемой, надо иметь представление о проблеме :)

 

[oljarose]

Помогите, пожалуйста, сделать панель посетителя из вот этого (1), в это (2):

(1)

Виджет тут ~250px (dafault)

(2)

Виджет тут ~ 190px


1. картинка большая сверху (во весь виджет ~ 190px)
Сделать большой я поняла как (зайти в публичный шаблон widget_visitor_panel и там поменять на размер L),
Но тогда текст съезжает вправо, съёживается, и его не видно.

2. текст под картинкой чуть больше размера (имя посередине, а всё остальное по левому краю).

 

[Skaiman]

По сути виджет бесполезный :) не несет ни какой важной информации и тем более видит его только сам посетитель, то же самое есть в меню в навигации. Как бы кому надо любоваться на самого себя, вернее на свой большой аватар.
А по делу если, не можешь сам, ищи исполнителя

 

[Skaiman]

.block {
    &[data-widget-definition="visitor_panel"] {
        .block-body {
            .contentRow {
                flex-direction: column;
                .contentRow-figure {
                    .avatar.avatar--m {
                        width: 190px;
                        height: 190px;
                        font-size: 115px;                       
                    }
                }
                .contentRow-main {
                    text-align: center;
                }
            }
        }
    }
}

дальше учимся самостоятельности, вся структура классов выше

 

[Skaiman]

Сделать большой я поняла как (зайти в публичный шаблон widget_visitor_panel и там поменять на размер L),

это не правильно, в шаблоне виджета нет аватарки, там макрос, шаблон account_visitor_menu, но не рекомендую там править, размер аватара измениться не только в виджете и будет не очень :)

 

[oljarose]

.block {
    &[data-widget-definition="visitor_panel"] {
        .block-body {
            .contentRow {
                flex-direction: column;
                .contentRow-figure {
                    .avatar.avatar--m {
                        width: 190px;
                        height: 190px;
                        font-size: 115px;                      
                    }
                }
                .contentRow-main {
                    text-align: center;
                }
            }
        }
    }
}

дальше учимся самостоятельности, вся структура классов выше

СУПЕР!!! эту структуру я бы в жизни сама не написала. А редактировать внутренности намного проще. СПАСИБО. То, что нужно было!