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

[techAPJ (Arpit Jalan)]

This feature is now available as a dedicated theme component.

Want to add “+ New Topic” button on every page? Follow these steps:

• Paste this Javascript code in Admin Customize CSS/HTML </body> section:

<script>
  var ApplicationRoute = require('discourse/routes/application').default;    
  ApplicationRoute.reopen({
    actions: {
      createTopic: function() {
          var Composer = require('discourse/models/composer').default;
          composerController = Discourse.__container__.lookup('controller:composer');
          composerController.open({ action: Composer.CREATE_TOPIC, draftKey: Composer.DRAFT });
      },
    }
  });
</script>
  
<script type='text/x-handlebars' data-template-name='/connectors/header-after-home-logo/create-new-topic'>
  {{#if currentUser}}
    {{d-button  id="create-topic"
                  class="btn-default"
                  action="createTopic"
                  icon="plus"
                  label="topic.create"
                  disabled=cannotCreateTopicOnCategory}}
  {{/if}}
</script>

• Paste this CSS code in Admin Customize CSS/HTML CSS section:

.create-new-topic {
    float: right;
    padding: 5px 0px 0px 5px;
}

Customize the button styling even further as per your requirement.

• Voilà

Now logged in user will be able to access “+ New Topic” button on every page.

[codinghorror (Jeff Atwood)]

Does this work on mobile? Or at least is it suppressed on mobile via CSS … doubt there is any room for that button on mobile.

Also it might be good to show a “floating” new topic button at the lower right, ala this:

I believe @rewphus did this in his design?

[featheredtoast (Jeff Wong)]

There exists a floating new topic button implementation in the dark materials design, complete with mobile implementation.

[rewphus]

I did, but my way was very hacky, so I wouldn’t take it at face value:

CSS was this:

.list-controls #create-topic.btn-default .fa-plus:before {
  content: "\f067";
  position: relative;
  right: -12.85em;
}

.list-controls .btn-default[title="New Topic"] {
    padding: 22px 15px 22px 5px !important;
}
    

#create-topic.btn-default {
  border-radius: 40px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 999;
  padding: 22px 20px 22px 5px;
  background-color: #2196f3;
  color: white;
  text-indent: -157px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    overflow:hidden;
}

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

And this is mobile:

The plus sign should really be larger, but I am just using the default font. You should be able to easily adjust that if you want.

[Pad_Pors]

any idea how one can merge the two:

currently the second code only works for the main page, and doesn’t show +new topic everywhere.

when I keep the body section of @techAPJ plus the css section of @rewphus, it works with two +new topic in the bottom and top of the main page, and one the top of the page elsewhere.

it does work only for the main page and not the internal pages. any clue?

[Pad_Pors]

just sharing my solution for a hypothetical other newbie one like me:

I wanted to have the “+ new topic” everywhere in the circle.plus style (to merge the two options above):

1. I used @techAPJ codes, and changed the handler name from after-logo to before-notification:
   <script type='text/x-handlebars' data-template-name='/connectors/header-before-notifications/create-new-topic'>
   This step was only needed because I’m using a discourse with rtl-direction.

2. I used the same style as Dark Material Design , but with a different naming of the style so that I remove the duplicate:
   I named the button as ember-view.btn and turn off the default btn:

#create-topic.btn-default{display:none;}

#create-topic.ember-view.btn-default{display:block;}

the only current problem at the moment is the mobile preview which may not have enough space in the top menu as a result of lots of icons! I’ll find a solution for this later.
but now we have a plus icon next to the user name:

[tobiaseigen]

I this! 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.

[pauln (Paul Nate)]

How to keep “New Topic” in the old place and add this flooding “New Topic” as well?

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

@tobiaseigen

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

Summary Material Design has been created to be easily customizable. Preview Preview on theme-creator.discourse.org Repository Link https://github.com/discourse/material-design-stock-theme New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme 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 us…

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