Skip to main content

Changing the 'Powered by' Footer

At the bottom of most CTFd installations is a footer that displays a link to https://ctfd.io/ with text "Powered by CTFd".

This text/link is not directly customizeable. However if you do wish to customize it there are two options.

  1. You can create a new theme with your specific text and link

  2. You can use the Theme Footer or Theme Header to dynamically change the footer content

The rest of this tutorial will focus on the latter option

CTFd supports a Theme Header/Theme Footer configuration which allows admins to add in custom HTML/JS/CSS to customize the look and feel of their CTFd instance.

Using the Theme Footer we can insert some JavaScript that will dynamically replace the text and link of the Footer:

<script>
  document.querySelector("footer a").innerText = "Powered by Magic Beans";
  document
    .querySelector("footer a")
    .setAttribute("href", "https://example.com");
</script>

The above snippet will change the text of the footer link to "Powered by Magic Beans" and change the link to example.com. Be sure to change these values appropriately before using them!

To remove the Footer we can use the following CSS placed in our "Theme Footer" to hide the footer content

<style>
  footer {
    visibility: hidden;
  }
</style>