Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Centralizar o ícone da mensagem

4 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 29.11.24 4:53

Detalhes da questão


Endereço do fórum: https://redehopex.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Centralizar o ícone da mensagem Captur11
Diante essa print a cima eu modifiquei o template e adicione um codigo na folha css no qual irei passar, mas adiantando gostaria de saber como poderia centralizar aquele incone resolvido deixando ele no meio e colocar no canto direito o Avatar redondo e embaixo dele o nome de  nick e embaixo do nick onde tem hoje tal hora

codigo css:
Código:
\\ subforum
.forumbg.announcement {
    background-color: transparent;
}
.forumbg .header {
    background-color: #22b3a7;
}
.page-topic .row {
    border: 0;
    margin: 10px 0;
    box-shadow: 0 1px 6px rgb(0,0,0,6%);
    display: grid;
    align-items: center;
    height: 120px;
}
.page-topic .topic-title a {
    font-size: 16px !important;
}
 
.page-topic .lastpost span > center > span {
    font-size: 14px !important;
}
\\ fim subforum

template topic list box:
Código:
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<style>
</style>
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
 
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
      {
         alert('MAIN');
 
         var all_checked = true;
 
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
         {
            if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
            {
               all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
            }
         }
 
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
 
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
      {
         alert('ALL');
 
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
         {
            if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
            {
               document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
            }
         }
      }
 
      </script>
   <!-- END multi_selection -->
 
   <div class="forumbg announcement">
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_list_box.row.L_TITLE}
               </dt>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none page-topic">
<!-- END header_table -->
 
<!-- BEGIN header_row -->
      <strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->
 
<!-- BEGIN topic -->
 
   <!-- BEGIN table_sticky -->
         </ul>
      </div>
      <div class="forumbg">
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm">
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
               </dd>
               <dd class="posts"></dd>
               <dd class="views"></dd>
               <dd class="lastpost"></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->
 
      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
         <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>
               <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
               <!-- END single_selection -->
               <div class="topic-title-container">
                  {topics_list_box.row.NEWEST_POST_IMG}
                  {topics_list_box.row.PARTICIPATE_POST_IMG}
                  {topics_list_box.row.TOPIC_TYPE}
                  <h2 class="topic-title hierarchy">
                     <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                        {topics_list_box.row.TOPIC_TITLE}
                     </a>
                  </h2>
               </div>
               <!-- BEGIN switch_description -->
                  <span class="topic-description">
                     {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
               <!-- END switch_description -->
               <span class="topic-author">
                  &nbsp;{topics_list_box.row.L_BY}&nbsp;{topics_list_box.row.TOPIC_AUTHOR}
               </span>
               {topics_list_box.row.GOTO_PAGE_NEW}
               <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
               <!-- END nav_tree -->
               <div class="postdetails">
                  <span class="postreplies"><i class="fas fa-comments"></i> {topics_list_box.row.REPLIES} {L_REPLIES}</span>
                  <span class="postviews"><i class="fas fa-eye"></i> {topics_list_box.row.VIEWS} {L_VIEWS}</span>
               </div>
            </dd>
            <dd class="lastpost">
               <!-- BEGIN avatar -->
                  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
               <!-- END avatar -->
 
               <span>
                  <center>{topics_list_box.row.LAST_POST_AUTHOR}</center><dfn>{L_LASTPOST}</dfn>{topics_list_box.row.LAST_POST_TIME}
               </span>
            </dd>
            <!-- BEGIN multi_selection -->
               <input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            <!-- END multi_selection -->
         </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
   <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
   </dl>
</li>
<!-- END no_topics -->
 
<!-- BEGIN bottom -->
</ul>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por tikky 03.12.24 19:10

Olá @PauloVinicios1755,

incone resolvido deixando ele no meio
Adicione na folha de estilo (CSS)
Código:
.dterm[style^="background"] {
background-position: right 25px top 50% !important;
}
Ative o avatar. Aceda ao Painel de administração > Visualização > Página inicial > Estrutura e hierarquia e marque "Sim" na opção "Mostrar avatar na coluna "Última mensagem"".


Atenciosamente,
tikky.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 8023
Pontos : 9275

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 03.12.24 19:55

Funfou agradeço desde já, mas queria alterar a parte onde fica o avatar, nome e a dia e o horario postado pra tipo assim

porem no canto do lado direito e aumentar um pouco o icone do avatar

Avatar
zProfessor
Ontem à(s) 23:29
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por tikky 09.12.24 17:26

@PauloVinicios1755: Adicione isto na Folha de estilo relativamente ao ajuste das informações da última mensagem
Código:
.topics .lastpost {
 display: flex;
 flex-direction: row;
 justify-content: flex-end;
}
.topics .lastpost span > center > span {
 display: block;
 width: 100%;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 8023
Pontos : 9275

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 09.12.24 17:40

Salve  @tikky depois do ultimo codigo ele não ficou no canto direito e n ficou Embaixo do avatar e sim ao lado teria como corrigir?
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por tikky 09.12.24 17:48

Desculpe, interpretei mal o seu pedido, substitua
Código:
.topics .lastpost {
 display: flex;
 flex-direction: row;
 justify-content: flex-end;
}
para
Código:
.topics .lastpost {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: .25rem;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 8023
Pontos : 9275

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 09.12.24 18:07

salve  @tikky funfou o codigo, mas ele ficou descentrado a parte do avatar do nome e as informações poderia centrar? e ficou um pouco pra baixo poderia jogar tudo pra cima um pouco  ta ai a print como ficou: https://prnt.sc/4v8RHNcWqNs3
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por tikky 09.12.24 18:36

PauloVinicios1755 escreveu:salve  @tikky funfou o codigo, mas ele ficou descentrado a parte do avatar do nome e as informações poderia centrar? e ficou um pouco pra baixo poderia jogar tudo pra cima um pouco  ta ai a print como ficou: https://prnt.sc/4v8RHNcWqNs3
Não consigo visualizar a captura de ecrã. E falta adicionar isto na folha de estilo
Código:
.topics .lastpost span > center > span {
 display: block;
 width: 100%;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 8023
Pontos : 9275

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 09.12.24 19:41

Centralizar o ícone da mensagem Captur12
creio que o codigo n funfou Triste  não ficou centrado e nem no canto direito  @tikky
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 15.12.24 7:56

tente este código

Código:
 dd.lastpost {
margin-left: 210px !important;
}

Centralizar o ícone da mensagem Scree453
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 15.12.24 17:25

agora ficou tudo bugado
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 16.12.24 8:51

você pode postar uma captura de tela, eu vejo ok

Centralizar o ícone da mensagem Scree455



se você ainda os encontrar com erros, talvez exclua meu código e tente novamente o código do tikky com a adição "importante

Código:
.topics .lastpost span > center > span {
 display: block !important;
 width: 100% !important;
}




Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 17.12.24 17:33

salve  @Shion resolveu o bug mas n ficou igual a sua print Triste  

https://i.servimg.com/u/f66/20/32/58/76/captur13.png
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 18.12.24 10:14

Código:

.topics .lastpost {
    margin-left: 200px; }
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 18.12.24 12:36

Salve  @Skouliki o código funcionou no fórum mas quando chegou no sub tópico bugou foi tudo segue a print

https://servimg.com/view/20325876/11
https://i.servimg.com/u/f66/20/32/58/76/screen12.jpg
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 18.12.24 16:56

Código:

.topics .lastpost {
    margin-left: 160px; }
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 18.12.24 17:14

Ainda persiste Triste
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 19.12.24 9:27

qual dispositivo você usa? porque do meu laptop -versão desktop- os códigos estão funcionando bem
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 19.12.24 15:50

no computador em qualquer pc está perfeitamente mas nos dispositivos celulares estão bugado Redmi Note 9S Xiaomi
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 20.12.24 11:02

desculpe, não posso testá-lo para todos os dispositivos móveis
Pelo que eu sei, laptop, iPad, iPhone 12/14 estão ok
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Shek 27.12.24 0:11

Olá!

Você pode tentar de outra forma (pelo menos eu acho que deu certo para mim). Apague todo as sugestões dadas acima, e insira este código CSS:
Código:
ul.topiclist.forums dd.lastpost {
    text-align: center;
}
ul.topiclist.forums dd.lastpost .color-groups,ul.topiclist.forums dd.lastpost .lastpost-avatar {
    float: none;
}
ul.topiclist.forums dd.lastpost .lastpost-avatar img {
    display: inline-block !important;
}
Depois, acesse Módulos > HTML e Javascript > Gestão dos códigos .JS > e clique em Adicionar um novo javascript. Inclua para Todas as páginas:
Código:
$(document).ready(function(){$('ul.topiclist.forums dd.lastpost .lastpost-avatar').append('<br />');});
Veja se resolve por favor.

Para mim o resultado é:
Centralizar o ícone da mensagem Res13

Atenciosamente,
Shek King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19035
Pontos : 23022

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 28.12.24 5:55

Salve  @Shek Desculpe a demora estava doente, o codigo funcionou 100% agradeço desde já mas o contorno do avatar ficou fora ficando bugado teria como resolver?
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Shek 28.12.24 10:44

Bom dia, Paulo!

Eu me esqueci desse detalhe, então vamos tentar resolver. Acesse sua folha de estilos CSS e procure na caixa de pesquisa este código:
Código:
.lastpost-avatar:after
Altere a propriedade top:11px; para top:-30%; ou top:-15px;

Atenciosamente,
Shek King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19035
Pontos : 23022

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 29.12.24 2:53

salve  @Shek tentei localizar isso ai mas, sem sucesso
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Shek 29.12.24 15:17

Bom dia.

Adiciona no teu CSS esse código:
Código:
.lastpost-avatar:after {top: -30px !important;}
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19035
Pontos : 23022

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por PauloVinicios1755 30.12.24 17:02

salve  @Shek funfou perfeitamente, só alterei a props de "-30" para "-15" e funfou legal feliz ano novo pra ti <3
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Centralizar o ícone da mensagem

Mensagem por Skouliki 31.12.24 16:58

Tópico resolvido


Movido para "Questões resolvidas".
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Permissões neste sub-fórum
Não podes responder a tópicos