New Topic button hidden text

[Juan_Manuel_Barreto]

Hi! I have been trying to make a style change to the New Post button, but I haven’t been able to figure out a way to do this, and wanted to know if someone could help with ideas on how to solve this.

This is the way the New Topic button looks like on the Desktop and Mobile view:

The responsiveness hides the New Topic text from the button, I would like to preserve this text on the mobile view too, how could I achieve this?

Additionally, these are the html elements that appear on each view:

ELEMENT IN MOBILE:

<button class="btn no-text btn-icon btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg>      <span aria-hidden="true">
          ​
        </span>
    </button>

ELEMENT IN DESKTOP

<button class="btn btn-icon-text btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg>      <span class="d-button-label">New Post<!----></span>
    </button>

Any help will be highly appreciated!

[awesomerobot (Kris)]

We didn’t actually have a great way to get this text back on mobile, so I just added one: DEV: add create-topic-label value transformer by awesomerobot · Pull Request #32621 · discourse/discourse · GitHub — you’ll get this the next time Discourse is updated..

This change will allow you to override our default behavior in an initializer file in a remote theme, or via the admin panel within the admin/customize/themes code editor’s JS tab:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {

  api.registerValueTransformer("create-topic-label", ({ value, context }) => {
    return context.defaultKey;
  });

});

this will override our default mobile/desktop switch with the label, so it will appear in both places: