How to Personalize Your SafeLine Auth Challenge Page

Tired of the Default SafeLine Login Page?

If you're looking to add your personal touch to the SafeLine WAF login challenge page, you're in the right place! With just some HTML, CSS, and JavaScript, you can fully customize the look and feel of your login UI. Let’s dive into how you can tweak the layout and branding to make the login page truly yours.

Where to Find It

Go to:

Settings > Protections > Blocking Pages > \[Custom HTML]

Just like in a standard HTML page, you can add both <style> and <script> tags together—this means you can adjust the center section's appearance with CSS.

Example

Copy the sample code at the end of the article into the Custom HTML field.

Result

Here’s what your customized login page could look like:

Sample Code

<script>
  console.log('Im a console.log, which is written in a script tag');
</script>
<style type="text/css">
  body {
    background: #395180;
    margin: 0;
  }
  body #slg-box {
    background-color: grey;
    width: 400px;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    padding: 100px 20px;
  }
  body #slg-usergroup-username,
  body #slg-usergroup-password {
    background-color: grey;
    color: #fff;
  }
  body #slg-box-title {
    color: #e15ccf;
  }
  body #slg-usergroup-btn {
    color: grey !important;
  }
  body #slg-with-more-title div:nth-child(2) {
    background-color: transparent;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid;
  }
  body #slg-with-more-title div:nth-child(1) {
    display: none;
  }
  body #slg-tabs > div {
    fill: green;
  }
  body #slg-usergroup-container input {
    border-style: dashed;
  }
</style>

<div
  style="
    background-color: grey;
    width: 200px;
    height: 100px;
    text-align: right;
    top: 50%;
    position: relative;
    left: calc(50% + 200px);
    transform: translate(-50%,-50%);
    border-radius: 10px;
    font-size: 30px;
    line-height: 100px;
    text-align: center;
  "
>
  hello world
</div>

Why Customize Your SafeLine Login Challenge Page?

Customizing your SafeLine login challenge page isn’t just about looks—it's about adding security and improving user experience:

• Brand Consistency: Make sure the login page matches your website’s theme and branding.
• User Experience: Customize the layout to create a smoother authentication process for your users.
• Security: Adding extra layers of styling or JavaScript can help further obfuscate and protect the page from attacks.

Learn More

Want to explore more about SafeLine’s advanced features like semantic detection, bot defense, or API integration?

• GitHub Repository
• Official Docs
• Discord Community

SafeLine gives you full styling freedom—go ahead and make your login page truly yours.