Efeito no Perfil

• Descrição:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Olá,
Gostaria de saber se seria possível adicionar este efeito ao meu fórum, aquele que se encontra circulado.

• Informações:

Fórum:	[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]	Versão:	PUNBB
Tipo:	Pedido de código	Tags:	Efeito,Perfil

Olá,

Em qual fórum você viu isto?

Aqui. 
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Olá,

Pode ativar o acesso para visitantes, ou (melhor ainda) nos fornecer acesso a alguma conta do fórum?

Conta fornecida via MP.

Fiquei meio confuso a qual efeito o senhor deseja... Achei que era a capa no perfil, mas.. Entrei em seu fórum e já existe este efeito por lá!

Pode elucidar melhor o que quer exatamente?

Ah sim, desculpe não vir explicar muito bem, mas no caso eu gostaria daquele efeito no qual está circulado na foto, o no qual demonstra uma foto de uma caveira, e que ao clicar em ver informações seria direcionado para uma página do fórum, ai se possível deixasse ele ao lado do avatar em meu fórum, de forma mais centralizada, porém bem próximo do mesmo. Assim ficaria em uma posição semelhante ao do quadrado preto no print acima.

Bom, sinceramente não vi muito sentido nisso, mas enfim. Vamos lá kk

Esse link levaria para onde? É só um quadrado com uma caveira no fundo com um link?

kk pois é, mas quando o assunto é código a treta é grande , mas enfim basicamente para as organizações, mas futuramente pretendo personalizar, pois queria basicamente como uma base que não conseguir reproduzir devido a nobici.

Seria mais ou menos isso que você quer?

Código:

$(function() {
   var link = '#seu-link-aqui'
   $('.profile-avatar').after('<div style="padding-top:1em;"><a href="' + link + '"><img src="http://i.imgur.com/veRx35R.jpg"></div></a>');
});

Olá,

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] basicamente seria inserido como? pois na forma que vim a inserir via java script acabou resultando em um bug, que resultou no sumiço da capa em geral...

Me diz uma coisa, pro efeito atual do seu perfil, você usa algum Javascript? Talvez seja por isso que deu o problema..

Olá

Sim, eu utilizo no caso o Perfil do DeeW.

Pode me enviar este código por gentileza?

Aqui está.

Código:

console.log('title: BestSkins Profile');
    console.log('author: DeeW.');
    console.log('version: v2.0');
    console.log('version: punBB');
    console.log('platform: Forumotion');
    console.log('http://bestskins.net');
    console.log('If remove my credits of code, your forum will be excluded by forumotion');
    if (window.location.pathname.indexOf('/u') === 0) {
      $(document).ready(function(){
          var sCover = $('#field_id1 .field_uneditable').text();
          var sAvatar = $('.center > img').attr('src');
          $('#profile-advanced-right').hide();
          $('#profile-advanced-layout').prepend('<div class="profile-cover">'+
            '<div class="profile-avatar"><img src="'+sAvatar+'" /></div>'+
                '</div>'+ 
            '</div>');
          $('.profile-cover').attr('style','background-image:url('+sCover+')');
          $(function() {
                    var ajaxTAB = function() {
                        $('#tabs li').click(function(e) {
                            e.preventDefault();
                            var url = this.firstChild.href;
                            if (url == '#') return;
                            $('#profile-advanced-left').load(url + ' #profile-advanced-left', ajaxTAB);
                        });
                    };

                    ajaxTAB();
            });
          $('body').append(
            '<style type="text/css">'+
            '.profile-cover {'+
            'background: #FFF;'+
            'height: 430px;'+
            'margin: 0 auto;'+
            'border-bottom: 3px solid #333;'+
            '}'+
            '#profile-advanced-layout #new-message {'+
            'margin-top: 0!important;'+
            'position: relative!important;'+
            'margin: 0 auto;'+
            'text-align: center;'+
            '}'+
            '#tabs ul li a {'+
            'background-color: rgba(0, 0, 0, 0.5);'+
            'border: 1px solid rgba(0, 0, 0, 0.5);'+
            'float: left;'+
            'font-size: 13px;'+
            'font-weight: 400;'+
            'line-height: 2em;'+
            'padding: 4px 10px;'+
            'text-decoration: none;'+
            'border-bottom: 0 none;'+
            'color: #FFF;'+
            'text-transform: uppercase;'+
            '}'+
            '#tabs ul li.activetab a {'+
            'background-color: rgba(51, 51, 51, 0.79)!important;'+
            'border-color: #000!important;'+
            'color: #FFF;'+
            'text-decoration: none!important;'+
            'font-weight: bold!important;'+
            '}'+
            '#tabs ul li.activetab a:hover {'+
            'background-color: #4C4C4C;'+
            '}'+
            '#tabs ul li a:hover {'+
            'background-color: rgba(244, 244, 244, 0.5);'+
            '}'+
            '.profile-avatar {'+
            'background: #FFF;'+
            'float: left;'+
            'padding: 5px;'+
            'box-shadow: 0 0 15px #333;'+
            'margin: 10px;'+
            '}'+
            '.profile-avatar img {'+
            'max-width: 150px;'+
            'max-height: 300px;'+
            '}'+
            '.boxInfo {'+
            'padding: 15px;'+
            'margin-top: 100px;'+
            'float: right;'+
            'width: 15%;'+
            '}'+
            '#profile-advanced-left{'+
            'margin-right: 0!important'+
            '}'+
            '</style>');
      }); 
    };

Teste este aqui

Código:

    console.log('title: BestSkins Profile');
    console.log('author: DeeW.');
    console.log('version: v2.0');
    console.log('version: punBB');
    console.log('platform: Forumotion');
    console.log('http://bestskins.net');
    console.log('If remove my credits of code, your forum will be excluded by forumotion');
    if (window.location.pathname.indexOf('/u') === 0) {
        $(document).ready(function() {

            var sCover = $('#field_id1 .field_uneditable').text();
            var sAvatar = $('.center > img').attr('src');
           
            // NÃO ESQUECE DE TROCAR SEU LINK AQUI
            var link = '#seu-link-aqui';

            $('#profile-advanced-right').hide();
            $('#profile-advanced-layout').prepend('<div class="profile-cover">' +
                '<div class="profile-avatar"><img src="' + sAvatar + '" /></div>' +
                '</div>' +
                '</div>');
            $('.profile-cover').attr('style', 'background-image:url(' + sCover + ')');
            $(function() {
                var ajaxTAB = function() {
                    $('#tabs li').click(function(e) {
                        e.preventDefault();
                        var url = this.firstChild.href;
                        if (url == '#') return;
                        $('#profile-advanced-left').load(url + ' #profile-advanced-left', ajaxTAB);
                    });
                };

                ajaxTAB();
            });
            $('body').append(
                '<style type="text/css">' +
                '.profile-cover {' +
                'background: #FFF;' +
                'height: 430px;' +
                'margin: 0 auto;' +
                'border-bottom: 3px solid #333;' +
                '}' +
                '#profile-advanced-layout #new-message {' +
                'margin-top: 0!important;' +
                'position: relative!important;' +
                'margin: 0 auto;' +
                'text-align: center;' +
                '}' +
                '#tabs ul li a {' +
                'background-color: rgba(0, 0, 0, 0.5);' +
                'border: 1px solid rgba(0, 0, 0, 0.5);' +
                'float: left;' +
                'font-size: 13px;' +
                'font-weight: 400;' +
                'line-height: 2em;' +
                'padding: 4px 10px;' +
                'text-decoration: none;' +
                'border-bottom: 0 none;' +
                'color: #FFF;' +
                'text-transform: uppercase;' +
                '}' +
                '#tabs ul li.activetab a {' +
                'background-color: rgba(51, 51, 51, 0.79)!important;' +
                'border-color: #000!important;' +
                'color: #FFF;' +
                'text-decoration: none!important;' +
                'font-weight: bold!important;' +
                '}' +
                '#tabs ul li.activetab a:hover {' +
                'background-color: #4C4C4C;' +
                '}' +
                '#tabs ul li a:hover {' +
                'background-color: rgba(244, 244, 244, 0.5);' +
                '}' +
                '.profile-avatar {' +
                'background: #FFF;' +
                'float: left;' +
                'padding: 5px;' +
                'box-shadow: 0 0 15px #333;' +
                'margin: 10px;' +
                '}' +
                '.profile-avatar img {' +
                'max-width: 150px;' +
                'max-height: 300px;' +
                '}' +
                '.boxInfo {' +
                'padding: 15px;' +
                'margin-top: 100px;' +
                'float: right;' +
                'width: 15%;' +
                '}' +
                '#profile-advanced-left{' +
                'margin-right: 0!important' +
                '}' +
                '</style>');

            $('.profile-avatar').after('<div style="padding-top:1em;"><a href="' + link + '"><img src="http://i.imgur.com/veRx35R.jpg"></div></a>');


        });
    };

Obrigado, resultou perfeitamente.