PIX主题调整全站左右和底部页间距
本文是《技术相关(共31篇)》目录的第 28 篇。阅读本文前,建议先阅读本文前3篇文章:
注意:本修改将不会在手机及平板界面(包括模拟电脑页面下)显示音乐播放器及相关按钮,即只会在PC电脑端显示。
事情的起因是前几天把网站给改成了半透明,为了匹配帅气的黑悟空背景图。没设置背景图之前网站看不出来什么,设置完之后老乡子夜松声和大美女钟MM给出了非常中肯的建议,我的理解是网站主要区域左右和底部页边距过长,如图所示。
经过一下午的迷茫,发现主要的修改文件在pix/inc/assets/css/main.css,废话不多说,开整。
因为改的比较多,直接说多少行可能会有不小出入,所以不再提及,直接搜索。
先改左右页边距。
1、找到如下代码:
.main_body {
position: relative;
}
更改为以下代码,这一步就是直接加宽左右页边距,并让手机平板自适应。
.main_body {
position: relative;
margin: 0 -200px;
}
@media (max-width: 768px) {
/* 针对手机和平板等小屏幕设备 */
.main_body {
position: relative;
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* 针对中等屏幕设备(例如部分平板) */
.main_body {
position: relative;
margin-left: -10%;
margin-right: -10%;
}
}
2、更改后会发现,虽然页边距增加了,但是主题的左边菜单部分和右边的评论部分非常的不协调,继续调整。
找到如下代码:
body.mod_third .left_nav {
width: 25%;
}
以及
body.mod_third .main_sidebar {
width: 25%;
display: block;
}
把两段代码里面的25%都改成20%。
改完这一步,你会惊奇的发现,右下角的快速返回顶部和音乐播放器按钮以及歌词按钮不见了,原来是因为加宽被掩盖了。继续修改:
找到以下代码:
a.go_top {
position: absolute;
right: -45px;
padding: 7px;
display: flex;
line-height: 1;
background: #22bb6d;
color: #fff;
border-radius: 8px;
bottom: 20px;
opacity: 0;
transition: all .15s;
}
以及
.footer_tool {
position: absolute;
right: -45px;
display: flex;
bottom: 70px;
flex-direction: column;
}
把里面right: -45px中的-45改成-150,或者根据你自己的需要修改成合适的数值。
页面加宽了,正下方的音乐播放窗口有些错位,小小纠正一下。
找到以下代码:
.footer_nav_box {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
width: 100%;
backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem);
background: rgb(255 255 255 / 80%);
border-top: 1px solid #edf3f0;
position: absolute;
right: 0;
top: 0px;
}
right: 0中的0修改为-100px。
再打开pix/inc/assets/css/uikit.min.css,找到如下代码:
.uk-width-1-3\@m{width:calc(100% * 1 / 3.001)}
3.001修改为4.501,这样,下方的播放器就完全居中了。
如果你之前修改过主题,添加的有歌词显示,可以继续修改下歌词的显示位置:
在后台,PIX主题设置---扩展设置---底部HTML代码,可以参考我现在的代码:
//桌面歌词css(按照下面格式自行修改)
position: 'fixed',
bottom: '0',
left: '6%',
width: '280px',
height: '70px',
overflow: 'hidden',
zIndex: '999',
pointerEvents: 'none',
} :
接下来改底部页边距。
1、找到如下代码:
.footer_main {
position: relative;
width: -webkit-fill-available;
width: -moz-available;
padding: 0 10px;
padding-bottom: 100px;
z-index: 988;
}
将padding-bottom: 100px;里的100px更改为50px。
2、修改pix/inc/assets/css/mobile.css,让手机和平板底部页边距也变窄。
找到如下代码:
.footer_main {
position: relative;
padding-bottom: 110px;
}
将110px更改为60px,或你自己喜欢的大小。
改后就是本站现在的演示。
我印象中是调整了这些地方,如果和本站演示不同,留言回复。
您已阅读完《技术相关(共31篇)》目录的第 28 篇。请继续阅读本文后3篇文章:
肌电技术博客
哈哈哈博主大大咱们就是说这个字的话有点看不清来的
似水流年
@肌电技术博客 一直想找个好看的字体,能衬托透明的背景,但现在没有满意的。
LiuShen
感觉图片也半透明了就怪怪的哈哈,两个黑悟空叠一起大眼瞪小眼
似水流年
😂等游戏的热波下去,我就把它给换了。
网友小宋
是不是界面太透明了。我之前也是这种透明的,后来感觉体验不佳,就改回来了。
似水流年
中秋这个临时换的感觉太透明了,明天再换成黑悟空我觉得还行。