(Superseded) Add a "+ New Topic" button on every page

[dalerka (Daler)]

This solution doesn’t seem to work. I see no “+ New Topic” button as described in the first post.
@techAPJ could you please update this to work with the current Discourse version?

I also considered Adding header links post vdom upgrade to call the /new-topc API, but that will trigger loading a new page, instead of just loading the Composer.

[dalerka (Daler)]

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

[bekircem]

@rewphus

#create-topic.btn-default{
width: 63px;
height: 63px;
color: #2196F3; //your color of choice
-webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus{
color: white;
}

#create-topic.btn-default:hover{
text-indent: 0px;
width: 190px;
color: white;
}

Excellent! How can we show it on the topic page too?

Edit: On the mobile view, fa-plus symbol not centered on the in the circle.

[PaulSTC (Paul)]

The code kindly provided by @dalerka worked for me and I could also modify it to place a custom text-button to the right of the avatar like the original post

See code - all placed in 'head' section

<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#newcase', {
                className: "btn btn-text btn-primary create ember-view",
                title: "Add Case",
                onclick: createTopic,}, 'Add Case'  // ''-this is 'text' for the button, change as needed.
            );  
        }
    });
</script>
<style>
    button#newcase {
    float: right;
    max-width:none; /*remove max width*/
    width: auto; /*prevent other widths taking over*/
    height: auto;
    z-index: 1040; /*stays on top of other header*/
    position:relative;
    display:block;
    margin: 6px 9px;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    transition: all .25s;
}
    }
</style>

Gives you:

[Anil_Gupta]

Thanks @dalerka , the topic creation code works for us too.
I have not seen any delay in popping up of writing dialog as reported by other user. It works fine in our testing.

[dakotahnorth]

Thanks for the code! Modified it slightly so that the plus button has the same style as the other buttons.

There must be a better way for me to have done this with classes, but after struggling with it for some time, I broke down and just added the properties directly.

Below are the results …

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 {
        margin-top:2px;
        font-size: large;
        height: 38px;
        width: 38px;
        line-height: 40PX;
        padding: 0;
        color: rgb(153, 153, 153);
        opacity: 0.699999988079071;
        background-color: transparent;
    }
    button#create-new:hover {
        
        color: rgb(40, 40, 40);    
        background-color: rgb(233,233,233);
        
    }
    
    /* Smaller "Create" button on Mobile */
    html.mobile-view.mobile-device button#create-new {
        height: 32px;
        width: 32px;
        margin: 3px;
    }
</style>

[erlend_sh (Erlend Sogge Heggen)]

Now maintained as a proper theme component:

(+ New topic) button in the header on all pages

A simple theme component to add the + New Topic button to the header. The button will show on every page - even inside topics. Screenshots: Desktop: [Capture] Mobile: [Capture2] Settings: This component has settings where you can choose the button icon, button text, button title, and whether or not to hide the default “New topic” button. You can also customize the text for when the button is disabled (if someone doesn’t have permission to post in a certain category or tag) [image] …