Ooookay, this simple thing took longer to implement because the following code does not work if put in the </body>
section, but does work if put in:
Customize Edit CSS/HTML </head>
Result:
See code
<!--Show "Create" button in the Header (only for authenticated users) -->
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-buttons:after', helper => {
if (Discourse.User.current()) {
const createTopic = function() {
const Composer = require('discourse/models/composer').default;
const composerController = Discourse.__container__.lookup('controller:composer');
composerController.open({ action: Composer.CREATE_TOPIC, draftKey: Composer.DRAFT });
}
return helper.h('button#create-new', {
className: "btn fa fa-plus",
title: "Create",
onclick: createTopic
}, '' ); // ''-this is 'text' for the button, change as needed.
}
});
</script>
<style>
/* Hide the original "+ New Topic" button */
button#create-topic {
display: none;
}
/* Larger "Create" button on Desktop */
button#create-new {
font-size: x-large;
height: 39px;
width: 39px;
padding: 0;
color: white;
border-radius: 50px;
border: 3px solid white;
}
button#create-new:hover {
border: none;
}
/* Smaller "Create" button on Mobile */
html.mobile-view.mobile-device button#create-new {
height: 32px;
width: 32px;
margin: 3px;
}
</style>
If someone has a better way, please let me know! Otherwise, style as you wish and enjoy