Code Monkey home page Code Monkey logo

weibo_v6's Introduction

weibo_v6 微博美化样式

失效说明

微博旧版已经下线,这个样式已经失去意义。

准备

  1. 安装 Chrome 或者 FireFox 等现代浏览器:

  2. 在浏览器上安装 Stylish 或者 Stylus 插件,我推荐安装后者。

应用样式(以 Stylus 为例)

  1. 在浏览器中打开 Stylus 插件,点击“编写新样式”:

  2. Stylish.Stylus.css 中的内容粘贴到输入框,点击“覆盖样式”:

  3. 输入名称“weibo_v6”后,点击“保存”(你可以输入你喜欢的任何名称):

其他说明

使用最新版 Yet Another Weibo Filter(Version 4.0.46) 的时候发现,它和本样式有冲突,导致微博 feeds 流右侧多出了一块空白,解决办法是注释掉 Yet Another Weibo Filter 中的一句代码:

html .B_index .WB_frame #plc_main,
html .B_message .WB_frame #plc_main,
html .B_discover .WB_frame #plc_main,
html .B_page .WB_frame #plc_main {
  /* 这里注释掉 */
  /* width: calc(var(--yawf-feed-width) + var(--yawf-right-width)) !important; */
}

weibo_v6's People

Contributors

moonflame avatar thekingofcity avatar xijinian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

weibo_v6's Issues

顶部用户名和和功能按钮的位置问题的几种解决方案

微博默认布局:
logo - 搜索框 - 用户名和功能按钮;

weibo_v6 修改 css 后的布局是:
logo - 用户名和功能按钮 - 搜索框,

所以造成用户名和功能按钮不能根据 logo 的尺寸来自动对齐的后果,因此咱就使用户名区域从左边开始固定一些像素的方法……
当 logo 更新节日版,这个对齐方式理所当然就挂了……

几种解决方案:

  • 那片区域直接左边缩进 100 多 px,就像我改的那个版本和目前的“节日版”一样,节日 logo 不会重叠,日常 logo 空着就空着吧。
  • 那片区域靠右对齐到搜索框,因为搜索框宽度是自己定义的,对齐应该不成问题。
  • 恢复成搜索框在左,那片区域靠右的形式,对齐就容易了。

我有闲心就新建个文件夹来存放以上提到的某些修改吧。

  • Stylus 也可以使用在扩展栏点开就能调整的设置界面!如果有空的话可以考虑用这种方式来实现切换以上的各种版式以及实现更多功能。
  • 以我的理解,纯 CSS 似乎很难实现这样的自动变更位置。所以,我可以去搞个专门针对 weibo_v6 的 JS 脚本,这样应该可以实现动态的靠左对齐,就不用时不时更新什么“节日版”、“日常版”这些东西了。当然除了这个功能以外,还可以根据 weibo_v6 的特色来添加一些功能来调整各种布局。(想了想还得学不少东西还是算了!)

补全计划?

首先感谢师傅的备份,已经star
然后这个样式之前的师傅似乎就没有开发完,用户的界面还是weibo原生的样式,有没有师傅有兴趣来补全一下 0.0
【不是伸手党,是弱鸡我开发无力

增加了对于大V标识的支持

/** 修复了如果是加V的用户,V标识错位的问题 **/
.W_person_info .cover .headpic .icon_bed {
    position: absolute;
    right: 3px;
    top: 78px;
}

/** 删除微博左上角导航栏的营销图片 **/
.WB_global_nav .gn_logo, .WB_global_nav .gn_logo .box, .WB_global_nav .gn_logo .box .logo {
    width: 31px !important;
    margin: 0 !important;
    display: none;
    background-position: 0 50% !important;
}

/** 修复关注页面未分组文字宽度过小的问题 **/
.PCD_connectlist .member_box .member_wrap .mod_info .W_btn_b .txt {
    /* display: inline-block; */
    max-width: 4em;
    text-align: center;
    vertical-align: middle;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.