用Stylebot插件 修改blogger编辑器页面 显示被折叠的工具栏按钮

前言

书接上文 我们已经隐藏了bloger编辑器的右栏

但工具栏在空间足够的条件下, 还是产生了折叠分栏.

本文就来解决这个问题.

分析

通过 F12 开发者工具, 分析 工具栏的 HTML 内容

发现, 就在这个工具栏里面, 有些按钮被隐藏了. 也就是说, HTML内容里是有的, 但是页面上不显示.

面向GPT开发

因为GPT文本输入字数限制, 我们需要将工具栏的HTML内容保存为文件, 再上传给GPT.

HTML 环境

我有一个工具栏, HTML内容见文件
工具栏中包含一些按钮

有些按钮是显示的, 有些按钮是隐藏的

我现在需要将工具栏下的所有按钮都设置为显示

要求使用设定页面元素CSS的方式

按钮可能是动态的, 所以不要指定按钮的 class, 而要从按钮与工具栏的HTML层级关系分析.

把上述需求发给GPT, 得到

.Qy5T6b.O3LMFb.QduVPe * {

    /* 强制元素显示。display: initial 尝试恢复元素的默认显示类型，通常比强制 display: block 更安全。 */

    display: initial !important;

    

    /* 确保元素可见 (覆盖 visibility: hidden) */

    visibility: visible !important;

    /* 确保元素不透明 (覆盖 opacity: 0) */

    opacity: 1 !important;

    

    /* 移除可能导致元素被灰色化或隐藏的滤镜效果 */

    filter: none !important;

}

实践与调试

在 Stylebot 中设置刚刚GPT给的结果, 得到

可以看到有初步效果, 但是显示得太多了.

继续在F12模式下进行简单的分析.

可以看到 下拉菜单选项啊, 说明文字啊, 都显示出来了.

如果我们限制 只显示到 按钮这一层, 会是什么效果呢?

问了一下GPT CSS语法,  改成这样

.Qy5T6b.O3LMFb.QduVPe > * > * {

  display: initial !important;

  visibility: visible !important;

  opacity: 1 !important;

  filter: none !important;

}

效果有改善, 没有多余的文字和下拉菜单项了, 但是排列有点问题.

继续通过F12分析. 

发现这些按钮元素原来的显示方式是 

display: flex;

所以我们继续优化为

.Qy5T6b.O3LMFb.QduVPe > * > * {

  display: flex !important;

  visibility: visible !important;

  opacity: 1 !important;

  filter: none !important;

}

这下正常了.

Github

https://github.com/crazypeace/blogger-editor-css

========

后记

本次 (2025-11-13) 面向GPT开发过程中, 使用的是

Gemini

一开始我的思路是 把 折叠分栏中的按钮 "迁移"到 主工具栏中, 找GPT开发了一下子, 还有了初步效果, 只是位置不对, 需要优化. 

结果在优化分析的过程中发现,  主工具栏中有全部的按钮, 只是一些被隐藏了. 所以, 把"迁移"按钮的方案推翻.