如何编辑网站的背景色 [英] How to edit a website's background colors
问题描述
我的编码经验为零，但是我使用的网站的某些框"中的颜色太鲜艳了.
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...
我正在专门尝试更改"leftcolumn"，来自"ffffff"的背景颜色到"806546"
I am specifically trying to change "leftcolumn" background color from "ffffff" to "806546"
它目前正在使用CSS参考文件来更改颜色，但是我已经成功地通过使用chrome的编辑器添加该元素来成功编辑了颜色.
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.
如何更改CSS文件的元素，以便更改背景色?
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>
推荐答案
听起来像是一个教科书示例，说明了为什么发明了TamperMonkey(最近)和GreaseMonkey(已过时)扩展.
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.
但是一切并没有丢失- TamperMonkey 来进行营救.
But all is not lost - TamperMonkey to the rescue.
-
为您选择的浏览器安装 TamperMonkey扩展
在目标网站上，单击TamperMonkey图标
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 = '<script>.leftcolumn{background-color:#806546}</script>';
$(body).append(mycss);
});
注意:
-
@name行是您的脚本名称.它可以是任何东西-完全可以.当您有一天为多个网站(我目前有200多个)编写了多个TamperMonkey脚本时，这就是显示在TamperMonkey仪表板中的名称，例如"filename".用于Excel电子表格.
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.
@match行最初将使用您所在页面的确切URL进行填充.通常，这不是您想要的.例如，假设您在网站http://example.com/blog/name-of-a-particular-blog-post上-通常，您希望同一脚本在每一个博客文章上运行，而不仅仅是这个.只需用*替换太具体的部分，就像这样:http://example.com/blog/*，它现在可以在任何以这些字符开头的url的页面上运行.
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.
@require行允许您在脚本中使用jQuery.如果不需要jQuery，则不需要此行.丢掉它.
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.
当网页上的TamperMonkey脚本处于活动状态时，TamperMonkey扩展名图标显示红色块
When a TamperMonkey script is active on a webpage, the TamperMonkey extension icon displays a red block
TamperMonkey能为我做什么?
您可以用TamperMonkey做什么事情?您可以完全重新格式化页面！在某些页面中，我将所有<p>标记(及其内容)保存到变量中，然后执行以下操作:$('body').html(myvar);-页面上以前的任何 现在都被替换为这些段落的内容.再见，混乱！您可以插入新的<style>标签块(您应该看到我的YouTube样子...).您可以填写字段并单击按钮，删除包含具有某些字符模式(例如-ad或Taboola)的className的Div.您可以编写自己的HTML代码(一串文本，存储在一个变量中)，然后可以将其插入到页面上，如上所示-如此！您编写的HTML出现在页面上. 基本上:您可以在DevTools中执行大部分操作，但是可以编写脚本并实现自动化.您是否使用CPANEL?重新排列该页面以便所有图标在一个屏幕上可见不是很好吗?是否有一些您从未使用过的图标集?藏起来您是否要以不同的顺序排列图标组?重新排列它们.
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.
Here is an SO answer with a simple script that hides the distracting Hot Network Questions block on every SO page.
这里是，可以完全解释TamperMonkey并提供了一个简短的脚本，可为您提供无穷无尽的DuckDuckGo结果(即，无需再按按钮即可查看更多结果-结果可以无休止地滚动). (不要使用DuckDuckGo?该帖子还包含指向脚本的链接，该脚本对Google搜索结果具有相同的作用-仅此脚本值得安装TamperMonkey！)
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!)
免责声明:我与上面讨论的任何产品都没有关联或关系.我只是一个谦虚的用户和欣赏者.
这篇关于如何编辑网站的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
