PIX主题调整全站左右和底部页间距

注意:本修改将不会在手机及平板界面(包括模拟电脑页面下)显示音乐播放器及相关按钮,即只会在PC电脑端显示。

事情的起因是前几天把网站给改成了半透明,为了匹配帅气的黑悟空背景图。没设置背景图之前网站看不出来什么,设置完之后老乡子夜松声和大美女钟MM给出了非常中肯的建议,我的理解是网站主要区域左右和底部页边距过长,如图所示。

PIX主题调整全站左右和底部页间距-似水流年
调整之前电脑左右页边距
PIX主题调整全站左右和底部页间距-似水流年
调整之前电脑底部页边距
PIX主题调整全站左右和底部页间距-似水流年
调整之前手机的底部页边距

经过一下午的迷茫,发现主要的修改文件在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,或你自己喜欢的大小。

改后就是本站现在的演示。

PIX主题调整全站左右和底部页间距-似水流年
调整之后电脑左右及底部页边距
PIX主题调整全站左右和底部页间距-似水流年
调整之后手机底部页边距,左右实现自适应。

我印象中是调整了这些地方,如果和本站演示不同,留言回复。

Comments | 6 条评论
  • 肌电技术博客

    哈哈哈博主大大咱们就是说这个字的话有点看不清来的

  • LiuShen

    感觉图片也半透明了就怪怪的哈哈,两个黑悟空叠一起大眼瞪小眼

    • 似水流年

      😂等游戏的热波下去,我就把它给换了。

  • 网友小宋

    是不是界面太透明了。我之前也是这种透明的,后来感觉体验不佳,就改回来了。

    • 似水流年

      中秋这个临时换的感觉太透明了,明天再换成黑悟空我觉得还行。

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息