常用自定义样式

本文介绍一些常用的自定义样式。您可以将代码粘贴到脚本“外观样式”选项卡的自定义 CSS 的文本框中定制网页样式,也可以使用 Stylish 等扩展添加自定义样式。部分样式需要安装了 YAWF 脚本才能生效。

隐藏搜索框

请参阅:添加新浪微博的搜索到您的浏览器搜索框中

.WB_global_nav .gn_search_v2 { display: none !important; }

隐藏左上角微博图标

.gn_logo { display: none; }

隐藏微博发布框

隐藏后可以使用右上角的快速发布。

#v6_pl_content_publishertop { display: none !important; }

隐藏右下返回顶部按钮

#base_scrollToTop { display: none !important }

调整合并两侧栏后导航栏宽度

本样式需要开启“恢复经典导航栏样式”功能。

如果导航栏屏蔽掉了“应用”和“游戏”的链接,或者隐藏了搜索框,可以使用下面这段 CSS 使顶栏变窄:

.WB_global_nav .gn_header { width: 850px; } .WB_global_nav .gn_search_v2 { max-width: 220px !important; } .WB_global_nav .gn_search_v2 .placeholder, .WB_global_nav .gn_search_v2 .W_input { width: 178px !important; } .gn_topmenulist_search { width: 222px !important; } @media screen and (max-width: 1006px) { .WB_global_nav .gn_header { width: 610px; } .WB_global_nav .gn_search_v2 { display: none; } } body[yawf-merge-left="left"] .gn_logo { margin-right: 105px !important; }

调整滚动条宽度

这里的滚动条指微博自己的界面中绘制的滚动条,左栏分组列表过长时的滚动条。并非由系统样式决定的滚动条。如果你觉得那个滚动条太窄,可以应用以下样式将其加宽。调整下例样式中的8px可以调整宽度,数值越大则越宽。

.W_scroll_y { width: 8px !important; } .W_scroll_y .bar { border-radius: calc(8px / 2) !important; }

自定义折叠微博样式

可以通过对[node-type="feed_list"] .WB_feed_type[yawf-display$="-fold"]::before、[node-type="feed_list"] .WB_feed_type[yawf-display$="-fold"]:hover::before添加样式自定义折叠提示的样式,例如:

[node-type="feed_list"] .WB_feed_type[yawf-display$="-fold"]::before { color: #fff; background: #522; border-color: #777; } [node-type="feed_list"] .WB_feed_type[yawf-display$="-fold"]:hover::before { color: #fff; background: #351; border-color: #777; }

隐藏导航栏中的用户名

如果想要完全隐藏用户名的文本,可以使用如下样式:

.WB_global_nav .gn_nav_list li .gn_name .S_txt1 { display: none; }

如果您想用自定义的文本取代显示的用户名,您可以使用如下样式:

.WB_global_nav .gn_nav_list li .gn_name .S_txt1::before { content: "个人主页"; display: block; } .WB_global_nav .gn_nav_list li .gn_name .S_txt1 { height: 26px; }

将其中的“个人主页”几个字替换成你需要的文字即可。

隐藏漏斗图标

.yawf-gn_set_list { display: none !important; }

隐藏后还可以通过旁边齿轮图标菜单中的“过滤器设置”项目打开设置窗口。

此外,如果您因为自定义 CSS 无法打开设置对话框,请参考常见问题中的相关说明进行处理。

隐藏发布微博按钮

如果你希望完全隐藏这个按钮,可以试试这个样式:

.WB_global_nav .gn_set_list:last-child { display: none; }

如果你只是希望他和其他几个按钮外观一致,可以试试:

.WB_global_nav .ficon_send, .WB_global_nav .ficon_send:hover { background: none !important; color: #696e78 !important; vertical-align: middle; }

如果您开启了将导航栏变为深色的功能,修改上面的样式中 color 后的颜色为 #a6afbf 即可。