Changing text of "New Topic" button on a single category page


(Michael Downey) #1

Does anyone have an idea for how to change the text of the + New Topic button in the upper right of a specific category description page?

Creating a category for Q&A using the Solved Button plugin, and would like to change it to: + New Question


Duplicate notifications for likes?
(Michael Downey) #2

As a hack I used this CSS, but if someone has a more elegant idea, I’d love to hear it:

body.category-MYCATEGORY button#create-topic { color: transparent; }
body.category-MYCATEGORY button#create-topic i { color: $secondary; }
body.category-MYCATEGORY button#create-topic:after { content: "New Question"; color: $secondary; margin-left: -80px; }

(RĂ©gis Hanol) #3

I would only use .category-MYCATEGORY #create-topic but other than that, there’s not much you can do in CSS.


(Michael Downey) #4

I figured.

Any JavaScript ideas out there? :stuck_out_tongue:


(Dean Taylor) #5

It’s far from more simple - but this is perhaps how I would attempt hack around it (with my somewhat limited knowledge of Discourse internals), when added to </head> customisations.

The code below covers the following situations:

  • Changes the button text when in the “support” category defined by the URL string /c/support.
  • Handles changing the button content back when switching away from the category.
  • Should handle supporting multiple languages, that may or may not be loaded.
  • Falling back on “New Topic” in the users language if translation of custom “New Question” string is not available.
  • Not causing JavaScript errors when still included in GoogleBot responses.
<script>
(function ($, Discourse, I18n) {
if ($) {
    $(function ($) {
        // Add our custom string for labelling the button in English.
        if (I18n.translations.en && I18n.translations.en.js) {
            I18n.translations.en.js.topic.create_question = 'New Question';
        }
        
        Discourse.PageTracker.current().on('change', function (url) {
            var newButtonContent = '',
                prefixContent = '<i class="fa fa-plus"></i>',
                $btn = $('#create-topic'),
                fallbackText = I18n.t('topic.create');
            if (url === '/c/support') {
                newButtonContent = prefixContent + I18n.t('topic.create_question', { defaultValue: fallbackText });
            }
            if (!newButtonContent) {
                newButtonContent = prefixContent + fallbackText;
            }
            $btn.html(newButtonContent);
        });
    });
}
})(window.jQuery, window.Discourse, window.I18n);
</script>

EDIT: note that the string appended to the prefixContent in the two cases should probably be HTML encoded before appending. But doesn’t matter for the specific example strings used in above code.


(Mittineague) #6

lol
Maybe GitHub - Mittineague/custom-text: A simple Discourse plugin


(Daler) #7

Hi, thanks for sharing. This code doesn’t seem to work due to changes in Discourse, i.e. throws:

Uncaught TypeError: Cannot read property 'current' of undefined
(for Discourse.PageTracker)

Is there a new/better way to change the text of “New Topic” button per category?