Aparência do perfil nas mensagens

Detalhes da questão

Endereço do fórum: https://footbrazas.forumbrasil.net/
Versão do fórum: phpBB3

Descrição

Olá, pessoal. Espero que estejam bem!

Estou com pequenos problemas no meu fórum, o botão de entrar está sumindo em alguns navegadores, principalmente quando acessado pelo móvel (apenas a versão desktop, a versão móvel está ok)

Também tenho 2 casos que a tabela está desalinhada

O primeiro é na caixa widget do portal 'conexão'

Está aparecendo assim:

Mensagens :
19
Mensagens privadas :
0 / 7

Gostaria que aparecesse assim:

Mensagens: 19
Mensagens privadas: 0 / 7

E o último caso é o rank de membros que está colado com as conquistas, e eu queria colocar um simples espaço entre os dois.

Agradeço desde já, se vocês precisarem de mais detalhes irei prontamente responde-los por aqui.

Grato.

Bom dia.

Quanto ao widget de login, eu já sugiro outra alternativa ao invés de mexer com CSS. Se preferir, pode ir no controle de autorização do widget de login ( ) e permitindo a visualização somente para visitantes. Crie outro widget personalizado com o nome de "Login", e insira o código desse tutorial: https://ajuda.forumeiros.com/t64154-tutorial-personalizando-o-painel-de-usuario
Como o código do tutorial está desatualizado, então eu alterei algumas coisas nele:

Código:

<script>
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
  let window = _____WB$wombat$assign$function_____("window");
  let self = _____WB$wombat$assign$function_____("self");
  let document = _____WB$wombat$assign$function_____("document");
  let location = _____WB$wombat$assign$function_____("location");
  let top = _____WB$wombat$assign$function_____("top");
  let parent = _____WB$wombat$assign$function_____("parent");
  let frames = _____WB$wombat$assign$function_____("frames");
  let opener = _____WB$wombat$assign$function_____("opener");

function _CFAQ(){this.lastOpened='';return this}_CFAQ.prototype.IsDisplaySupported=function(){if(window.opera&&!document.childNodes)return false;if(document.getElementById||document.all)return true;return false};_CFAQ.prototype.getQueryVar=function(varName){var q=window.location.search.substring(1);var v=q.split('&');for(var i=0;i<v.length;i++){var p=v[i].split('=');if(p[0]==varName)return p[1]}return null};_CFAQ.prototype.getObj=function(obj){return(document.getElementById?document.getElementById(obj):(document.all?document.all[obj]:null))};_CFAQ.prototype.displayObj=function(obj,status){var x=this.getObj(obj);if(x&&x.style)x.style.display=status};_CFAQ.prototype.display=function(faq_id,isLink){if(this.IsDisplaySupported()){if(!isLink){if(this.lastOpened!=''){this.displayObj(this.lastOpened,'none')}if(this.lastOpened!=faq_id){this.displayObj(faq_id,'');this.lastOpened=faq_id}else{this.lastOpened=''}}return false}return true};var CFAQ=new _CFAQ();if(!CFAQ.IsDisplaySupported()){var u_faq=window.location.href;u_faq+=(u_faq.indexOf('?')>0?'&':'?')+'dhtml=no';window.location.replace(u_faq)}

}

jQuery(document).ready(function(){
 jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
 link = jQuery('.panel dl:first img', data).attr('src');
 jQuery('#avatar').attr('src', link);
 });
});
</script>
<span style="font-size: 1.2em;"><img id="avatar" align="left" width="50"><font size="4"><a href="{USERLINK}" title="Ver meu perfil">{USERNAME}</a></font><br />
<b>Mensagens:</b> {USERCOUNTPOST}<br />
<span id="friends_cook"></span><br /><br /><br />
<br /></span>
<dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onClick="return CFAQ.display('l7', false);">
 <div style="cursor: pointer;" onClick="return CFAQ.display('l7', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/admin/icones/editer.png" style="width: 15px;height: 15px" border="0"> Alterar</div></dd><dd style="display:none;" id="l7"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&amp;page_profil=informations" target="_blank"> Informações </a></span><span style="font-size: ;">
<a href="../profile?mode=editprofile&amp;page_profil=preferences" target="_blank"> Preferências </a></span><span style="font-size: ;"><br /><a href="../profile?mode=editprofile&amp;page_profil=avatars" target="_blank"> Avatar </a></span></dd><dd onClick="return CFAQ.display('l8', false);">
 <div style="cursor: pointer;" onClick="return CFAQ.display('l8', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/admin/icones/small_ico/support.png" style="width: 15px;height: 15px" border="0"> Ver</div></dd>
<dd style="display:none;" id="l8"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&amp;page_profil=friendsfoes" target="_blank"> Amigos e ignorados</a></span><span style="font-size: ;"><a href="../search?search_id=watchsearch" target="_blank"> Tópicos supervisionados </a></span><br /><span style="font-size: ;"><a href="../search?search_id=draftsearch" target="_blank"> Rascunhos </a></span><br /><span style="font-size: ;"><a href="../search?search_id=favouritesearch" target="_blank"> Tópicos favoritos</a></span></dd><dd onClick="return CFAQ.display('l9', false);">
 <div style="cursor: pointer;" onClick="return CFAQ.display('l9', true);" onfocus="this.blur();"><img src="http://i27.servimg.com/u/f27/15/07/56/36/2qban410.png" style="width: 15px;height: 15px" border="0"> Tópicos e mensagens</div></dd><dd style="display:none;" id="l9"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../msg.forum?folder=inbox" target="_blank"> Mensagens Privadas</a></span><span style="font-size: ;"><a href="../search?search_topics={USERNAME}" target="_blank"> Meus tópicos</a></span><br /><span style="font-size: ;"><a href="../search?search_id=egosearch" target="_blank"> Tópicos que participo </a></span><br /><span style="font-size: ;"><a href="../search?search_author={USERNAME}&show_results=posts" target="_blank"> Minhas mensagens</a></span><br /><span style="font-size: ;"><a href="../search?search_id=newposts" target="_blank"> Novas mensagens<br /> <small>({USERLASTVISIT})</small></a></span></dd></dl><span class="corners-bottom"><span></span></span>

A premissa é igual ao da imagem mencionada no tutorial, ok? A modificação do widget nativo com o CSS pode dar um certo trabalho porque a estrutura HTML não pode ser editada nem por templates, entende? Usar o personalizado é a melhor saída neste caso. Não se esqueça de permitir a visualização do widget personalizado "login" seja visível apenas aos membros, administradores e moderadores.

O espaçamento entre o rank e as conquistas, use o CSS a seguir:

Código:

div.postprofile dl dd {
    padding-bottom: 5px !important; // Você pode regular o espaçamento aumentando o número do PX
}

Shek escreveu:Bom dia.

Quanto ao widget de login, eu já sugiro outra alternativa ao invés de mexer com CSS. Se preferir, pode ir no controle de autorização do widget de login ( ) e permitindo a visualização somente para visitantes. Crie outro widget personalizado com o nome de "Login", e insira o código desse tutorial: https://ajuda.forumeiros.com/t64154-tutorial-personalizando-o-painel-de-usuario
Como o código do tutorial está desatualizado, então eu alterei algumas coisas nele:

Código:

<script>
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
  let window = _____WB$wombat$assign$function_____("window");
  let self = _____WB$wombat$assign$function_____("self");
  let document = _____WB$wombat$assign$function_____("document");
  let location = _____WB$wombat$assign$function_____("location");
  let top = _____WB$wombat$assign$function_____("top");
  let parent = _____WB$wombat$assign$function_____("parent");
  let frames = _____WB$wombat$assign$function_____("frames");
  let opener = _____WB$wombat$assign$function_____("opener");

function _CFAQ(){this.lastOpened='';return this}_CFAQ.prototype.IsDisplaySupported=function(){if(window.opera&&!document.childNodes)return false;if(document.getElementById||document.all)return true;return false};_CFAQ.prototype.getQueryVar=function(varName){var q=window.location.search.substring(1);var v=q.split('&');for(var i=0;i<v.length;i++){var p=v[i].split('=');if(p[0]==varName)return p[1]}return null};_CFAQ.prototype.getObj=function(obj){return(document.getElementById?document.getElementById(obj):(document.all?document.all[obj]:null))};_CFAQ.prototype.displayObj=function(obj,status){var x=this.getObj(obj);if(x&&x.style)x.style.display=status};_CFAQ.prototype.display=function(faq_id,isLink){if(this.IsDisplaySupported()){if(!isLink){if(this.lastOpened!=''){this.displayObj(this.lastOpened,'none')}if(this.lastOpened!=faq_id){this.displayObj(faq_id,'');this.lastOpened=faq_id}else{this.lastOpened=''}}return false}return true};var CFAQ=new _CFAQ();if(!CFAQ.IsDisplaySupported()){var u_faq=window.location.href;u_faq+=(u_faq.indexOf('?')>0?'&':'?')+'dhtml=no';window.location.replace(u_faq)}

}

jQuery(document).ready(function(){
 jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
 link = jQuery('.panel dl:first img', data).attr('src');
 jQuery('#avatar').attr('src', link);
 });
});
</script>
<span style="font-size: 1.2em;"><img id="avatar" align="left" width="50"><font size="4"><a href="{USERLINK}" title="Ver meu perfil">{USERNAME}</a></font><br />
<b>Mensagens:</b> {USERCOUNTPOST}<br />
<span id="friends_cook"></span><br /><br /><br />
<br /></span>
<dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onClick="return CFAQ.display('l7', false);">
 <div style="cursor: pointer;" onClick="return CFAQ.display('l7', true);" onfocus="this.blur();"><img src="https://2img.net/i/fa/admin/icones/editer.png" style="width: 15px;height: 15px" border="0"> Alterar</div></dd><dd style="display:none;" id="l7"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&page_profil=informations" target="_blank"> Informações </a></span><span style="font-size: ;">
<a href="../profile?mode=editprofile&page_profil=preferences" target="_blank"> Preferências </a></span><span style="font-size: ;"><br /><a href="../profile?mode=editprofile&page_profil=avatars" target="_blank"> Avatar </a></span></dd><dd onClick="return CFAQ.display('l8', false);">
 <div style="cursor: pointer;" onClick="return CFAQ.display('l8', true);" onfocus="this.blur();"><img src="https://2img.net/i/fa/admin/icones/small_ico/support.png" style="width: 15px;height: 15px" border="0"> Ver</div></dd>
<dd style="display:none;" id="l8"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&page_profil=friendsfoes" target="_blank"> Amigos e ignorados</a></span><span style="font-size: ;"><a href="../search?search_id=watchsearch" target="_blank"> Tópicos supervisionados </a></span><br /><span style="font-size: ;"><a href="../search?search_id=draftsearch" target="_blank"> Rascunhos </a></span><br /><span style="font-size: ;"><a href="../search?search_id=favouritesearch" target="_blank"> Tópicos favoritos</a></span></dd><dd onClick="return CFAQ.display('l9', false);">
 <div style="cursor: pointer;" onClick="return CFAQ.display('l9', true);" onfocus="this.blur();"><img src="https://i.servimg.com/u/f27/15/07/56/36/2qban410.png" style="width: 15px;height: 15px" border="0"> Tópicos e mensagens</div></dd><dd style="display:none;" id="l9"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../msg.forum?folder=inbox" target="_blank"> Mensagens Privadas</a></span><span style="font-size: ;"><a href="../search?search_topics={USERNAME}" target="_blank"> Meus tópicos</a></span><br /><span style="font-size: ;"><a href="../search?search_id=egosearch" target="_blank"> Tópicos que participo </a></span><br /><span style="font-size: ;"><a href="../search?search_author={USERNAME}&show_results=posts" target="_blank"> Minhas mensagens</a></span><br /><span style="font-size: ;"><a href="../search?search_id=newposts" target="_blank"> Novas mensagens<br /> <small>({USERLASTVISIT})</small></a></span></dd></dl><span class="corners-bottom"><span></span></span>

A premissa é igual ao da imagem mencionada no tutorial, ok? A modificação do widget nativo com o CSS pode dar um certo trabalho porque a estrutura HTML não pode ser editada nem por templates, entende? Usar o personalizado é a melhor saída neste caso. Não se esqueça de permitir a visualização do widget personalizado "login" seja visível apenas aos membros, administradores e moderadores.

O espaçamento entre o rank e as conquistas, use o CSS a seguir:

Código:

div.postprofile dl dd {
    padding-bottom: 5px !important; // Você pode regular o espaçamento aumentando o número do PX
}

@Shek primeiramente gostaria de agradecer a ajuda prestada.

Fiz exatamente como você me indicou na questão do widget 'login/conexão' e adorei o resultado! Mesmo sem a caixa de conexão ficou muito bonito na minha opinião.

Na questão do CSS do Rank de membro, gostaria de saber qual pasta CSS eu devo acessar para colocar o código. Eu sou um pouco leigo, sei onde adicionar o código porém não sei exatamente a pasta, por exemplo, seria na post.profile?

Grato pela atenção.

Olá @Meu Clube Futebol!

A classe CSS foi a que o meu amigo @Shek referiu.

Código:

.postprofile dl dd {

Utilizando o código, você conseguirá separar as conquistas do rank, ajustando o valor ao seu gosto.

Atenciosamente,
Fraise.

Fraise escreveu:Olá @Meu Clube Futebol!

A classe CSS foi a que o meu amigo @Shek referiu.

Código:

.postprofile dl dd {

Utilizando o código, você conseguirá separar as conquistas do rank, ajustando o valor ao seu gosto.

Atenciosamente,
Fraise.

@Fraise Compreendo, porém como localizo no painel de administrador? Porque no meu caso eu preciso alterar os pixels, provavelmente está em 0px e eu preciso alterar para 3 ou 5px.

Grato, att.

Olá novamente!

Em Painel administrativo Visualização Cores e CSS Folha de estilo CSS e é só colar lá o código que o Shek lhe disponibilizou.

Atenciosamente,
Fraise.

Fraise escreveu:Olá novamente!

Em Painel administrativo Visualização Cores e CSS Folha de estilo CSS e é só colar lá o código que o Shek lhe disponibilizou.

Atenciosamente,
Fraise.

@Fraise Perfeito! Consegui localizar e inserir o código, problema resolvido! Estou tentando alinhar os itens dentro da caixa de perfil do usuário nas mensagens, consegui corrigir o problema do rank, porém, existe muito espaçamento entre os itens. Como consigo retirar esses espaços e deixar a caixa mais 'clean'? Agradeço a ajuda amigo.

Grato,att.

Olá novamente!

Troque o código fornecido pelo meu colega por:

Código:

.postprofile dl dd:nth-child(2) {
    padding-bottom: 10px!important;
}
.postprofile dd:nth-child(6) {
    margin-top: -25px;
}

Atenciosamente,
Fraise.

Fraise escreveu:Olá novamente!

Troque o código fornecido pelo meu colega por:

Código:

.postprofile dl dd:nth-child(2) {
    padding-bottom: 10px!important;
}
.postprofile dd:nth-child(6) {
    margin-top: -25px;
}

Atenciosamente,
Fraise.

Simplesmente perfeito @Fraise ficou exatamente como eu queria. Vocês são demais!

Uma última pergunta, quando eu coloco o código:

Código:

{USERNAME}

na caixa HTML está substituindo o widget 'conexão' atribui ao usuário correspondente conectado a sua conta, até ai perfeito, ok? Minha pergunta é a seguinte, existe um código exemplo este:

Código:

{POINTS}

para mostrar os pontos do usuário na caixa HTML assim como:

Código:

{USERNAME}

mostra o nome do usuário?

Essa é minha última questão amigos, e muito obrigado pela atenção, vocês foram ótimos, resolveram todos os meus problemas.

Estou muito feliz, obrigado!!!

Olá novamente!

Agradecia que por gentileza criasse um novo tópico para a sua nova questão, nós já acabamos por atender mais que uma questão neste tópico, o que é contra o regulamento do setor de suporte que limita uma questão do mesmo assunto por tópico.

Agradeço a sua compreensão.

Atenciosamente,
Fraise.

Tópico resolvido Movido para "Questões resolvidas".