Login personalizado

Qual é minha questão:
Como eu coloco um perfil personalizado igual a essa img :

https://i.imgur.com/sdGmb.png

Encontrei nesse forum: http://prismahunters.forumeiros.com/forum

Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://bcvgames.forumbrasil.net

Versão do meu fórum:
PHPBB3

Olá, peso que cheque este tutorial http://spdesign.ativoforum.com/t1747-tutorial-menu-conectado-como

Olá,iStrock._. Siga esse tutorial..


1º - Código que deve ser utilizado:
Esse é um código javascript, irei ensinar onde colocar depois

Código:

    jQuery(document).ready(function(){if(jQuery('#page-header .navbar a.mainmenu #i_icon_mini_login').length){d='Bem vindo Visitante! <a href="/login">Login</a> | <a href="/register">Criar Conta</a> '}else{d='Conectado como <b>'+jQuery('#page-header .navbar a.mainmenu #i_icon_mini_logout').parent().html().split('[ ')[1].split(' ]')[0]+'</b> | <a href="/profile?mode=editprofile">Minha conta</a> | <a href="/login?logout=1">Sair</a> '};jQuery('#wrap').prepend('<style>.hlogin,.hlogin a:link,.hlogin a:visited{color:#666;font-family:Arial,Geneva,Helvetica,Verdana,sans-serif;text-decoration:none}.hlogin{-moz-border-radius:0 0 7px 7px;-moz-box-shadow:0 0 8px 0 #353535;-webkit-border-radius:0 0 7px 7px;-webkit-box-shadow:0 0 8px 0 #353535;background:-moz-linear-gradient(#ffffff,#f2f2f2);background-color:#fff;background-image:-webkit-linear-gradient(#ffffff,#f2f2f2);border:1px solid #c4c4c4;border-radius:0 0 7px 7px;box-shadow:0 0 8px 0 #353535;float:right;font-size:13px;height:31px;margin:0 20px 0 0;padding:0 0 0 10px;text-align:right;vertical-align:middle;position:absolute;z-index:1;right:165px;top:0px}.hlogin #header{height:26px;padding:5px 20px 0 10px;vertical-align:middle}</style><div class="hlogin"><div id="header">'+d+'</div></div>')});

2º - Inserindo o código JavaScript:
Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript
Depois carregue-se no botão "Criar um novo javascript".
(carregue na imagem para aumentar)


Titulo - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;
Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna de perfis;
Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;
Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.

Resulta ?
Até Mais...

Onde eu modifico a posição dele ?
Tipo colocar ele mais para o lado direito , onde eu modifico ?

Olá De Novo,iStrock._.
Não sei lhe dizer com precisão,mais procure por "position" no codigo !
Ajudei ? +rep
até mais

Ja resolvi , nen precisei , li o codigo e entendi ele , vlw negada

De nada , qualquer duvida só postar,estamos aqui para lhe ajudar !