• Home
  • Categories
  • Recent
  • Popular
  • Pricing
  • Contact us
  • Docs
  • Login
FusionAuth
  • Home
  • Categories
  • Recent
  • Popular
  • Pricing
  • Contact us
  • Docs
  • Login

How can I remove all CSS from the FusionAuth hosted login pages?

Scheduled Pinned Locked Moved Solved
Q&A
theme css
1
2
7.3k
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D
    dan
    last edited by 2 Oct 2024, 22:07

    Is there a way to strip the default CSS from the FusionAuth hosted login pages, leaving essentially just bare-bones HTML?

    --
    FusionAuth - Auth for devs, built by devs.
    https://fusionauth.io

    D 1 Reply Last reply 2 Oct 2024, 22:10 Reply Quote 0
    • D
      dan @dan
      last edited by dan 10 Mar 2024, 12:45 2 Oct 2024, 22:10

      I was able to do this by:

      • copying the advanced theme
      • editing it
      • navigating to the Helpers file
      • inside that, going to the head freemarker macro

      I removed these lines:

        <link rel="stylesheet" href="/css/font-awesome-4.7.0.min.css"/>
        <link rel="stylesheet" href="/css/fusionauth-style.css?version=${version}"/>
      
        [#-- Theme Stylesheet, only Authorize defines this boolean.
             Using the ?no_esc on the stylesheet to allow selectors that contain a > symbols.
             Once insde of a style tag we are safe and the stylesheet is validated not to contain an end style tag --]
        [#if !(bypassTheme!false)]
          <style>
          ${theme.stylesheet()?no_esc}
          </style>
        [/#if]
      

      If you want to use the CSS field in the theme to store your CSs, leave in

      [#if !(bypassTheme!false)]
          <style>
          ${theme.stylesheet()?no_esc}
          </style>
      [/#if]
      

      which pulls in the CSS associated with the theme. Doing so allows you to add all your custom CSS to the CSS field in the theme and have it automatically included. If you don't do this, make sure you add your CSS to this macro (either directly or via a link). You'll want to make sure you keep it in as you upgrade.

      Removing all the CSS will result in a page that looks like the one below.

      unstyled login page

      --
      FusionAuth - Auth for devs, built by devs.
      https://fusionauth.io

      1 Reply Last reply Reply Quote 0
      • D dan has marked this topic as solved on 2 Oct 2024, 22:10
      1 out of 2
      • First post
        1/2
        Last post