How To Override Gantry5 pagination classes

[ppetree]

PHP: 8.2.11
Joomla: 4.4.0 Stable [ Pamoja ] 17-October-2023 16:00 GMT
Gantry5: 5.5.17 (gantry5 presets is not enabled)
Theme: Helium (v5.5.17 / g5_helium)

I'm trying to enable pagination/navigation between articles with the same keywords (i.e. story/blog etc). While I have the process working the visual output is LESS than desirable as all I get is: "Next >"

When I inspect the code I get:

<a class="btn btn-sm btn-secondary next" href="/blah-blah-blah" rel="next">
            <span class="visually-hidden">
                Next article: blah blah blah            </span>
            <span aria-hidden="true">Next</span> <span class="icon-chevron-right" aria-hidden="true"></span>            </a>

This can be fixed by replacing all the classes with "button" like this:

<a class="button next" href="/blah-blah-blah" rel="next">
            <span class="visually-hidden">
                Next article: blah blah blah            </span>
            <span aria-hidden="true">Next</span> <span class="icon-chevron-right" aria-hidden="true"></span>            </a>

or even remove the class "next" to kill off the chevron.

My question is this: How/Where do I make this change?
(I can't find it anywhere!)

[ppetree]

The easy answer is to go to the page settings, add a new javascript entry, paste in the following code, check the box "</body>" so you don't have to manage the onload/onready events.

var elem = document.getElementsByClassName("btn next")[0];
if (typeof elem !== 'undefined')
{
  elem.classList.remove("next");
  elem.classList.remove("btn");
  elem.classList.remove("btn-sm");
  elem.classList.add("button");
  console.log("done with next!");
}

var elem = document.getElementsByClassName("btn previous")[0];
if (typeof elem !== 'undefined')
{
  elem.classList.remove("next");
  elem.classList.remove("btn");
  elem.classList.remove("btn-sm");
  elem.classList.add("button");
  console.log("done with prev!");
}