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

techAPJ · February 2, 2016, 8:28pm

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 · February 2, 2016, 9:07pm

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 · February 2, 2016, 9:30pm

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

rewphus · February 2, 2016, 9:31pm

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 · February 24, 2016, 5:39pm

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 · March 8, 2016, 4:53pm

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

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.
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 · May 16, 2016, 9:38pm

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 · June 18, 2016, 1:43am

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

dax · July 12, 2016, 5:11pm

This script still works with the new header?

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

Pad_Pors · July 13, 2016, 3:56am

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 · July 17, 2016, 2:01pm

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

tophee · May 26, 2017, 9:55am

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 · May 26, 2017, 2:39pm

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!

8BIT · October 19, 2017, 11:54pm

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

Thanks!

codinghorror · October 19, 2017, 11:56pm

@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 · October 20, 2017, 12:09am

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 · October 20, 2017, 2:16am

It’s all on Github:

codinghorror · October 20, 2017, 2:21am

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

jomaxro · October 20, 2017, 2:22am

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

Edit: I was beaten to it thanks @Trash!

dax · October 20, 2017, 9:34am

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

Topic		Replies	Views
New Topic Header Button Theme component official , new-topic-header-button	30	14194	October 29, 2024
Customize new topic button text Theme component official , topic-button-text	21	3010	May 8, 2024
Designer's Guide to getting started with themes in Discourse Developer Guides tutorial , theme-guides	9	10537	April 8, 2024
Fakebook Theme Theme official , fakebook-theme	136	29889	May 4, 2023
Create a new topic button with category and topic template Administrators how-to	13	7803	September 3, 2021

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

Related topics