有人夸「博望坡」整得好看且专业,写一下网站样式的修改记录

已经被老当盯了很久,说博客开起来了,没发过什么文章。虽然有时候@小虾 确实偶尔玩玩游戏,不过也干了些事情,比如之前的几版 LOGO 也是我现学现卖搞出来的。最近网站正式定名「博望坡」,我也在主题原来的基础上进行了一定的修改。所以不能说我什么没做, 我只是一个摸摸贡献者。

「博望坡」使用的是 WordPress 程序搭建,之前使用过其他收费主题尝试了一段时间,都被我们否定了(白瞎了好多冤枉钱)。之所以最后选择 justnews 主题(也是官方买的收费版本),主要是胜在简洁,框架整齐。

justnews 主题原来的色调是蓝色为主,适合资讯、科技网站,老当喜欢朴素一点的,所以小虾就对一些样式进行了修改,为什么我不说美化呢?因为原来的主题样式也好看,只不过我们修改成适合自己的样式,所以我这里只是说修改。

有人夸「博望坡」整得好看且专业,写一下网站样式的修改记录

因为主题会不定时进行更新,有些改动不能使用子主题,为了方便以后的主题升级,所以记录下来。

一、网站色调,包括背景颜色、链接颜色使用色调:#7F5D31;顶部导航色调:#F2E9DD;网站主页面背景色调:#F2E9DDE0;主页面色调的数值后面比顶部导航色调多了个 E0,这个是填充度,或者说透明度。如果两个数值一样的话,色调一样就分不清楚导航和主页面,所以加了个填充数值。

二、修改顶部导航文字大小,由原来的 14px 改成 16px;

body>header.header .nav {
    font-size: 16px;
}

三、修改日间模式下底部 footer 背景颜色从深灰色变为棕色

.footer {
    padding: 50px 0;
    color: rgb(255 255 255 / 75%);
    background: #674315;
}

四、调整黑夜模式下底部 footer 的背景颜色为纯黑

.style-for-dark.style-by-toggle header.header {
    background: #000000;
}
.style-for-dark .footer {
    color: var(--theme-gray-color);
    background: #000000;
}

五、修改嵌入文章引用卡片背景色

.post-loop-embed {
    background: #ffa40036;
}

六、修改评论框背景色

.comment-form-comment textarea {
    background: rgb(255 255 255 / 10%);
}
.comment-form-author input, .comment-form-email input, .comment-form-url input {
    background: rgb(255 255 255 / 10%);
}

七、修改文章正文字体大小和间距

.entry .entry-content {
    position: relative;
    margin-bottom: 30px;
    font-size: 18px;
}
.entry .entry-content p {
    margin-bottom: 20px;
    line-height: 2;
    word-wrap: break-word;
}

八、给正文添加了聊天的样式

有人夸「博望坡」整得好看且专业,写一下网站样式的修改记录

因为这段代码是使用@飞牛士 分享后修改的,具体如果有需要的可以去他那里看看《纯CSS3制作带尖角的气泡对话框实例特效代码》。

最后,@飞牛 说有人表扬了「博望坡」界面整得好看且专业。

有人夸「博望坡」整得好看且专业,写一下网站样式的修改记录
诸葛老当 say:

嗯,我看到了。摸鱼虾,辛苦了!

欧阳小虾 say:

……

© 文章系本站作者 欧阳小虾 原创发布于「博望坡」,文章授权后方可转载,请勿侵权!

(0)
上一篇 2023年2月1日 下午10:52
下一篇 2023年2月2日 下午3:05

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(8条)