本实验基于VMware17，使用Ubuntu2310搭建openstack-B版

Ubuntu主题

以下配置只对Ubuntu主题生效

登录界面修改

原界面

关闭登录界面域名输入

sed -i 's/OPENSTACK_KEYSTONE_MULTIDOMAIN_SUPPORT = True/OPENSTACK_KEYSTONE_MULTIDOMAIN_SUPPORT = False/' /etc/openstack-dashboard/local_settings.py

systemctl restart memcached;systemctl restart apache2

修改后

修改登陆界面背景

上传背景图片到root目录，并修改名称为image-background-pattern.png

cp image-background-pattern.png /var/lib/openstack-dashboard/static/themes/ubuntu/img/image-background-pattern.png

设置该图片自动适应屏幕大小

vim /var/lib/openstack-dashboard/static/dashboard/css/output.01639c955d87.css

搜索image-background-pattern.png定位，并替换该整行内容

#splash { background: url("/static/themes/ubuntu/img/image-background-pattern.png"); position: absolute; width: 100%; /* 将宽度设置为100%，让图片自动适应浏览器窗口宽度 */height: 100vh; /* 设置高度为视窗高度，确保图片完全填充屏幕 */background-size: cover; /* 使用 cover 属性确保背景图片完全覆盖容器 */background-position: center; /* 居中对齐背景图片 */background-repeat: no-repeat; /* 禁止背景图片重复 */
}

systemctl restart memcached ;systemctl restart apache2

修改后

登录框边缘添加透明效果

vim /var/lib/openstack-dashboard/static/dashboard/css/output.01639c955d87.css

注释#splash .login改行后添加

#splash .login {background-color: rgba(255, 255, 255, 0.8); /* 设置白色背景，并且透明度为80% */box-shadow: 0px 1px 3px 1px rgba(51, 51, 51, 0.2); /* 设置阴影效果 */-moz-box-shadow: 0px 1px 3px 1px rgba(51, 51, 51, 0.2); /* Firefox浏览器阴影效果 */-webkit-box-shadow: 0px 1px 3px 1px rgba(51, 51, 51, 0.2); /* Webkit内核浏览器阴影效果 */max-width: 500px; /* 最大宽度限制为500px *//* padding-bottom: 20px; /* 底部内边距为20px */padding-top: 60px; /* 顶部内边距为60px */position: relative; /* 相对定位 */
}

systemctl restart memcached ;systemctl restart apache2

修改后

修改登录界面logo

这里去掉登录界面中央logo，需要更换则直接替换即可（原图尺寸：1402x428），并设置文字样式

vim /var/lib/openstack-dashboard/static/dashboard/css/output.01639c955d87.css

注释或删除该行 #splash .login:after，添加以下内容

#splash .login:after {background-image: none; /* 移除背景图片 */background-repeat: no-repeat;background-size: 180px;color: #000000; /* 将字体颜色设置为黑色 */content: "企业级平台"; /* 伪元素的内容 */display: block;font-size: 31px;font-weight: bold; /* 将文字设置为加粗 */text-align: center; /* 文字水平居中 */left: 50%; /* 相对于父元素左边界的距离 */line-height: 2.4em;position: absolute; /* 绝对定位 */top: 15px; /* 相对于父元素上边界的距离 */width: 100%;transform: translateX(-50%); /* 水平居中 */animation: colorChange 6s infinite; /* 使用动画效果，持续时间为6秒，无限循环 */
}/* 定义逐渐变化颜色的动画，有点花哨，如不需要可不使用 */
@keyframes colorChange {0% {color: #000000; /* 初始颜色为黑色 */}100% {color: #ffffff; /* 结束位置的颜色为白色 */}
}

systemctl restart memcached ;systemctl restart apache2

修改后

更换站点图片

上传并更换此路径图片，（原图片尺寸大小：48x48）

cp favicon.ico /var/lib/openstack-dashboard/static/dashboard/img/favicon.ico

systemctl restart memcached ;systemctl restart apache2

修改后

更换项目logo图片

上传并更换此路径图片，为左上角项目旁边，（原图尺寸大小：601x107）

在线转换svg

cp logo-canonical-openstack-linear.svg /var/lib/openstack-dashboard/static/themes/ubuntu/img

systemctl restart memcached ;systemctl restart apache2

如果使用默认主题，则替换以下路径

cp logo.svg /var/lib/openstack-dashboard/static/dashboard/img/logo.svg

systemctl restart memcached ;systemctl restart apache2