Colocar capa de perfil

Detalhes da questão

Endereço do fórum: https://brasilplayobscure.forumeiros.com/forum
Versão do fórum: AwesomeBB

Descrição

olá!!! vim aqui solicitar uma ajudazinha ksks

queria saber como faço para colocar capa de perfil para todos membros do meu fórum ( cada um deles coloca a sua capa de perfil )
seria + o - dessa forma: https://imgur.com/uD5gRD5
com o avatar do lado esquerdo inferior da capa, nick encima do avatar da pessoa... (todos dois embaixo da capa)
e os grupos ( ranks ) fica no lado direito ( embaixo da capa )
( ESSE FÓRUM NÃO É MEU, É SÓ UM EXEMPLO DE MAIS O MENOS COMO EU PRETENDO )

Olá, @Cabuloso_Obscure.

É sim possível. Poderia me passar o seu template profile_view_body? Está em Visualização Templates Perfil, no modo avançado do Painel administrativo.

Atenciosamente,
Lobs

olá @Lobs
enviei o template no seu privado pois aqui não da... pois ultrapassa o limite maximo de 25k de caracteres ;-;

Olá!

Em 2014, criei essa função para os fóruns FdF. Pode ver aqui: https://ajuda.forumeiros.com/t96192-
A versão AwesomeBB ainda não existia, portanto não havia um código para essa versão.

Perdi uns minutos a reajustar o código e acho que ficou muito bom. Veja aqui o resultado: https://i.imgur.com/8N2TqaM.mp4

Para isto, por favor crie uma página Javascript, com investimento em todas as páginas, com o seguinte código:

Código:

// FOTO DE CAPA
if (window.location.pathname.indexOf('/u') == 0) {
    $(document).ready(function() {
        // Link Imagem Capa
        var fbcapa = $('#field_id3 .field_uneditable a').text(); // Local onde coloca a ID do campo
        // Estrutura geral
        $('.cp.advanced-profile').before('<style>#fbnome div span em { font-size: 8px; color: transparent; background: url(https://i.imgur.com/QglVEGE.png) no-repeat top left; }#tabs.cp-sidebar { display:none; } #fbtabs ul { display: flex; width: 100% !important; margin: 0 0; background-color: #2e2f30 !important; margin-top: 40px; text-align: center; background-color: #FFF; border-radius: 3px; box-shadow: 0 2px 3px rgb(0 0 0 / 10%), 0 0 2px rgb(0 0 0 / 10%); overflow: hidden; word-break: normal; } #fbtabs ul li { width: 2000px; box-sizing: border-box; display: block; height: 50px; padding: 15px 10px; margin:0px auto 0px auto; } #fbtabs .activetab a { color: #8067b7; font-weight: 700; } #fbtabs li:hover { background-color: #2c3e50!important; border-color: #2c3e50; color: white; } div.cp-sidebar.advanced-profile > div:nth-child(1) > div.box-body > div.mod-login-avatar { display: none; }.cp-sidebar.advanced-profile div:nth-child(1) div.box-head {display:none} #fbnome div.box-head {display:block !important;)</style><div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;display: block;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr><tr><td id="fbgrupo"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }</style>');
        // Mover Tabs para o topo abaixo da capa
        $('#fbfundo').after('<div id="fbtabs"></div>');
        $('#profile-menu ul').clone().appendTo($('#fbtabs'));
        // Avatar
        $('.mod-login-avatar img').clone().appendTo($('#fbavatar'));
        // Nome
        $('.cp-sidebar.advanced-profile .box-head:first').clone().appendTo($('#fbnome'));
        // Rank
        // $('.mod-login-rank').clone().appendTo($('#fbrank'));

        // Prevenir avatares duplos para usuários sem imagem de rank
        $(function() {
            var fbavatarduplo = [],
                imagemdupla;
            $("#fbfundo img").filter(function() {
                imagemdupla = $(this).attr("src");
                if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                    fbavatarduplo.push(imagemdupla);
                    return false;
                }
                return true;
            }).remove();
        });
        // Tabs sem refresh para evitar erros na foto de capa
        $(function() {
            $('#fbtabs ul li').click(function(e) {
                e.preventDefault();
                var url = this.firstChild.href;
                if (url == '#') return;
                $('div.cp.advanced-profile .cp-inner').load(url + ' div.cp.advanced-profile .cp-inner');
            });
        });
    });
}

Foi uma nostalgia enorme pegar novamente neste código.

Hancki

iaew @Hancki como assim mano ? kkk eu olhei exatamente esse perfil varias vzs antes mesmo de fazer esse tópico, tentei colocar a capa e não consegui :/

e esse codigo ele cria a area onde ficaria a capa MAS quando eu coloco ela, a capa não vai :/ poderia me ajudar nisso?

agradeço desde já pelo seu tempo <3

Olá @Cabuloso_Obscure,

No código do  @Hancki substitua

Código:

var fbcapa = $('#field_id3 .field_uneditable a').text(); // Local onde coloca a ID do campo

para

Código:

var fbcapa = $('#field_id3 .field_uneditable').text(); // Local onde coloca a ID do campo

Atenciosamente,
pedxz.

Uso de formatação de texto Informamos que a formatação excessiva não é permitida no Fórum dos Fóruns. Isto é, o uso do riscado, o uso de alinhamentos, a alteração do texto, cor ou tamanho da fonte. Estes privilégios são reservados à Staff do Fórum dos Fóruns.

Olá, Cabuloso.

Vamos tentar uma solução diferente que elaborei para o seu problema. Mude o seu template que mencionei no meu primeiro post para esse aqui:

Código:

<div class="page-header">
    <h1>
        {L_VIEWING_PROFILE}
    </h1>
</div>
<div class="banner"></div>
<aside id="sidebar-left">
    <div id="profile-view" class="block">
        <div class="block-content">
            <div class="profile-header">
                <div class="profile-header-background">
                    {AVATAR_IMG}
                </div>
                <div class="profile-header-content">
                    <p class="profile-avatar">{AVATAR_IMG}</p>
                </div>
            </div>
 
            <p class="profile-username">{USERNAME}</p>
            <p class="profile-rank">{POSTER_RANK}</p>
            <!-- BEGIN switch_show_status -->
            <p class="profile-status">{L_STATUT}: {USER_ONLINE}</p>
            <!-- END switch_show_status -->
            <!-- BEGIN switch_allow_friendsfoes -->
            {FRIENDSFOES}
            <!-- END switch_allow_friendsfoes -->
        </div>
    </div>
 
    <!-- BEGIN switch_auth_user -->
    <div class="block">
        <div class="block-header">
            {L_ADMINISTRATE_USER}
        </div>
        <div class="block-content">
            {ADMINISTRATE_USER}
            {BAN_USER}
        </div>
    </div>
    <!-- END switch_auth_user -->
</aside>
 
<main id="profile">
    <div class="main-inner">
        <div class="grid-small-gaps">
            <div class="grid-2">
                <div class="block">
                    <div class="block-header">
                        {L_PROFILE}
                    </div>
                    <div class="block-content">
                        <!-- BEGIN profile_field -->
                        <dl id="field_id{profile_field.ID}" class="block-dl-default">
                            <dt>{profile_field.LABEL}</dt>
                            <dd>{profile_field.CONTENT}
                                <!-- BEGIN profil_type_user_posts --> [{POST_PERCENT_STATS} / {POST_DAY_STATS}]
                                <br />
                                <br />
                                <a class="btn btn-flat" rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS}:</a>
                                <br />
                                <a class="btn btn-flat" rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
                                <a class="btn btn-flat" rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a>
                                <!-- END profil_type_user_posts -->
                            </dd>
                        </dl>
                        <!-- END profile_field -->
                    </div>
                </div>
            </div>
            <div class="grid-2">
                <div class="block">
                    <div class="block-header">
                        {L_CONTACT}
                    </div>
                    <div class="block-content">
 
                        <div class="column1">
                            <form action="{S_PROFILE_ACTION}" method="post" name="post">
                                <div class="h3"></div>
                                <!-- BEGIN contact_field -->
                                <dl id="field_id{contact_field.ID}" class="block-dl-default">
                                    <dt>{contact_field.LABEL}</dt> <dd>{contact_field.CONTENT}</dd>
                                </dl>
                                <!-- END contact_field -->
 
                                <!-- BEGIN switch_admin_user_comment_active -->
                                <dl class="block-dl-default">
                                    <dt>{L_COMMENTS}:<br /><span class="italic">{L_MODS_AND_ADMINS}</span></dt>
                                    <dd><textarea class="input-subtle" name="admin_user_comment_text" rows="8" cols="30">{ADMIN_USER_COMMENT}</textarea></dd>
                                </dl>
                                <fieldset class="form-buttons">
                                    <input type="hidden" value="update_admin_user_comment" name="mode" />
                                    <input type="hidden" value="{USER_ID}" name="userid" />
                                    <input type="submit" class="btn btn-default" name="user_comment_maj" value="{L_UPDATE}" />
                                </fieldset>
                                <!-- END switch_admin_user_comment_active -->
                            </form>
                        </div>
 
                        <div class="column2">
                            <div class="h3">{L_STATS}</div>
                            <dl class="block-dl-default">
                                <dt>{L_LAST_VISITED}:</dt>
                                <dd>{LAST_VISIT_TIME}</dd>
                                <!-- BEGIN switch_dhow_mp -->
                                <dt>{L_PRIVATE_MSG}:&nbsp;</dt>
                                <dd>{PRIVATE_MSG}</dd>
                                <!-- END switch_dhow_mp -->
                            </dl>
                        </div>
 
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <!-- BEGIN switch_rpg -->
        <div class="block">
            <div class="block-header">
                {L_VIEWING_RPG}
            </div>
            <div class="block-content">
                <div class="rpg-view">
                    <p style="text-align: center;">{RPG_IMAGE}</p>
 
                    <div class="grid-small-gaps">
                        <div class="grid-2">
                            <!-- BEGIN rpg_fields_left -->
                            <dl class="block-dl-default">
                                <dt>{switch_rpg.rpg_fields_left.F_NAME}:</dt>
                                <dd>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</dd>
                            </dl>
                            <!-- END rpg_fields_left -->
                        </div>
 
                        <div class="grid-2">
                            <!-- BEGIN rpg_fields -->
                            <dl class="block-dl-default">
                                <dt>{switch_rpg.rpg_fields.F_NAME}:</dt>
                                <dd>{switch_rpg.rpg_fields.F_VALUE_NEW}</dd>
                            </dl>
                            <!-- END rpg_fields -->
                        </div>
                    </div>
 
                    <div class="clear"></div>
                    <fieldset class="form-buttons">
                        {U_ADMIN_RPG_NEW}
                    </fieldset>
                    <style>
                        .button2 {
                            margin-top: 22px;
                        }
                    </style>
                </div>
            </div>
        </div>
        <!-- END switch_rpg -->
    </div>
</main>
 
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var sidebar = $('#sidebar-left'),
            top_position_window = $(window).scrollTop(),
            top_position_sidebar = sidebar.offset().top;
 
        function stickySidebar() {
            top_position_window = $(window).scrollTop();
 
            if ((top_position_window + 86) > top_position_sidebar) {
                sidebar.addClass('sticky');
            } else {
                sidebar.removeClass('sticky');
            }
        }
 
        stickySidebar();
 
        $(window).on('scroll', function() {
            stickySidebar();
        });
    });
 
    $(document).ready(function(){
        $('[id^=field_id]').each(function(){
            if ( $(this).find('.field_editable').is('span, div') )
            {
                $(this).hover(function()
                {
                    if( $(this).find('.field_editable.invisible').is('span, div') )
                    {
                        $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit btn btn-default"><i class="material-icons">mode_edit</i><span>{L_FIELD_EDIT_VALUE}</span></div>');
                        $(this).find('.ajax-profil_edit').attr({
                            alt: "{L_FIELD_EDIT_VALUE}",
                            title: "{L_FIELD_EDIT_VALUE}"
                        }).click(function(){
                            $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<i class="material-icons ajax-profil_valid">check</i>').find('input,select');
                            $(this).prev().find('.ajax-profil_valid').attr({
                                alt: "{L_VALIDATE}",
                                title: "{L_VALIDATE}"
                            }).click(function(){
                                var content = new Array();
                                $(this).parent().find('[name]').each(function(){
                                    var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                                    if ( (type_special && $(this).is(':checked')) || !type_special )
                                    {
                                        content.push(new Array($(this).attr('name'), $(this).attr('value')));
                                    }
                                });
                                var id_name = $(this).parents('[id^=field_id]').attr('id');
                                var id = id_name.substring(8, id_name.length);
                                $.post(
                                    "{U_AJAX_PROFILE}",
                                        {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                                    function(data){
                                        $.each(data, function(i, item){
                                            $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                        });
                                    },
                                    "json"
                                );
                            });
                            $(this).remove();
                        });
                    }
                },function()
                {
                    if( $(this).find('.field_editable.invisible').is('span, div') )
                    {
                        $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                        $(this).find('.ajax-profil_edit').remove();
                    }
                });
 
                if ($(this).find('[type="radio"]')) {
                    $(this).find('[type="radio"]').each(function() {
                        $(this)
                            .wrap('<span class="radio">')
                            .after('<span class="radio-check"></span>');
                    });
                }
            }
        });
    });
    //]]>
</script>

<script type="text/javascript">$( "dl#field_id3" ).appendTo( $( ".banner" ) );</script>

Adicione o seguinte código na sua folha CSS:

Código:

.banner {
    background-color: black;
    width: 1250px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
}
.banner img {
    width: 1250px;
    height: 250px;
}
dl#field_id3 dt {
    display: none;
}

Um detalhe: seu banner terá que ter 1250px de largura e 250px de altura. Quanto mais desrespeitar essa proporção (5:1), mais deformações sofrerá. Quanto menor forem as medidas, mais qualidade será perdida.


Outra coisa. No campo "foto de capa" do seu perfil ( https://brasilplayobscure.forumeiros.com/u1 ), tem a URL de uma imagem, certo? Por favor, mude o valor do campo para este:

Código:

[img]https://i.imgur.com/G9rHjjO.png[/img]

Qualquer dúvida ou problema a ser corrigido, estou a disposição. Siga as orientações acima e terá o resultado esperado.

Atenciosamente,
Lobs

Não funcionou ;-;

Cabuloso_Obscure escreveu:Não funcionou ;-;

Verifiquei e percebi que o template não foi publicado. Você precisa clicar no sinal de "correto" para publicar o template. xD

Tem que constar assim:



Outra coisa... aceda a Painel administrativo Usuários e Grupos Perfis Campos do Perfil

O seu campo "Foto de Capa" deve ser uma zona de texto. Se estiver como "campo do texto" não vai funcionar! Se esse for o caso, por favor, mude esse campo para o tipo "Zona de Texto" e me avise novamente para eu dar uma olhada no novo ID dele e atualizar os códigos que eu te passei.

Atenciosamente,
Lobs

olá, o template está publicado sim amigo :/ e ja fiz isso que o senhor falou acima do campo de perfil

Cabuloso_Obscure escreveu:olá, o template está publicado sim amigo :/ e ja fiz isso que o senhor falou acima do campo de perfil

@Cabuloso_Obscure: Deve desativar o perfil avançado em Painel administrativo > Usuários e grupos > Usuários > Perfis clique no separador "Opções gerais" e desative.

Tópico resolvido Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.