如何防止登录框在修改后的 JupyterHub 中包含背景图片?
How can I prevent login box from including background image in modified JupyterHub?
我已经部署了JupyterHub,正在修改外观。我修改了登录模板 (login.html) 以显示背景图像。问题是登录框本身包含背景图像。
看起来像这样:
登录模板代码开始:
{% extends "page.html" %}
{% block login_widget %}
{% endblock %}
{% block main %}
{% block login %}
<div id="login-main" class="container">
{% if custom_html %}
{{ custom_html | safe }}
{% elif login_service %}
<div class="service-login">
<a role="button" class='btn btn-jupyter btn-lg' href='{{authenticator_login_url}}'>
Sign in with {{login_service}}
</a>
</div>
{% else %}
我插入了以下 6 行:
<style>
body {
background-image: url("static/images/login_back.jpg");
background-color: #cccccc;
}
</style>
原始模板继续(比此处包含的内容长得多):
<form action="{{login_url}}?next={{next}}" method="post" role="form">
<div class="auth-form-header">
iamdodge
</div>
<div class='auth-form-body'>
<p id='insecure-login-warning' class='hidden'>
Warning: JupyterHub seems to be served over an unsecured HTTP connection.
We strongly recommend enabling HTTPS for JupyterHub.
</p>
想要的结果:
同样,我想要的结果是登录框本身不包含背景图像。理想情况下,它将是纯色。正如您可能猜到的那样,目的是修改登录框的颜色以匹配背景,但这部分我可以处理。
感谢您的任何建议。我很乐意根据需要编辑我的问题以使其清晰。
做:
给表单主要(auth-form-body
我认为)区域一个背景颜色,应该这样做。
因为在你的图片上可以看到 header background-color
覆盖了背景图像,所以你缺少向 .auth-from-body
添加背景颜色。
代码:
.auth-form-body {
background-color: red;
}
<div class='auth-form-body'>
<p id='insecure-login-warning' class='hidden'>
Warning: JupyterHub seems to be served over an unsecured HTTP connection.
We strongly recommend enabling HTTPS for JupyterHub.
</p>
</div>
我已经部署了JupyterHub,正在修改外观。我修改了登录模板 (login.html) 以显示背景图像。问题是登录框本身包含背景图像。
看起来像这样:
登录模板代码开始:
{% extends "page.html" %}
{% block login_widget %}
{% endblock %}
{% block main %}
{% block login %}
<div id="login-main" class="container">
{% if custom_html %}
{{ custom_html | safe }}
{% elif login_service %}
<div class="service-login">
<a role="button" class='btn btn-jupyter btn-lg' href='{{authenticator_login_url}}'>
Sign in with {{login_service}}
</a>
</div>
{% else %}
我插入了以下 6 行:
<style>
body {
background-image: url("static/images/login_back.jpg");
background-color: #cccccc;
}
</style>
原始模板继续(比此处包含的内容长得多):
<form action="{{login_url}}?next={{next}}" method="post" role="form">
<div class="auth-form-header">
iamdodge
</div>
<div class='auth-form-body'>
<p id='insecure-login-warning' class='hidden'>
Warning: JupyterHub seems to be served over an unsecured HTTP connection.
We strongly recommend enabling HTTPS for JupyterHub.
</p>
想要的结果:
同样,我想要的结果是登录框本身不包含背景图像。理想情况下,它将是纯色。正如您可能猜到的那样,目的是修改登录框的颜色以匹配背景,但这部分我可以处理。
感谢您的任何建议。我很乐意根据需要编辑我的问题以使其清晰。
做:
给表单主要(auth-form-body
我认为)区域一个背景颜色,应该这样做。
因为在你的图片上可以看到 header background-color
覆盖了背景图像,所以你缺少向 .auth-from-body
添加背景颜色。
代码:
.auth-form-body {
background-color: red;
}
<div class='auth-form-body'>
<p id='insecure-login-warning' class='hidden'>
Warning: JupyterHub seems to be served over an unsecured HTTP connection.
We strongly recommend enabling HTTPS for JupyterHub.
</p>
</div>