# Floating "New topic" button
**URL:** https://meta.discourse.org/t/floating-new-topic-button/103695
**Category:** Support
**Created:** [December 7, 2018, 12:19pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695 "2018-12-07T12:19:19Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:19pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/1 "2018-12-07T12:19:19Z")
Hi, im completely newbie here. how can i make “New Topic” button in floating?
example
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 12:33pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/2 "2018-12-07T12:33:59Z")
That appears to be based on the floating button from [Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142)
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:34pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/3 "2018-12-07T12:34:46Z")
can u please say which theme i have to use?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 12:37pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/4 "2018-12-07T12:37:19Z")
I can do better than that … I believe this is the CSS (UPDATED):
```plaintext
@mixin buttonShadow {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
@mixin buttonTransition {
transition: right 0.5s, bottom 0.5s, border-radius 0.5s, text-indent 0.2s,
visibility 1s, width 0.2s ease, height 0.5s ease 0.4s, color 0.5s,
background-color 2s, transform 0.5s;
}
//New Topic Fab
#create-topic.btn-default {
display: flex;
align-items: center;
justify-content: center;
@include buttonShadow;
@include buttonTransition;
padding: 0;
margin: 0;
width: 63px;
height: 63px;
border-radius: 40px;
position: fixed;
bottom: 30px;
right: 50px;
z-index: 999;
background-color: var(--tertiary);
color: var(--secondary);
white-space: nowrap;
overflow: hidden;
.d-icon {
margin: 0;
}
.d-button-label {
display: inline-block;
transition: all 0.3s;
margin: 0 0.25em;
}
&:not(:hover):not(:active):not(:focus) {
.d-button-label {
opacity: 0;
width: 0;
margin: 0;
}
.d-icon {
margin: 0 0.25em;
}
}
}
#create-topic.btn-default .fa-plus {
color: var(--secondary);
}
#create-topic.btn-default:hover {
width: 190px;
}
```
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:38pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/5 "2018-12-07T12:38:19Z")
where do i add this? i might be annoying but im new here 😐
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 12:39pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/6 "2018-12-07T12:39:59Z")
Added a link to the Theme above.
You need to go to Admin-\> Customise-\> Themes
If adding just the CSS for the button create a Theme Component and edit the CSS for Desktop.
Add the component to an existing Theme.
[Beginners guide to Themes here.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)
[Full developers guide here](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)
If all this is just too complex or long winded, just add the Theme I linked above following the Beginners guide 🙂
(PS just fixed the CSS above which was missing some dependencies)
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:47pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/7 "2018-12-07T12:47:27Z")
Thank you very much sir, now how to make card view like i show in the screenshot?
---
### Author:  [@anon48433008](https://meta.discourse.org/u/anon48433008)
#### Post date: [December 7, 2018, 12:47pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/8 "2018-12-07T12:47:35Z")
I didnt realize the little red ball was the new topic and had to add the code to see
here’s what I had to change
original
modified
Thanks for posting I’ll be playing around with this a bit 😉
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 12:48pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/9 "2018-12-07T12:48:56Z")
I changed the CSS after shooting from the hip, try it now 🙂
You guys are just too quick! 😉
(the error is correctly identifying the missing code!)
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:51pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/10 "2018-12-07T12:51:02Z")
it worked. just need this more
> [@David\_Ningthoujam](#):
>
> Thank you very much sir, now how to make card view like i show in the screenshot?
---
### Author:  [@anon48433008](https://meta.discourse.org/u/anon48433008)
#### Post date: [December 7, 2018, 12:52pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/11 "2018-12-07T12:52:34Z")
Updated worked without changing 👍
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 12:53pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/12 "2018-12-07T12:53:21Z")
That I will leave for your research, there’s a lot of nice CSS there 🙂
You can look around _meta_ for aspects of those changes, you may find a lot of snippets.
You might like to ask the site owner.
I will note that the admin has set this as the setting:
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:54pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/13 "2018-12-07T12:54:48Z")
same setting. but mine look different
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 12:56pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/14 "2018-12-07T12:56:35Z")
Go through those two guides I link above and search around _meta_.
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 12:57pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/15 "2018-12-07T12:57:38Z")
> [@merefield](#):
>
> That appears to be based on the floating button from [Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142)
i have to pull like i do for plugins?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 1:00pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/16 "2018-12-07T13:00:47Z")
All explained in the guides ⬆
e.g. [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#heading--2-4)
---
### Author:  [@anon48433008](https://meta.discourse.org/u/anon48433008)
#### Post date: [December 7, 2018, 1:01pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/17 "2018-12-07T13:01:14Z")
_Snuck in a minute_
working to make it an image
---
### Author:  [@David\_Ningthoujam](https://meta.discourse.org/u/David_Ningthoujam)
#### Post date: [December 7, 2018, 1:16pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/19 "2018-12-07T13:16:06Z")
theme applied but i still didn’t get card view style
Edit: i reload the page in new tap and solved 😶
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 7, 2018, 1:17pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/20 "2018-12-07T13:17:55Z")
That’s because it’s a mashup. The Theme in your picture is not identical but I suspect shares the same button code.
You can right click any element and use “Inspect Element” in the browser and it should bring up the developer tools which should give you good insight into the CSS.
---
### Author:  [@anon48433008](https://meta.discourse.org/u/anon48433008)
#### Post date: [December 7, 2018, 6:56pm UTC](https://meta.discourse.org/t/floating-new-topic-button/103695/21 "2018-12-07T18:56:40Z")
Thank you Discourse for hosting the open source forum form me to learn,
I was simply taking a minute to check new threads and found out I needed a new, new topic button
😁
edit:
too much fun
[Next page](https://meta.discourse.org/t/floating-new-topic-button/103695.md?page=2)