[juventino199]

I have some HTML and CSS I would like to add in the comments box (on the topics page) for a user to select when they are tying a comment. I have two things that would work for me if possible (either one or the other):

1) Add in a ‘tab’ at the bottom of the comments box and then I can add in my HTML to appear there. And if this ‘tab’ can only appear when the user clicks to comment that would be great but, if not, a constant ‘tab’ that is attached to the comment section at the bottom would suffice (which moves with comment box if end user increases the size)

Or

2) Just add in my HTML to the ‘default’ comments box and fix it to a specific position without the tab on the bottom.

The HTML is a toggle slider by the way if that is a query to anyone.

Are either of these options possible? If yes, please let me know how and what file I should edit?
If you are having trouble understanding please let me know.

Thank you

[n3wjack]

What I do in this case is use client side JavaScript code to inject a new HTML element at the position you want it, with your custom code.
I put a Custom HTML widget on the page which has all the required JS & CSS code.
The advantage of this approach is that you don’t need to mess with the PHP files of your WordPress or bbPress setup, so when you do an upgrade in the future, you don’t have to worry about your changes being overwritten, or your site to break because of your changes.

I use the code below to place a Reply button on top of the page. When it’s clicked, it will scroll down to the new post form at the bottom of the page (the most recent post is on top).

<script type="text/javascript">
	// Add the reply shortcut button at the top.
	let btn = document.createElement("a");
    btn.href='javascript:document.getElementsByClassName("bbp-footer")[0].scrollIntoView()'	

	btn.innerText='Reply'
	btn.className='nj-replybtn'

	let n = document.getElementsByClassName('bbp-replies')[0];

	if (n !== null) {  
		n.parentNode.insertBefore(btn, n);
	}

</script>
<style>
	.nj-replybtn {
		color: white;
		background-color: #007acc;
		
		padding: 5px;
		margin: 2px;
	}
</style>