如何破解一个云应用程序来改变它的外观

导读我最喜欢的待办事项管理器Todoist最近改变了它的外观——我讨厌它。这是云服务的问题之一:事情总是在变化,常常完全超出您的控制。至少在桌面应用程序中,如果你不想应用更改,你就

我最喜欢的待办事项管理器Todoist最近改变了它的外观——我讨厌它。

这是云服务的问题之一:事情总是在变化,常常完全超出您的控制。至少在桌面应用程序中,如果你不想应用更改,你就不需要(尽管Windows 10正在改变)。你可以坚持使用旧版本。有时,供应商会明智地修复“升级”,而其他时候,您可能只使用旧版本。

但不是云。如果一个云供应商想要做出改变,那么下一次在浏览器中加载页面时,您就会陷入困境。这都是不同的。

在Todoist的例子中,他们改变了优先级图标的外观和颜色。不是红色代表紧急,而是蓝色和白色的两个色度,他们用一种刻度来表示某种紫色是紧急的,有点类似的橙色表示不那么紧急,一个黄色,然后一个白色。这是可怕的。

在某些屏幕上,很难区分最高优先级和中等优先级。当颜色的差异是红色和蓝色,没有这样的问题。很明显,紧急的、优先的项目是红色的,其他的……不是。

当我意识到这一变化时,我最初的想法是简单地大声喊叫。我考虑过在Twitter、Facebook上发帖,甚至在这里写一篇严厉的文章,批评供应商改变颜色是多么不公平。我理直气壮地昂起了头。

然后我想了想。首先,关于云供应商改变界面颜色的抱怨——不管我喜欢与否——并不完全是一篇zdnet质量的文章。其次,我真的很想做点什么,而不是哭出来。我想把颜色变回去。

幸运的是,由于Todoist在Web上是以HTML+CSS Web页面的形式呈现的,所以我有能力进行更改。因此,我将向您展示如何在浏览器级别动态地更改一些站点,而不是写一篇文章,这只是一篇幼稚的夸夸其谈。我以前为XDebug做过这个,其中错误消息是black-on-orange,很难阅读。

在开始之前,我应该指出,我是在我选择的浏览器Chrome中做这些的。您可以在Firefox中遵循几乎相同的一组步骤,但是您可能会发现自己在IE、Edge或Safari上受到了更多的限制。

您应该首先安装一个名为Stylebot的扩展。Stylebot的工作原理是基于CSS选择器动态更改Web页面上的样式。当一个给定的页面加载时,如果它在Stylebot中有一个配置,主机提供程序的样式表中的某些CSS样式(在本例中是Todoist)会被Stylebot中的样式覆盖。

值得注意的是,我经常使用的另一种扩展叫做“时尚”。Chrome和Firefox都有一个时髦的版本。但是,由于无法在Todoist上成功使用,所以我使用了Stylebot。如果您使用的是Firefox,您可以尝试使用时髦的或其他类似的附加组件或扩展来使用这种方法。

Alexa失去理智之夜:AWS宕机如何造成亚马逊Echo的混乱

当亚马逊网络服务宕机几个小时后,亚马逊的Echo设备也宕机了。当互联网故障冲击物联网世界时会发生什么?

阅读更多

您将需要一些关于如何使用检查器查找样式、指定CSS选择器和编写基本CSS的基本知识。在本文的最后,我包括了三个YouTube视频,它们提供了关于这些技能的很好的教程,所以现在就跟着做,如果您需要更多的帮助,可以观看这些视频。

在Todoist中有四个优先级的圆圈,我想改变其中的三个。我将演示如何对优先级最高的项进行更改,然后您可以继续进行其他两项更改。

我们从Todoist open开始。要打开一个给定元素的检查面板,只需右键单击你要查找的元素附近的某个地方,然后从Chrome弹出菜单中选择Inspect element。事实证明,Todoist也有一个右键菜单,所以我必须右键点击优先级圆圈的左边一点,但我仍然能够打开检查器。

从下面的图片中很难看出,但是你可以看到优先级圆是在左边选择的,以及在右边的HTML和CSS样式:

这里有一个更好的截图显示检查员代码只有:

我们要使用两个类:amicheckbox和priority_4。结果表明,具有priority_4类的项具有最高优先级,priority_3的项不具有最高优先级,priority_2接近底部,priority_1是最低优先级。因此,我们将使用这些类来帮助确定应用于每个圆的颜色。

一开始,我认为checker类是我们想要的类,但如你所见,当在检查器中选择amicheckbox时,我得到了可编辑的CSS项目,带有我想改变的颜色:

实际上,您可以看到检查器甚至指出了正确的选择器,它是.priority_4,后跟空格和.amicheckbox。圆点表示下面的文本是一个类名,空格用于告诉CSS选择priority_4块内的任何amicheckboxes。

现在我们知道了选择器,我们可以进入Stylebot并进行一些样式更改。从Todoist内部,右键点击Stylebot。确保选择箭头所指的选项,而不是打开Stylebot。

然后我进入Stylebot,选择样式标签,然后点击“添加一个新样式…”按钮:

一旦进入Stylebot编辑器,告诉它我想让这个样式在todoist.com上运行就很简单了,然后我插入了替换的CSS。正如你所看到的,我只是简单地使用了选择器和我之前找到的属性,并改变了颜色规格:

我只是输入我的CSS代码,然后点击保存。我可以使用十六进制颜色规范,但是我有点懒,只使用文本等价的颜色。

这是最终的结果。如您所见,我列出了所有四个优先级,它们现在正是我想要的:红色、蓝色和淡蓝色。

Stylebot有一个缺点:样式不能跨机器同步。我发现在谷歌Keep中简单地转储样式并在我的主4台机器上进行更改就足够简单了。

另外,请记住,您可以将其用于任何您想要更改的Web页面。我发现这是一种临时的解决方案,因为供应商会定期更改他们的页面代码。即便如此,我通常能从十分钟的内容中得到几个月甚至更长的时间——这大大减少了我对供应商选择的厌烦程度。

这是一个hack,所以它不会与所有东西一起工作。但这是一个很好的工具在你的工具箱里。

这里是我提到的三个教程视频。它们做得很好,你要花半个小时才能看完。如果您不确定CSS或检查器,请观看这些视频。不要担心一个视频是第3部分,另一个是第5部分——它们是优秀教程系列的一部分,解释了关于这个项目需要了解的更多内容。

这就是它。我希望你喜欢调整Web应用程序。如果你调整任何Web应用程序,请在下面的评论中告诉我们。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢