Como mover o novo botão de cabeçalho do tópico e torná-lo maior para dispositivos móveis

Billy · Julho 18, 2025, 11:21pm

Olá a todos! Pesquisei por respostas, mas não encontrei nenhuma. Gostaria de mover o novo botão de cabeçalho do tópico (imagem anexada, alterei o texto para “Faça Sua Pergunta”, botão em verde) para a esquerda do link da categoria no cabeçalho. Quero que seja mais proeminente visualmente em dispositivos desktop e móveis. Além disso, gostaria de redimensioná-lo em dispositivos móveis para que o botão verde real seja exibido.

Isso é possível? Obrigado por qualquer orientação!

NateDhaliwal · Julho 19, 2025, 12:02am

Olá, você pode tentar fazer um fork e alterar este outlet:

github.com/discourse/discourse-new-topic-button-theme-component

javascripts/discourse/initializers/initialize-header-new-topic-button.gjs

ab8b7edee


      
          import { apiInitializer } from "discourse/lib/api";
          import CustomHeaderTopicButton from "../components/custom-header-topic-button";
          
          export default apiInitializer("1.15.0", (api) => {
            api.renderInOutlet("before-header-panel", CustomHeaderTopicButton);
          });

para algo como:

api.renderInOutlet("bread-crumbs-left", CustomHeaderTopicButton);

Por exemplo, eu coloquei o botão acima da barra lateral aqui:

github.com/NateDhaliwal/discourse-new-topic-button-theme-component

javascripts/discourse/initializers/initialize-header-new-topic-button.js

f605192ee


      
          import { apiInitializer } from "discourse/lib/api";
          import CustomHeaderTopicButton from "../components/custom-header-topic-button";
          
          export default apiInitializer((api) => {
            api.renderInOutlet("before-sidebar-sections", CustomHeaderTopicButton);
            /*
            document.addEventListener("DOMContentLoaded", function() {
              const newTopicBtn = document.getElementById("new-topic-button");
              const sidebar = document.getElementById("d-sidebar");
              if (newTopicBtn && sidebar) {
                sidebar.insertBefore(newTopicBtn, sidebar.firstChild);
              }
            });
            */
          });

Você também provavelmente pode alterar o botão usando algum CSS (crie um novo tema e coloque o CSS na aba ‘mobile’ ou em mobile.scss se estiver usando um repositório).

Billy · Julho 19, 2025, 7:28pm

Muito obrigado!! Agradeço seu tempo e ajuda. Vou tentar.

Tópico		Respostas	Visualizações
Move create topic to the top Feature	4	1110	5 de Janeiro de 2019
Mobile new topic button Support	0	49	6 de Abril de 2025
New Topic button hidden text Dev	1	61	7 de Maio de 2025
How to move the New Topic button? Support	0	559	22 de Outubro de 2020
Floating "New topic" button Support	24	4348	10 de Dezembro de 2022

Como mover o novo botão de cabeçalho do tópico e torná-lo maior para dispositivos móveis

Tópicos relacionados