html - How to edit a website's background colors

Question

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>

Answer 1

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.

1. Install the TamperMonkey extension for your browser of choice

2. On the target website, click the TamperMonkey icon

3. 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);
});

Notes:

1. 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.

2. 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.

3. 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.

4. 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.}