Adding "+ New Topic" button on every page

[Dax (Daniela)]

This script still works with the new header?

I’m trying but it doesn’t seem to work.

[Pad_Pors]

no, the “next-to-avatar” one stopped working after header changes, but the rewphus scenario still works.

I didn’t look for other solutions!

[Pad_Pors]

for putting +new topic, the new header this topic may be handful:

Adding header links post vdom upgrade

Ah, well this worked: <script type="text/discourse-plugin" version="0.2"> api.decorateWidget('header:after', helper => { const showExtraInfo = helper.attrs.topic; if(!showExtraInfo) { return helper.h('div#header-links', [ helper.h('a#recruiter', { href:'https://sih.onemadogre.com/t/joining-sih/494', text:'Join Us!' }), helper.h('a#about', { href:'https://sih.onema…

[tophee (Christoph)]

From what I can tell, this how-to is outdated and so far I have not been able to figure out how to make the instructions in the OP to work with the current version of discourse.

Also the solution by @rewphus doesn’t produce a “New topic” button on every page but only replaces the default one with the floating one on those pages that already have one (like the Material Design Theme).

What is currently the best way to add a “New Topic” button on every page?

[alehandrof (Alex Armstrong)]

Oh, this is a really interesting topic. As I [mentioned elsewhere], I’m interested in making it more obvious to members how they can create new topics.

I like @tobiaseigen’s idea above:

A member in my community just lamented that he could not immediately find the new topic and new message links on the site. It would be interesting to have this orange + button above expand to offer new topic and new message links.

A combined new topic / message button would be very useful to us as well!

[8BIT]

Is it possible to get the updated CSS that this forum uses @codinghorror?

Thanks!

[codinghorror (Jeff Atwood)]

@techapj can you add this to your list for later next week? It would be nice to have a modern working example in this topic.

[8BIT]

that would be absolutely fantastic. I love the implementations done here. even this one too:

Is there a master list of the customizations that you all have done to your implementation here? that would be epic!

[jomaxro (Joshua Rosenfeld)]

It’s all on Github:

Material Design Stock Theme

To get this theme, pull it from github.com/discourse/material-design-stock-theme Preview: Discourse Theme Creator I would appreciate any input you have, but just remember the intention is for this to be a stock theme, while making it simple enough for any user to easily customize. Topic List [image] Posts [image] Categories [image] Search [image] Colors Indigo/Orange [image] Red/Blue [image] Teal/Amber [image] Dark [image] Install guide How to i…

[codinghorror (Jeff Atwood)]

Right but just that customization should be here in usable form.

[jomaxro (Joshua Rosenfeld)]

I can extract it and share tomorrow if someone doesn’t beat me to it.

Edit: I was beaten to it thanks @Trash!

[Dax (Daniela)]

For the new reply fab (only when you are in a topic):

//Reply Fab
.timeline-footer-controls {
    position: relative;
}
.widget-button.btn.create, .docked.navigation-categories.categories-list #create-topic .widget-button.btn.create {
    border-radius: 40px;
    position: absolute;
    top: 50px;
    left: -18px;
    z-index: 999;
    padding: 24px 20px 22px 5px;
    background-color: $tertiary;
    color: white;
    text-indent: 10px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    overflow: hidden;
    width: 63px;
    height: 63px;
    -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;
}

//Center and increase size of reply icon
.widget-button.btn.create .fa-reply, .docked.navigation-categories.categories-list #create-topic .widget-button.btn.create .fa-reply {
    color: white;
    font-size: 20px;
    margin-left: -8px;
}


//Proper spacing for iPad portrait
@media only screen 
and (min-width : 768px)
and (max-width: 1250px)
{
    .timeline-container {
        margin-left: 820px;
    }
    .topic-admin-popup-menu{
        left:-40% !important;
        
    }

}
//Properly space notifications button
.widget-button.btn.notifications-dropdown{
    right: 4px;
    position: relative;
    border-radius: 40px;
    width: 30px;
    padding: 6px;
}

Add this if you want to change + New Topic to a fab also on the homepage:

//New Topic Fab
#create-topic.btn-default, .docked.navigation-categories.categories-list #create-topic {
    border-radius: 40px;
    position: fixed;
    bottom: 30px;
    right: 50px;
    z-index: 999;
    padding: 24px 20px 22px 5px;
    background-color: $tertiary; 
    color: $tertiary; 
    white-space: nowrap;
    text-indent: 10px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
    overflow: hidden;
    width: 63px;
    height: 63px;
    -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, .docked.navigation-categories.categories-list #create-topic .fa-plus {
    color: white;
}

#create-topic.btn-default:hover, .docked.navigation-categories.categories-list #create-topic:hover {
    text-indent: 8px;
    width: 190px;
    color: white;
}

[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 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 3 settings where you can choose the button icon, the button text, and whether or not to hide the default “New topic” button: [Capture3] Credit This is based on @techAPJ’s tutorial here: And on @dalerka’s patch to make things work with newer versions of Discourse here: I on…