Hi, im completely newbie here. how can i make “New Topic” button in floating?
example
AI-generated summary
In a Support topic titled “Floating ‘New topic’ button,” user David_Ningthoujam asks how to implement a floating “New Topic” button similar to one shown in a screenshot. merefield identifies it as inspired by the Material Design Theme and provides custom CSS to achieve the effect posted here. David_Ningthoujam asks where to add the code; merefield directs him to Admin > Customise > Themes, suggesting using a Theme Component or installing the full Material Design Theme, with links to beginner and developer guides. After some CSS tweaks posted here, users confirm it works. David_Ningthoujam then asks how to replicate the “card view” shown in his screenshot; merefield suggests inspecting elements via browser dev tools or searching Meta for CSS snippets, noting the example uses “box” format shown here. Later, ElForoViajero asks how to make the floating button work on mobile alongside the regular button and allow non-logged users to trigger sign-up — a question left open as of post 27. Other users, like anon48433008, share their experiences tweaking and animating the button, with visual examples provided. The thread ends with community members exploring and enjoying the customization possibilities.
That appears to be based on the floating button from Material Design Theme
can u please say which theme i have to use?
I can do better than that … I believe this is the CSS (UPDATED):
@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;
}
where do i add this? i might be annoying but im new here 
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.
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)
Thank you very much sir, now how to make card view like i show in the screenshot?
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!)
it worked. just need this more
Updated worked without changing 
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:
Go through those two guides I link above and search around meta.
i have to pull like i do for plugins?
All explained in the guides 
theme applied but i still didn’t get card view style
Edit: i reload the page in new tap and solved 
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.
