Hi, im completely newbie here. how can i make “New Topic” button in floating? example [image]

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

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. Full developers guide here If all this is just too complex or long winded, just add the Theme I linked above following the Beginners guide :slight_smile: (PS just fixed the CSS above which was missing some dependencies)

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 [image] modified [image] Thanks for posting I’ll be playing around with this a bit :wink:

I changed the CSS after shooting from the hip, try it now :slight_smile: You guys are just too quick! :wink: (the error is correctly identifying the missing code!)

it worked. just need this more [image] David_Ningthoujam: Thank you very much sir, now how to make card view like i show in the screenshot?

Updated worked without changing :+1:

Floating "New topic" button

Product Support

David_Ningthoujam (David Ningthoujam) December 7, 2018, 12:47pm 7

Thank you very much sir, now how to make card view like i show in the screenshot?

Topic		Replies	Views
How is this new topic button achieved? Product Support	4	1514	October 30, 2020
Fixed create topic/reply button in mobile? Product Support mobile	2	689	November 3, 2023
Floating "Reply" button for each topic Product Support	2	1198	June 13, 2020
New Topic Header Button Theme component official , new-topic-header-button	43	17201	February 15, 2026
Make "New Topic" button more prominent UX	9	2022	July 23, 2021

Floating "New topic" button

Related topics