Move some "editable fields" to a separate tab

Hi @santiago-pardo,

Navigate to wpForo > Members Field > Tab Manager, Edit The Account Tab,

There you can add new rows, set the count of the columns in one rows, move the rows up and down. And you can drag the needed fields and move them in the needed columns.

@kylew 

This is how I solved it

In "Member Tabs > Account" I divided the fields into 4 different rows.

On "row-0" (the first oen) I added an html menu, as such

<div class="wpforo-profile-sidebar">
<h1>Configuración</h1>
<a class="wpf-profile-sidebar active" href="javascript:void(0)" data-target="row-1">Sobre Mi <i class="fa-solid fa-chevron-right"></i></a>
<a class="wpf-profile-sidebar" href="javascript:void(0)" data-target="row-2">Información <i class="fa-solid fa-chevron-right"></i></a>
<a class="wpf-profile-sidebar" href="javascript:void(0)" data-target="row-3">Foto de perfil <i class="fa-solid fa-chevron-right"></i></a>
<a class="wpf-profile-sidebar" href="javascript:void(0)" data-target="row-4">Contraseña <i class="fa-solid fa-chevron-right"></i></a>
</div>

Then added this javascript

function wpforoProfileAccount($, $this, target) {
    $("#wpforo .wpforo-profile-account .wpf-table > div:not(.row-0)").hide();
    $("#wpforo .wpforo-profile-account .wpf-table ."+target).show();    
    if( $this != false ) {
        $("#wpforo #wpforo-wrap .wpforo-profile-sidebar .wpf-profile-sidebar").removeClass("active");
        $this.addClass("active");
    }
}

jQuery("document").ready(function($) {
    wpforoProfileAccount($, false, "row-1");
    $("#wpforo .wpforo-profile-account .wpforo-profile-sidebar .wpf-profile-sidebar").click(function() {
        target = $(this).data("target");
        wpforoProfileAccount($, $(this), target);
    });
});

Then added this css

#wpforo #wpforo-wrap .wpforo-profile-sidebar {    
    margin: 0;
    padding:0;
    display: block;
    text-align: left;
    width: 100%;
}
#wpforo #wpforo-wrap .wpforo-profile-sidebar h1 {
    font-size: 20px;
    color: #444;
    letter-spacing: -0.3px;
    line-height: 18px!important;
    font-weight: 500;
    padding: 14px 16px;
}
#wpforo #wpforo-wrap .wpforo-profile-sidebar .wpf-profile-sidebar {
    display: inline-block;
    padding: 12px 16px;
    line-height: 23px;
    min-width: 15%;
    margin-bottom: -2px;
    font-size: 15px;
    text-align: left;
    width: 100%;
    color: #000;
}
#wpforo #wpforo-wrap .wpforo-profile-sidebar .wpf-profile-sidebar:hover, 
#wpforo #wpforo-wrap .wpforo-profile-sidebar .wpf-profile-sidebar.active {
    background: #f7f9f9;
}

#wpforo #wpforo-wrap .wpforo-profile-sidebar .wpf-profile-sidebar i {
    float: right;
    margin: 4px 3px 0 0;
    display: none;
}
#wpforo #wpforo-wrap .wpforo-profile-sidebar .wpf-profile-sidebar.active i {
    display: inline-block;
}


#wpforo #wpforo-wrap.wpft-account .wpforo-profile .wpf-tr {
    display: inline-block;
    width: 69%;
    vertical-align: top;
    border-left: 1px solid #e9e9e9;
    padding-left: 4%;
}
#wpforo #wpforo-wrap.wpft-account .wpforo-profile .wpf-tr.row-0 {
    display: inline-block;
    width: 30%;
    border-left: 0;
    padding: 0;
}