Tema Aéreo

A única maneira de fazer isso seria desabilitar o componente que personalizou a página da categoria. Você precisará ir para https://discourse.jordanvidrine.com/admin/customize/themes, clicar em Components e encontrar Modern Category + Group Boxes. Uma vez nessa página, role até o final e clique em Disable.

1 curtida

Ok. Mas o tema não pode ser personalizado :dizzy_face:

2 curtidas

Mais uma pergunta, preciso mostrar o número de visualizações na lista de tópicos, por favor, diga-me como fazer isso, muito obrigado.

1 curtida

Olá Jordan, obrigado pela sua resposta! Eu realmente agradeço!

1 curtida

Ei @jordan.vidrine, obrigado pelo ótimo tema! Gostaria de saber se há uma maneira de mostrar categorias e os mais recentes na página inicial? Nos avise.

2 curtidas

Meu tema é discourse.fotografos.online - Pelo amor de Deus, POR QUE O TOPO está branco? Onde está meu cabeçalho!?? :hot_face: alguém me ajude! É uma instalação nova! o que faço para adicionar uma imagem lá em vez de azul sólido?

1 curtida

@jordan.vidrine É possível adicionar uma coluna de Visualizações? Se sim, onde posso acessar essa opção? Obrigado.

2 curtidas
1 curtida

Obrigado pela resposta e por enviar estas informações. Eu só queria saber como aplicar isso ao tema!

1 curtida
  1. Vá para admin/customize/themes
  2. Clique em componentes
  3. Clique em Instalar
  4. Clique em criar novo e dê um nome a ele
  5. Clique no novo componente na lista de componentes
  6. Clique em Editar Html/css
  7. Adicione o código vinculado acima ao arquivo css comum.
  8. Adicione este novo componente ao tema atualmente em uso
2 curtidas

Obrigado. Agradeço muito a sua ajuda.

1 curtida

Não consegui fazer o HTML/CSS funcionar com o tema atual. No entanto, consigo ver a seção “Views” ao visualizar o novo componente. O tema também mostra o novo componente como adicionado.

Aqui está um vídeo curto: https://share.cleanshot.com/ekutkT

Por favor, me avise se você vir algo que estou fazendo de errado na configuração quando tiver tempo.

Obrigado por toda a sua ajuda.

1 curtida

Onde eu adiciono isso? Isso corrigirá a imagem de fundo sendo cortada como na imagem, sim?

1 curtida

Você pode passar pelo seguinte e adicionar o CSS lá:

1 curtida

Como adicionar a coluna “Visualizações” na lista de tópicos.

Não sou desenvolvedor nem programador. Passei algumas horas brincando com o código CSS usando o recurso Inspecionar Elemento no Google Chrome. Consegui fazer a coluna de visualizações ser exibida corretamente e também redimensionei todas as colunas de acordo com minhas preferências. Sinta-se à vontade para ajustar a largura no código CSS abaixo. Também adicionei comentários no código para que você possa identificar facilmente qual código é para qual coluna. Para cada coluna, existem 2 áreas (Cabeçalho e linha). Essas larguras precisam corresponder.

Espero que isso ajude a todos vocês: @daming @bksubhuti @eddy2

Instruções

1. Crie um novo componente.

2. Copie este CSS

Use este CSS atualizado abaixo em vez do código fornecido por @jordan.vidrine acima.

Opção A) Adicione a coluna Visualizações apenas para Desktop (Recomendado)

  • Adicione o código CSS na aba Desktop.

Opção B) Adicione a coluna Visualizações para Desktop e Mobile.

  • Adicione o código CSS na aba Comum.

Opção C) Adicione a coluna Visualizações apenas para Mobile.

  • Adicione o código CSS na aba Mobile.

Observação: Se você escolheu a Opção B ou C…

No mobile, as 3 colunas (Respostas, Visualizações, Atividade) ocupam muito espaço e ficam apertadas. Se precisar disso para mobile, sugiro remover uma das 3 colunas. Você pode fazer isso adicionando Display: none a ambas as áreas (Cabeçalho, Linhas) no código CSS abaixo para a coluna que deseja ocultar.

/* [Tópico] */

    /* Cabeçalho do Tópico */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Linha do Tópico */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Respostas] */

    /* Cabeçalho de Respostas */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Linhas de Respostas */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Visualizações] */

    /* Cabeçalho de Visualizações */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Linhas de Visualizações */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [Atividade] */

    /* Cabeçalho de Atividade */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Linhas de Atividade */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine Se você tiver alguma revisão para o CSS que escrevi, por favor me avise. Eu não sei exatamente o que estou fazendo… mas funciona, lol.

6 curtidas

Aqui estão minhas alterações de CSS para melhorar a visualização em dispositivos móveis.

Eu amo este tema, mas notei alguns pequenos detalhes estranhos, então também adicionei o seguinte CSS para torná-lo um pouco mais agradável na minha perspectiva. Espero que isso ajude outras pessoas com as mesmas preferências.

Aqui está o Original (Não editado)

Observe o seguinte na imagem acima:

  • O número 1 que representa as Respostas está muito à esquerda.
  • A bolha do tópico está ligeiramente sobrepondo o fundo azul.
  • Não há preenchimento entre todo o conteúdo e o fundo azul.
  • O fundo azul não fica bom na página da categoria. Eu o amo na página inicial.

Aqui está o código CSS que adicionei na aba Mobile.

/* Adiciona algum preenchimento à área de Categoria, Subcategoria, Tags, pesquisa, mais recente, novo tópico e notificações */
.list-controls {
    padding: 5px;
}

/* Adiciona algum preenchimento à área de Tópicos */
div#list-area {
    padding: 6px;
}

/* Alinha o número de Respostas mais para a direita */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
    float: right;
}

Atualizado (Após adicionar o CSS)

Se você também prefere remover o fundo azul, aqui está o código para removê-lo apenas das páginas de categoria.

/* Remove o fundo azul apenas para a categoria */
html .category .background-container {
    background: #fff;
    clip-path: none;
}

Aqui está como fica com todas as alterações.

4 curtidas

Sinalização de Problema no Celular

No celular, há um menu suspenso de Categoria. Ao clicar e selecionar “Mais recentes”, “Não lidas” ou “Principais”, você não pode mais selecionar Categorias no menu suspenso.

1. Antes

2. Quando o menu suspenso é clicado

3. Depois de clicar

4. Menu suspenso (Categorias ausentes)

Neste ponto, um usuário não consegue selecionar o menu suspenso e escolher Categorias novamente.

Algum conselho sobre como corrigir este problema?

Obrigado

2 curtidas

@UnitedFreedom
:clap: :clap: :clap:
Muito obrigado por postar estas instruções úteis para aqueles que desejam que a coluna de visualização fique visível.

Você tem um link para o seu site? Estou tentando isso no meu localmente e não consigo reproduzir.

3 curtidas

Obrigado por este tema completo e polido.

Estou tendo um problema com o componente de tópicos em destaque que não está mostrando os cards. Gostaria também de ter a opção de mostrar apenas tópicos em destaque dentro de categorias específicas. O que, em teoria, deveria funcionar ou mesmo em variantes com base no oficial.

Veja a imagem abaixo

Posso, se necessário, enviar uma mensagem direta com um link para você dar uma olhada. Ambos os tópicos de teste têm imagens em destaque; embora usem a tag personalizada pi-featured. Executando test-passed

Por favor, envie um link, darei uma olhada :+1:

2 curtidas