Need to customize the login challenge page in SafeLine WAF? Whether you're branding your login UI or tweaking its layout, SafeLine gives you full control using plain HTML, CSS, and JavaScript.
This guide walks you through how to personalize the authentication challenge page via the Custom HTML module in the SafeLine dashboard.
Where to Find It
Go to:
Settings > Protections > Configuration Modules > [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>
Learn More
Want to explore more about SafeLine’s advanced features like semantic detection, bot defense, or API integration?
SafeLine gives you full styling freedom—go ahead and make your login page truly yours.