Detalhes da questão

Endereço do fórum: http://stuartforuns.forumeiro.com/forum
Versão do fórum: PunBB

Descrição

Quero deixar essa parte do meu fórum: https://i.imgur.com/zszxwEc.png

Igual a essa: https://i.imgur.com/UsDhIRQ.png

E com o mesmo modo hover.


E se dê para retirar essa barra vermelha e desbuga o avatar, eu agradeço.

Olá,

Iremos precisar do template topics_list_box.

o/

Olá querido!

Adicione à tua CSS:

Código:

.main-foot.clearfix {
    display: none !important;
}
.main .main-content:hover {
    background-color: #e3e3e3 !important;
}

Att.

Retirou a barra vermelha, porém bugou algumas coisas, como o efeito hover.

Aqui está meu template:

Código:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         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}() {
         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="main-head">
      <!-- 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 -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- 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 -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.topic.table_sticky.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
            {topics_list_box.row.ICON}&nbsp;
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
            {topics_list_box.row.TOPIC_TYPE}&nbsp;
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
            {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
         <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.REPLIES}</td>
         <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.VIEWS}</td>
         <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
            </td>
         <!-- BEGIN multi_selection -->
         <td><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} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- 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 -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Acrescente mais este:

Código:

.lastpost-avatar {
margin-top: -10px;
margin-left: -50px;
position: absolute;
}

O senhor deverá pesquisar na CSS por: .lastpost-avatar e substituir o código por este acima!

Att!

Tem muitos desses .lastpost-avatar no meu css, devo apagar tudo e colocar o seu?

Mande-me a tua CSS que eu edito, é mais seguro para não haver perdas de códigos.

https://pastebin.com/BUbAJXHZ

Aqui

Substitua por essa: https://pastebin.com/JXrUrRuE

Att!

O Modo hover continua bugado o da pagina inicial e demais itens. Como a barra de anúncio.

Aqui está funcionando normalmente!

Qual o seu navegador? Tente limpar os cookies do mesmo. Eu utilizo o Google Chrome e não está bugando.

Obrigado, agora só falta mudar a visualização dos tópicos.

PrisoN†BreaK escreveu:Obrigado, agora só falta mudar a visualização dos tópicos.

Como assim? Poderia ser mais específico senhor?

Essa parte: https://imgur.com/lqSG9qH

Ficar igual a essa: https://imgur.com/SScEotV

Ali em Posts ao lado dele também ficasse Visualizações

UP

UP

UP

UP

Fora o avatar bugado, o que ficou faltando desse pedido?

Código:

.lastpost-avatar {
    margin: 0;
    left: 15px;
    top: 50%;
    transform: translatey(-50%);
}

As aparencias dos tópicos, essa parte:

No caso essa: https://imgur.com/zszxwEc igual essa:https://imgur.com/UsDhIRQ

Adicione ao CSS:

Código:

.tdtopics {
    padding: 30px 0 30px 80px !important;
    position: relative;
}

.tdtopics .status {
    margin: 0 !important;
    left: 40px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tdtopics + .tc2 {
    font-size: 28px;
}

.tdtopics + .tc2::after {
    content: "posts";
    display: block;
    font-size: 12px;
    line-height: 1em;
}

#main-content .tdtopics ~ .tcr {
    position: relative;
    padding-left: 70px !important;
}

.tdtopics ~ .tcr .lastpost-avatar {
    left: 0;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
}

Resultou, só mais um pedido, tem como deixar o avatar redondo?

E descolar essa parte que ta escrito descolar. e arrumar essa outra que marquei em preto: https://imgur.com/a/QBLQS

Adicione ao CSS:

Código:

.main .main-content {
    width: auto !important;
}

.lastpost-avatar img {
    border-radius: 50%;
}

.main-content + .main-head {
    margin-top: 30px;
}

Certo, agora só falta arrumar essa parte: https://imgur.com/a/8ZUaz

E deixar os avatares redondo.

PrisoN†BreaK escreveu:Certo, agora só falta arrumar essa parte: https://imgur.com/a/8ZUaz

E deixar os avatares redondo.

O CSS que passei faz justamente isso. Não encontrei ele aplicado na sua folha de estilos, jovem.

Ele esta aplicado no topo da minha folha.

https://imgur.com/a/gMiWy

Tente movê-la para o fim da folha. O estranho é que abri o arquivo CSS no navegador e não encontrei os códigos em lugar algum. Se estivesse no início, pelo menos apareceria.