infelizmente eles não compartilham muitas dicas para a personalização que precisamos. levei 1 semana para obter este design consistente. enquanto os desenvolvedores de temas poderiam ter oferecido esta skin como uma alternativa.
De qualquer forma…
Desativei o componente de largura total. e adicionei estes como CSS personalizado.
#main-outlet-wrapper {
display: flex;
justify-content: space-between;
}
.sidebar-wrapper,
#main-outlet,
.custom-right-sidebar {
flex: 1;
box-sizing: border-box;
}
.sidebar-wrapper,.custom-right-sidebar{max-width:280px;}
@media (max-width: 768px) {
#main-outlet-wrapper {
flex-direction: column;
}
}
body[class*=user-] .custom-tag-banner, body[class*=user-]
.custom-category-banner, body[class*=user-]
.custom-right-sidebar, body.archetype-regular
.custom-tag-banner, body.archetype-regular
.custom-category-banner, body.archetype-regular
.custom-right-sidebar {
display: flex;
}
Espero que ajude. Responderei quando você me enviar uma mensagem, se necessário.