How can I change the text for the 'Like' button?

portals

Hi,

I'd like to change the appearing text for the Like button for a comment/thread before the user clicks 'Like' (the button next to Reply and '...'). I'd like to change it to something arbitrary such as 'This is cool'.

I changed the 'flarum/vendor/flarum/lang-english/locale/flarum-likes.yml' text for these and it didn't seem to change anything. Granted I only have 1 language, English, and no multilanguage enabled, maybe that's why it wasn't looked for here.

Which file has the text I should change?

Thanks

[deleted]

portals have a look at this https://discuss.flarum.org/d/7026-linguist-customize-translations-with-ease

Pollux

portals

You may try a CSS-only solution:

li.item-like .Button-label::before {
    content: "This is cool";
}
li.item-like .Button-label {
    width: 5.3em;
    display: inline-block;
    overflow: hidden;
}

Add this code in the admin panel: section Appearance > Custom CSS.

portals

[deleted]

Thank you. Isn't this solveable without an extension though? Appreciate the link

[deleted]

portals no, because if you modify any core files then those changes will be overwritten by any upgrade. You'll have much more granular control taking the extension route.

portals

[deleted]
Just read your post. Thank you, I will try that out then.
Edit: This works very well and is comprehensive for all tenses of the Like button. Highly recommended.

clarkwinkelmann

You could manually register new translation files from extend.php. But it probably won't be as easy or practical as the Linguist extension.

If you change translations outside of Flarum, the cache needs to be cleared. But as phenomlab said you shouldn't edit any file under vendor anyway.

portals

Pollux
Thank you. This works. It does however also change the appearance of the equivalent Unlike button to the same appearance as the Like button.

Pollux

portals This works. It does however also change the appearance of the equivalent Unlike button to the same appearance as the Like button.

You are right, you need to be more specific:

li.item-like button[title="Like"] .Button-label::before {
    content: "This is cool";
}
li.item-like button[title="Unlike"] .Button-label::before {
    content: "This is not so cool";
}
li.item-like button[title="Like"] .Button-label {
    width: 5.3em;
    display: inline-block;
    overflow: hidden;
}
li.item-like button[title="Unlike"] .Button-label {
    width: 8.5em;
    display: inline-block;
    overflow: hidden;
}

That said, this is just an exercise in using CSS. Using Linguist or providing your own localisation via extend.php is definitely the way to go. Working with CSS for .Button-label::before is a versatily way though if you want to add some FontAwesome niceties.