Problemas com ficha em lightbox

Qual é minha questão:
Estava seguindo esse tutorial para criar uma ficha em lightbox:
clique aqui

O código aparentemente funciona, pois chega a aparecer uma janela, conforme a imagem:clique aqui

Porém, mesmo que eu preencha uma ficha, os dados não aparecem na janela, ficando apenas escrito "null".

Outro problema que percebi é que se eu retiro toda a codificação do java e do css e abro a ficha normalmente ela aparece completamente desorganizada conforme:
clique aqui

Porém, no painel de administrador e no momento em que a ficha é preenchida ela fica organizada, ela só aparece desorganizada durante a visualização.

Endereço do meu fórum:
http://vampirosmitologicos.forumeiros.com

Versão do fórum:
PUNBB

Boa noite!

Isso ocorre porque este tutorial está disponível apenas para versões PhpBB3. Porém, teste este código JS e veja se o problema se resolve:

Código:

jQuery(document).ready(function() { jQuery('a[href^="/u"]').click(function(e) {e.preventDefault();  var link = jQuery(this).attr('href'), t = jQuery(this).find('strong').html(); jQuery.get(link + 'rpg',function(data) { var i = jQuery('#profile-advanced-details table tbody tr td.row1 tbody', data).html(); jQuery('body').prepend('<div id="prevBG"></div><div id="profile-tip">    <span id="close-profile"><img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" /></span>        <strong><a href="' + link + ' rpgsheet">' + t + '</a></strong>' + i + '</div>');
 jQuery("#close-profile").click(function() { jQuery("#prevBG, #profile-tip").fadeOut(); });
 }); }); });

Até mais!

Olá Shek,

testei o código mas infelizmente não funcionou, ainda aparece o "null".

Clique no nome do usuário e veja se resulta.

Olá Shek, infelizmente o erro persiste.

Olá Shek, tive uma dúvida, é possível mudar a versão do forum sem alterar o layout dele (pelo menos não completamente)?

Talvez seja mais simples de resolver assim.

Saudações meu caro!

Neste caso, queira checar por gentileza:

[FAQ] Importação / Exportação / Restauro de temas

Cordiais saudações!

Boa tarde!

Antes de mudar o tema, tente com este código:

Código:

jQuery(document).ready(function() { jQuery('a[href^="/u"]').click(function(e) {e.preventDefault();  var link = jQuery(this).attr('href'), t = jQuery(this).find('strong').html(); jQuery.get(link + 'rpg',function(data) { var i = jQuery('#profile-advanced-details .main-content', data).html(); jQuery('body').prepend('<div id="prevBG"></div><div id="profile-tip">    <span id="close-profile"><img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" /></span>        <strong><a href="' + link + '">' + t + '</a></strong>' + i + '</div>');
 jQuery("#close-profile").click(function() { jQuery("#prevBG, #profile-tip").fadeOut(); });
 }); }); });

E seguida, tente com este CSS:

Código:

#profile-tip {
position: fixed;
top: 50%;
left: 30%;
background: white;
padding: 10px;
border: 1px solid black;
box-shadow: 0 0 50px black;
border-radius: 20px;
  z-index: 9999 !important;
}
#profile-tip .ipbform2{
max-width: 600px;
}
#profile-tip td.row1, #profile-tip td.catLeft {
  background: white;
}
#profile-tip .panel {
background: transparent !important;
}
#profile-tip  fieldset.left{
float: left !important;
}
#close-profile {
cursor: pointer;
padding: 5px;
position: absolute;
left: -15px;
top: -25px;
}
#prevBG{background:rgba(0, 0, 0, 0.31);bottom:0;left:0;position:fixed;right:0;top:0;z-index:99!important}

Até mais!

Ola Shek e Dokyo, muito obrigado pela ajuda até o momento.

Shek o codigo funcionou ficou apenas 3 "probleminhas":

1 - A fonte do texto é branco então quando abre a ficha as letras não aparece (só dá pra ver selecionando um trecho com o mouse).

2 - A posição onde a ficha está não permite a visualização completa, seria possível colocar ela "mais pra cima"?

3 - Acho que mesmo colocando pra cima, ainda vai faltar espaço para visualizar a ficha toda, será que é possível colocar uma barra de rolagem?

Você tentou usar o CSS antigo? Talvez eu tenha feito algo desnecessário que foi editar o CSS. Use o antigo e veja se esses problemas técnicos são resolvidos.

Olá Shek, obrigado pela paciência, tentei o codigo antigo mas os problemas persistem.

Boa noite!

Você pode pesquisar no seu CSS o seguinte código:

Código:

#profile-tip

Ao encontrar, substitua por esse:

Código:

#profile-tip {
position: fixed;
color: black !important;
top: 13% !important;
left: 30%;
background: white;
padding: 10px;
border: 1px solid black;
box-shadow: 0 0 50px black;
border-radius: 20px;
z-index: 9999 !important;
}

Até mais!

Olá Shek, seu código resolveu o problema.

Muito obrigado pela ajuda e paciência.

Abraços!