如何编辑网站的背景颜色 [英] How to edit a website's background colors
问题描述
我的编码经验为零,但我使用的网站的某些盒子"颜色太亮了.
我想创建一个插件,以便我自己和另一个用户能够使用深色主题"
我遵循了一些指南,但我无法让它工作......
我特别想改变leftcolumn"来自ffffff"的背景颜色到806546"
它目前正在使用 CSS 参考文件来更改颜色,但我已通过使用 chrome 的编辑器添加该元素成功地编辑了颜色.
如何更改 CSS 文件的元素以更改背景颜色?
解决方案 听起来您刚刚找到了一个教科书示例,说明了为什么要发明扩展 TamperMonkey(最近)和 GreaseMonkey(过时).
或者点击添加新脚本"或(如果未显示)单击仪表板";然后,当它打开时,单击 [+] 选项卡.将打开一个新的空白脚本模板.修改如下:
//==用户脚本==//@name 将显示在脚本列表中的名称(在 TM Dashboard 中)//@namespace http://tampermonkey.net///@match *://name_of_desired_domain.com/*//@require http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js//@grant 无//==/用户脚本==(功能() {'使用严格';//你的代码放在这里.例如:让 mycss = '<style>.leftcolumn{background-color:#806546}</style>';$(body).append(mycss);});
注意事项:
@name 行是您的脚本名称.它可以是任何东西——任何东西.当有一天您为多个网站编写了多个 TamperMonkey 脚本(我目前有 200 多个)时,这就是显示在 TamperMonkey 仪表板中的名称,就像文件名"一样.用于 Excel 电子表格.
@match 行最初会填充您所在页面的确切网址.通常,这不是您想要的.例如,假设您在网站 http://example.com/blog/name-of-a-particular-blog-post
上 - 通常,您希望在 http://example.com/blog/name-of-a-particular-blog-post
上运行相同的脚本em>每篇博文,不仅仅是这个.只需用 *
替换过于特定的部分,如下所示:http://example.com/blog/*
,它现在可以在任何带有 url 的页面上运行以这些字符开头.
@require 行允许您在脚本中使用 jQuery.如果您不需要 jQuery,则不需要此行.离开它.
当网页上的 TamperMonkey 脚本处于活动状态时,TamperMonkey 扩展程序图标会显示一个红色块
TamperMonkey 能为我做什么?
你可以用 TamperMonkey 做哪些事情?您可以完全重新格式化页面!在某些页面中,我将所有 <p>
标签(及其内容)保存到一个变量中,然后执行以下操作:$('body').html(myvar);
- 页面上过去的任何内容现在都替换为这些内容段落.再见,混乱!你可以注入新的
标签块(你应该看到我的 YouTube 是什么样子......).您可以填写字段并单击按钮,删除包含具有特定字符模式(例如 -ad
或 Taboola
)的 className 的 Div.您可以编写自己的 HTML 代码(一串文本,存储在变量中),然后您可以将其注入到页面上,如上所示 - 快!您编写的 HTML 出现在页面上.基本上:您可以在 DevTools 中执行的大部分操作,但都是脚本化和自动化的.您使用 CPANEL 吗?重新排列该页面以便所有图标都在一个屏幕上可见不是很好吗?是否有一些您从未使用过的图标组?隐藏它们.你想要不同顺序的图标组吗?重新排列它们.
您还可以填写表单、自动登录、按钮等.因为每个 TamperMonkey 脚本都是基于 URL 触发的,所以整个过程可以自动化,其中(例如)填写表单、按下提交按钮(这会导致生成一个新页面).下一个页面有一个不同的 URL,它被不同的 TamperMonkey 脚本检测到,并且在该页面上自动执行其他操作……其他按钮自动按下 - 和 TaDa!该网站现在是我们需要的地方.我们可以告别一堆样板输入、点击和等待,我们再也不需要这样做了——直到所有者更改网站 HTML(然后我们需要对我们的脚本进行一些更新).
这是一个 SO 答案,其中包含一个简单的脚本,该脚本隐藏了每个 SO 页面上令人分心的热门网络问题块.
这里有一个充分解释了 TamperMonkey并提供了一个简短的脚本,可以为您提供无尽的 DuckDuckGo 结果(即无需按下按钮即可查看更多结果 - 结果只是无休止地滚动).(不要使用 DuckDuckGo?该帖子还包含一个脚本的链接,该脚本对 Google 搜索结果执行相同的操作 - 仅此脚本就值得安装 TamperMonkey!)
免责声明:我与上述任何产品没有任何关联或关系.我只是一个谦虚的用户和欣赏的粉丝.
I have zero coding experience but a website I use has way too bright colors in some of its "boxes".
I would like to create a plugin so that myself and another user are able to use a "dark theme"
I've followed some guides but I am unable to get it to work...
I am specifically trying to change "leftcolumn" background color from "ffffff" to "806546"
It is currently using a CSS reference file to change the color but I have successfully edited the color by adding that element in with chrome's editor.
How can I change the element of CSS file such that the background color shall be changed?
<div class="leftcolumn" style="background-color: #806546;"></div>
解决方案 Sounds like you just found a textbook example of why the extensions TamperMonkey (recent) and GreaseMonkey (outdated) were invented.
Building an extension is quite involved: you need to create a manifest, there are separate files for content scripts and background pages - all around it's a bit complicated. And it's a shifting tapestry of change.
But all is not lost - TamperMonkey to the rescue.
Install the TamperMonkey extension for your browser of choice
On the target website, click the TamperMonkey icon
Either click "Add a new script" or (if that does not display) click "Dashboard" and then, when that opens, click the [+] tab. A new blank script template will open. Modify it as follows:
// ==UserScript==
// @name Name That Will Show In The List of Scripts (in TM Dashboard)
// @namespace http://tampermonkey.net/
// @match *://name_of_desired_domain.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant none
// ==/UserScript==
(function() {
'use strict';
//your code goes here. For example:
let mycss = '<style>.leftcolumn{background-color:#806546}</style>';
$(body).append(mycss);
});
Notes:
The @name line is YOUR name for your script. It can be anything - anything at all. When the day comes that you have several TamperMonkey scripts written for several websites (I currently have over 200), this is the name that displays in the TamperMonkey dashboard, like a "filename" for a Excel spreadsheet.
The @match line will be initially populated with the exact url for the page you are on. Usually, this is not quite what you want. For example, suppose you are on the website http://example.com/blog/name-of-a-particular-blog-post
- usually, you will want this same script to run on every blog post, not just this one. Simply replace the too-specific part with a *
, like this: http://example.com/blog/*
and it will now run on any page with a url that begins with those characters.
The @require line allows you to use jQuery in your script. If you don't need jQuery, you don't need this line. Leave it out.
When a TamperMonkey script is active on a webpage, the TamperMonkey extension icon displays a red block
What Can TamperMonkey Do For Me?
What sorts of things can you do with TamperMonkey? You can completely reformat the page! There are pages where I save all the <p>
tags (with their contents) into a variable, and then do this: $('body').html(myvar);
- whatever used to be on the page is now replaced with nothing but these paragraphs of content. Goodbye, clutter! You can inject new <style>
tag blocks (you should see what my YouTube looks like...). You can fill-in fields and click buttons, remove Divs that contain a className with certain patterns of characters (e.g. -ad
or Taboola
). You can write your own HTML code (a string of text, stored in a variable) that you can then inject onto the page as shown above - presto! the HTML you wrote appears on the page. Basically: most of what you can do in DevTools, but scripted and automated. Do you use CPANEL? Wouldn't it be nice to re-arrange that page so that all the icons are visible on one screen? Are there some groups of icons you just never use? Hide them. Do you want the groups of icons in a different order? Re-arrange them.
You can also fill-in forms, automate logins, push buttons, etc. Because each TamperMonkey script is fired based on the URL, entire procedures can be automated wherein (for example) a form is filled out, submit button pressed (which results in a new page being generated). The next page has a different URL, which is detected by a different TamperMonkey script and additional things are automated on that page... other buttons automatically pressed - and TaDa! the website is now where we need it to be. And we can say goodbye to one bunch of boilerplate typing, clicking and waiting that we need never do again -- until the owner changes the website HTML (then we have some updating to do to our script).
Here is an SO answer with a simple script that hides the distracting Hot Network Questions block on every SO page.
Here is one that fully explains TamperMonkey and provides a short script that gives you endless DuckDuckGo results (i.e. no need to ever press the button to see more results - the results just scroll endlessly). (Don't use DuckDuckGo? The post also contains a link to a script that does the same thing for Google search results - this script alone is worth installing TamperMonkey!)
Disclaimer: I have no association or relationship with any of the products discussed above. I am merely a humble user and appreciative fan.
这篇关于如何编辑网站的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文