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

**URL:** https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922
**Category:** Site Management
**Tags:** how-to
**Created:** [2월 2, 2016, 8:28오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922 "2016-02-02T20:28:28Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2월 2, 2016, 8:28오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/1 "2016-02-02T20:28:29Z")

</div>

> 📣 This feature is now available as a [dedicated theme component](https://meta.discourse.org/t/new-topic-button-on-all-pages/84551).

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

- Paste this Javascript code in _Admin_ ➡ _Customize_ ➡ _CSS/HTML_ ➡ `</body>` section:

```js
<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>

```

 ![](https://global.discourse-cdn.com/meta/original/3X/f/d/fdef2e08a4e4b321cc4f032193b5da5e5c215715.png)

- Paste this CSS code in _Admin_ ➡ _Customize_ ➡ _CSS/HTML_ ➡ `CSS` section:

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

```

 ![](https://global.discourse-cdn.com/meta/original/3X/6/5/658d5cd471d15f55706ca5ca8f1d6c2d5782b4e2.png)

Customize the button styling even further as per your requirement.

- Voilà 🎉

 ![](https://global.discourse-cdn.com/meta/original/3X/d/8/d85e78bc3caf8535f51b7ed01ccbd2a09ff0e8a8.png)

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2월 2, 2016, 9:07오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/2 "2016-02-02T21:07:05Z")

</div>

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:

 ![](https://global.discourse-cdn.com/meta/original/3X/a/f/afa1e7efa4c2faf809a15210859a7ef10735aa3f.png)

I believe @rewphus did this in his design?

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [2월 2, 2016, 9:30오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/3 "2016-02-02T21:30:05Z")

</div>

There exists a floating new topic button implementation in the [dark materials design](https://meta.discourse.org/t/dark-material-design/36531), complete with mobile implementation.

---

<div class="post-metadata">

### Author: ![rewphus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rewphus/32/115836_2.png) [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [2월 2, 2016, 9:31오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/4 "2016-02-02T21:31:48Z")

</div>

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

![Screen%20Recording%202016-02-02%20at%2003.25%20PM](https://global.discourse-cdn.com/meta/original/4X/8/2/9/8296c56f7e74d5ad003fc77550cea1fea5f6b6a8.gif)  
CSS was this:

```plaintext
.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:

 ![](https://global.discourse-cdn.com/meta/original/3X/b/5/b5fe96da0f31bff8774473f99540096eeca02458.png)

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.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2월 24, 2016, 5:39오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/5 "2016-02-24T17:39:44Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [3월 8, 2016, 4:53오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/6 "2016-03-08T16:53:39Z")

</div>

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 [(Superseded) Dark Material Design](https://meta.discourse.org/t/dark-material-design/36531) , 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:

```plaintext
#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:  
 ![](https://global.discourse-cdn.com/meta/original/3X/5/1/51c90a982b00d2104b8a96a9dc0e84736d8ee891.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/6/8/6893cb2149e6defe3835a4f977349815d66a483d.png)

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [5월 16, 2016, 9:38오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/7 "2016-05-16T21:38:25Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![pauln](https://avatars.discourse-cdn.com/v4/letter/p/c0e974/32.png) [@pauln](https://meta.discourse.org/u/pauln)
#### Post date: [6월 18, 2016, 1:43오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/8 "2016-06-18T01:43:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [7월 12, 2016, 5:11오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/9 "2016-07-12T17:11:46Z")

</div>

This script still works with the new header?

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

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [7월 13, 2016, 3:56오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/10 "2016-07-13T03:56:52Z")

</div>

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

I didn’t look for other solutions!

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [7월 17, 2016, 2:01오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/11 "2016-07-17T14:01:33Z")

</div>

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

> [@Adding header links post vdom upgrade](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/3):
>
> 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…

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [5월 26, 2017, 9:55오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/12 "2017-05-26T09:55:55Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [5월 26, 2017, 2:39오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/13 "2017-05-26T14:39:40Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![8BIT](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/8bit/32/76872_2.png) [@8BIT](https://meta.discourse.org/u/8BIT)
#### Post date: [10월 19, 2017, 11:54오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/14 "2017-10-19T23:54:15Z")

</div>

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

Thanks!

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 19, 2017, 11:56오후 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/15 "2017-10-19T23:56:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![8BIT](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/8bit/32/76872_2.png) [@8BIT](https://meta.discourse.org/u/8BIT)
#### Post date: [10월 20, 2017, 12:09오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/16 "2017-10-20T00:09:58Z")

</div>

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

 ![27 PM](https://global.discourse-cdn.com/meta/original/3X/f/5/f596326758e65b3cc55e5dd08ee2fb71a8437188.png)

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

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [10월 20, 2017, 2:16오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/17 "2017-10-20T02:16:04Z")

</div>

It’s all on Github:

> [@Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142):
>
> discourse2Summary Material Design has been created to be easily customizable.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/material-design-theme)hammer_and_wrenchRepository Link [https://github.com/discourse/material-design-stock-theme](https://github.com/discourse/material-design-stock-theme)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme Features Color Options

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 20, 2017, 2:21오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/18 "2017-10-20T02:21:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [10월 20, 2017, 2:22오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/19 "2017-10-20T02:22:26Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [10월 20, 2017, 9:34오전 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/20 "2017-10-20T09:34:20Z")

</div>

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

```

[다음 페이지](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922.md?page=2)