[Feelings & Sharing] 关于DEEPIN论坛页面样式自定义
Tofloor
poster avatar
咿呀
deepin
2022-07-20 19:28
Author

对当前论坛外观,我简单的分了几个区域,如下图。我认为:
1、头部栏和紧邻的搜索栏高度(80px)太高了;
2、侧边留白有点多

图片.png

于是我使用Stylus自定义样式,不过只有内容栏宽度和搜索栏有效。可是我是在用Firefox的样式编辑器更改有效后,才复制规则到Stylus的。

这是使用Firefox样式编辑器更改样式后的样子,只是刷新后就改回去了sad

有大佬看到,还请点拨一下。kissing_heart

图片.png

刷新后

图片.png

以下是我Stylus的样式设置

.main[_ngcontent-serverApp-c43] {
	width: 90%;   #内容栏宽度
}
#头部栏高度
.nav {
	height: 60px;  
}
#头部栏菜单高度
ul.new-menu > li {
	line-height: 60px;
}
#头部栏登录与语言高度
d-header > li {
	line-height: 60px;
}
# 搜索栏高度及上边距
.top[_ngcontent-serverApp-c43] {
	margin: 60px auto auto;
        height: 50px;
}
Reply Favorite View the author
All Replies
zccrs
deepin
2022-07-20 22:02
#1

你是想更好的利用屏幕空间?

Reply View the author
caoyuUU
deepin
2022-07-20 23:59
#2

版心宽度挺好的,毕竟还要照顾一大堆老电脑的分辨率

Reply View the author
咿呀
deepin
2022-07-21 00:16
#3
zccrs

你是想更好的利用屏幕空间?

嗯,是的。而且改后看着要协调一点。

Reply View the author
咿呀
deepin
2022-07-21 00:21
#4
caoyuUU

版心宽度挺好的,毕竟还要照顾一大堆老电脑的分辨率

改后版心宽度是屏幕的90%,原来是70%。宽度不是固定的,是按照屏幕百分比来的。

Reply View the author
myml
Super Moderator
Developer
2022-07-28 00:31
#5

导航栏的高度进行了调整,现在会在滚动时自动减小高度,如果你需要更小的高度,可以给body添加一个css变量

body {
  --d-header-height: 54px;
}
Reply View the author
myml
Super Moderator
Developer
2022-07-28 00:46
#6

可以试试这个Stylus设置

body {
  --d-header-height: 54px;
}
.bbs > .main {
    width: 90% !important;
}
.bbs > .top {
    height: 50px;
}
Reply View the author
咿呀
deepin
2022-07-31 02:03
#7
myml

可以试试这个Stylus设置

body {
  --d-header-height: 54px;
}
.bbs > .main {
    width: 90% !important;
}
.bbs > .top {
    height: 50px;
}

非常的感谢,就是这个效果agree

Reply View the author