Adding "+ New Topic" button on every page

This script still works with the new header?

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

1 Like

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

I didn’t look for other solutions!

2 Likes

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

2 Likes

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?

2 Likes

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 combined new topic / message button would be very useful to us as well!

1 Like

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

Thanks!

@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.

3 Likes

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!

1 Like

It’s all on Github:

3 Likes

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

2 Likes

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

Edit: I was beaten to it :wink: thanks @Trash!

5 Likes

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;
}
7 Likes

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.

1 Like

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 :arrow_right: Edit CSS/HTML :arrow_right: </head>

Result:
Create_button

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 :wink:

7 Likes

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.

1 Like

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:

button

10 Likes

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.

2 Likes

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 …

37%20PM

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>
11 Likes

Now maintained as a proper theme component:

12 Likes