General :  K-Meleon Web Browser Forum
General discussion about K-Meleon 
Changing web page background colours
Posted by: Mello
Date: April 28, 2021 07:23PM

Well, I've tried this:
body { background-color: #D3D3D3 !important; }

but much of what I thought was a page backgound isn't actually background.

Google... and many sites for instance, remain predominantly white - ouch my eyes!

Example:
https://ibb.co/3NCLWwf

What to do?

Options: ReplyQuote
Re: Changing web page background colours
Posted by: JohnHell
Date: April 28, 2021 10:54PM

Remember that if you are using [yourprofilepath]\chrome\usercontent.css, it requires to restart K-meleon. If you use [yourprofilepath]\chrome\adblock.css you can modify and reapply by Tools > privacy > block advertisements by toggling it.

Said that, try this:

html{
	background-color: initial!important;
}

The above will fallback to what you set in browser.display.background_color preference, unless there is another *later* rule for html background.

Sadly, some sites don't even let html container tag to be a container tag and they change its CSS too.



Edited 3 time(s). Last edit at 04/28/2021 11:01PM by JohnHell.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: Mello
Date: April 28, 2021 11:21PM

Thanks for the tips - yes! I did restart to apply change.

The same thing happens on this forum as with google - only a tiny strip of the page is changed to light grey as defined in usercontent.css.

Note: when composing or editing posts the message background is white rather than the forum
default grey after message is posted - css does not change this white compositional background)

Whereas, I've been experimenting using an extension in chromium (my second resource hog browser) called Care My Eyes that changes virtually everything. by default it uses very dark grey which autoloads on every site.

google example
https://ibb.co/Fx5dPzC

But this is a complex extension (I unzipped it to have a look), it uses multiple css files
and more. I'm not expecting this from a single css tweak.

This forum example image
https://ibb.co/tYNF7yc

This is with default extension parameters.

Reason I'm looking into this is that I'm using a larger external monitor hooked up to my
notebook and the whites of webpages are becoming overpowering. I don't want to change the monitor setting because then it wouldn't be accurate for none web stuff.



Edited 1 time(s). Last edit at 04/28/2021 11:27PM by Mello.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: JohnHell
Date: April 29, 2021 12:47AM

I "know" and I understand what you say, but. I'm missing the track, did it fix it?, or do you want something else by K-meleon (some macro, that I don't know if exists for that feature) or this site?

Here the white on textareas are also hardcoded to be white, you'll need to use your own CSS rules too.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: siria
Date: April 29, 2021 03:03AM

Quote
Mello
Note: when composing or editing posts the message background is white rather than the forum
default grey after message is posted - css does not change this white compositional background)

Whereas, I've been experimenting using an extension in chromium (my second resource hog browser) called Care My Eyes that changes virtually everything. by default it uses very dark grey which autoloads on every site.
.

Yeah, it's IMO impossible, or at least extremely tricky to find one-fits-all-sites global rules, since every website is completely different.

EDITOR FIELDS are "input" or "textarea" element, e.g.:
textarea, input[type="text"], input[type="password"], input[type="file"], select , select *
{
	-moz-appearance: none !important; 
	color: white !important; 
	background-color: peru !important; 
}

If you want to ADD some ready made css-files, you can copy them as-is into your profiles chrome directory, as separate files, then IMPORT them like this inside adblock.css or userContent.css, at BEGINNING, above the normal rules:

@import url(teststyle1.css);
@import url(teststyle2.css);
etc.

Frankly, every few years I give it another try, usually when users miss a "dark" style, but always find it causes more probs as it solves, e.g. dark text on dark back or vice versa sad smiley
One of my last attempts here (glaring colors are just to check if rules are applied at all):

http://kmeleonbrowser.org/forum/file.php?1,file=2049,filename=myDark_1_up20210504.css



Edited 5 time(s). Last edit at 05/04/2021 05:20PM by siria.

Attachments: myDark_1_up20210504.css (7.3 KB)  
Options: ReplyQuote
Re: Changing web page background colours
Posted by: Mello
Date: April 29, 2021 11:04PM

John, it was only working in a limited way. I didn't quite know what to ask for.

Thanks siria, that css gives me plenty to experiment with.



Edited 1 time(s). Last edit at 04/29/2021 11:28PM by Mello.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: JohnHell
Date: April 30, 2021 01:49AM

Quote
Mello
John, it was only working in a limited way.

If it is because it was still white (that rule was only for Google), as I told, that rule makes the rendering fallback to what is set to that preference OR by a different rule as set that rule, but instead initial, a color.

Anyway it is hard to achieve a dark mode. Someone in a "recent" thread (I can't recall) gave hints to accomplish "something".

Have good tweaking, anyway.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: anonymous
Date: April 30, 2021 02:33AM

Keyword 'underline' never ended with a 'd'.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: siria
Date: April 30, 2021 03:51AM

Quote
anonymous
Keyword 'underline' never ended with a 'd'.

Oops... Thanks, fixed file above.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: anonymous
Date: April 30, 2021 11:09PM

Color codes never had five digits (second warning).

Options: ReplyQuote
Re: Changing web page background colours
Posted by: siria
Date: May 01, 2021 06:13AM

Of course... You mean 5555? Fixed above.
Always hurrying, sigh. Finally took a (slightly) longer look now, and found a missing comma too.

By the way, for quick and easy testing am using mostly macro testinjectcode. This adds CSS from clipboard contents into current page only, as internal page style.
http://kmeleonbrowser.org/forum/read.php?9,149453

debug: if probs, disable adblock while testing, it overrules page styles

Options: ReplyQuote
Re: Changing web page background colours
Posted by: Mello
Date: May 01, 2021 10:42PM

Aaah!
So you're saying that I didn't have to restart k-m a hundred times to tweak your dark css to my liking. smiling smiley

VG though, I'd be stuck without this as a basis to work from - thanks!


Is there a way to blacklist individual sites, or failing that, toggle it off/on?



Edited 1 time(s). Last edit at 05/01/2021 10:47PM by Mello.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: JohnHell
Date: May 02, 2021 01:05AM

If you use, as told above, adblock.css, you don't need to restart it.

If you use siria's macro you are INJECTING it, so you don't need to restart it BUT you'll need to reload the page to refresh its rendered code as the CSS applied can't be undone otherwise (could be, but not the easy way).



Edited 1 time(s). Last edit at 05/02/2021 01:06AM by JohnHell.

Options: ReplyQuote
Re: Changing web page background colours
Posted by: anonymous
Date: May 02, 2021 10:44AM

Colon before button should be dot before button.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: siria
Date: May 02, 2021 03:44PM

Yet another UPDATE in file attached above:
replaced ":button" with ".button", but while at it, reworked the whole BUTTON block again (that line and some lines above)

Quote
JohnHell
If you use, as told above, adblock.css, you don't need to restart it.

If you use siria's macro you are INJECTING it, so you don't need to restart it BUT you'll need to reload the page to refresh its rendered code as the CSS applied can't be undone otherwise (could be, but not the easy way).

True, but luckily, just for css-testing it's not always necessary to reload, since the last injected rules have priority. So different values can be tested easily, only when wanting to remove a rule completely reloading is necessary.
If needing to reload, it's much faster when setting the browser OFFLINE, to reload from cache (File > Work Offline)
Since I'm Off/OnLine-toggling all the time for all sorts of purposes, am using a handy toolbar button (toolbars.cfg)

Offline{
ID_OFFLINE|CloseWindow
Browse Offline: Stop all tabs at once, load from cache only. Sets only this browser offline, NOT other programs! Use history or F2>Cache for surfing.
extrabuttonshot.bmp[2]
extrabuttonscold.bmp[2]
}

Quote
Mello
Is there a way to blacklist individual sites, or failing that, toggle it off/on?

I see you're already discovering the killer probs for universal one-file-fits-all methods...
Sadly normal css-files can only include rules to run ON certain domains/URLs only, but sadly no way to EXCLUDE a domain this way sad smiley Huge prob, miss this much too. Perhaps much more modern css-engines can do it meanwhile, but current KM76 (engine originally forked from FF36) probably too old yet (?)
Hmm, on second thought... since awhile css-files can use "regexp(....URL...)", in younger KM's as mine. Have a dim memory it once worked to catch something like "*.yahoo.com", but can't find it at the moment, and suspect it gets rather complicated when trying to exclude multiple domains...

Adblock.css can be toggled easily. In Tools > Privacy, or right-click a PrivBar button, or attach this menu to any other button (in toolbars.cfg).
But the catch with those global files is, since KM1.6, toggling always reflows ALL open pages, a true PAIN with a slow machine if many tabs are open sad smiley Unless that's different in younger KM engines now, but am afraid not. IMO the KM1.5 method was far more convenient, toggling only toggled the setting but otherwise did nothing, then just the current page could be reloaded manually.
Personally am toggling adblock with yet another button on Privacy Toolbar. Perhaps that's even included out-of-box, can't remember without checking. This is in my toolbars.cfg:

AdblockButton{
macros(KM_ToggleAdblock)|_Config_Appearance
Hide most Ad-Banners (could accidentally hide a 'good' image too). Right-click to modify detailed settings.
privhot.bmp[18]
privcold.bmp[18]
}

The testinjectcode-macro needs no toggling of course, since it does nothing automatically, only when fired manually by menu.
In general, any automatic macros can include lines for $URL-checks which can be very flexible.

Quote

I'd be stuck without this as a basis to work from - thanks!

Oh yes, what I keep saying: we need simple EXAMPLES to get started, they make life SO much easier! smiling smiley Glad that file helps you, even if only a very rough draft.



Edited 1 time(s). Last edit at 05/02/2021 03:56PM by siria.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: anonymous
Date: May 02, 2021 11:11PM

Selection stopped working two versions ago.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: Mello
Date: May 03, 2021 12:24AM

Too late at night for me to absorb your post now siria.

Will go through it in detail in the next few days.

Thanks.

Even the elaborate chrome extension I mentioned gets screwed by some sites that have identical coloured fonts and backgrounds in places,

But...altho' it can disable easily on a per site basis K-m wins because it loads pages much faster and doesn't show the bright flash of white chrome displays before the extension parameters kick in.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: siria
Date: May 04, 2021 05:55PM

Updated above file again (just doubled ::selection block again)

Quote
Mello
Even the elaborate chrome extension I mentioned gets screwed by some sites that have identical coloured fonts and backgrounds in places

In general, at least for regularly visited sites specific rules can be added.
With an example URL I may have a look.

Incidentally, I just tried my updated file again and stumbled across the same prob - but quickly remembered again the culprit was probably just one of my countless own site-rule in adblock - Bingo! Changed background color from beige to a slightly transparent shade - now the page fully works with both light and dark modes smiling smiley
div.xxxx {background-color: rgba(110,110,160,0.2) !important;}

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: Mello
Date: May 05, 2021 06:02PM

I can't remmember which site it was, but the site homepage logo was the same colour
as the background - but how do you make a rule site specific in your file siria? Let's just say by way of example - google.co.uk to make the entire page green (except font and links of course ) while still retaining the overall global site background setting I have of #323232?

Also, from your file I can't work out how you are differentiating between musing to
yourself and actual rules. I don't see commenting out with # like in toolbar files etc.



Edited 1 time(s). Last edit at 05/05/2021 06:04PM by Mello.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: siria
Date: May 05, 2021 06:17PM

Quote
Mello
but how do you make a rule site specific in your file siria? Let's just say by way of example - google.co.uk to make the entire page green (except font and links of course ) while still retaining the overall global site background setting I have of #323232?

Also, from your file I can't work out how you are differentiating between musing to
yourself and actual rules. I don't see commenting out with # like in toolbar files etc.

Comment syntax in css files: /* ....bla bla.... */
(BTW this also works in JS bookmarklets)

Better readability is exactly the reason why the file contains a note to use an editor with SYNTAX HIGHLIGHTING, like Notepad++ Makes life enourmously easier! smiling smiley

Of course, there are also versions for "language" html, and javascript, etc. (kmm not outofbox, must be added by user)

An eample for site specific rules is already contained at the end of my file.



Edited 1 time(s). Last edit at 05/05/2021 06:18PM by siria.

Attachments: CSS-file_syntax-highlight_NPP.png (16.8 KB)  
Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: Mello
Date: May 06, 2021 12:02AM

Ye gods! This calls for precision. :drool:

I'd already tried adapting your example before posting but nothing had changed.
So... looking back over it again, I'd used a . instead of a : and only one space where there should have been two. Ooops!

Also, my cursor has recently started jumping forward or back in text sometimes while typing/editing which doesn't help concentration. One web solution was to uncheck "Enhance pointer precision" but that hasn't fixed it

I have notepad +++++++++ somewhere I'll dig it out.

Options: ReplyQuote
Re: Changing web page background colours / Dark Mode?
Posted by: Mello
Date: May 06, 2021 05:24PM

It is working for the first domain I've added at the foot of the file. I edited the yahoo example.....
but not for another domain I've added below it.

So I reversed the order of the two domains in the css and again only the top one worked. ???

Also, how would I do this for an htm file which I use as my custom homepage - the global background setting in myDark is overriding its settings

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: siria
Date: May 06, 2021 06:31PM

Quote
Mello
It is working for the first domain I've added at the foot of the file. I edited the yahoo example.....
but not for another domain I've added below it.

So I reversed the order of the two domains in the css and again only the top one worked. ???

Also, how would I do this for an htm file which I use as my custom homepage - the global background setting in myDark is overriding its settings

1) you must be missing a closing bracket: { }
(and again :cool: do try N++ or a similar tool.... You don't know what you're missing! I had no clue such a thing as syntax highlighting existed, for far too many years, and wasted endless time -like you now- just trying to find simple syntax typos. One of its many helpful syntax tricks it, when clicking on a bracket, it automatically highlights the matching other bracket. And when clicking the litte box on the left border with a minus inside, it collapses the enclosed lines)
Oh and another most helpful tool for finding typos: menu Tools / Error Console

2) Example local disk file URL:
@-moz-document url-prefix(file:///C:/xxxx.....) { }
Of course, "url-prefix" works for websites too, if the domain alone is not specific enough.
Or if you want a global rule for WEB sites only, this probably works (but haven't tested):
@-moz-document url-prefix(http) { }

Have fun... grinning smiley It's hard work especially when beginning, but when it finally works automatically, it's great



Edited 3 time(s). Last edit at 05/06/2021 06:41PM by siria.

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: Mello
Date: May 07, 2021 04:46PM

O'k I'm using notepad++ and after googling where the font size settings are hidden, it is much easier.

You're right about the bracket thanks for illustrating it, but I didn't forget it, I mistyped it, a ) instead of a } grinning smiley

I have the htm working... almost.
1)Reinstating the body background only changed a couple of strips
2)I guessed and changed body for table in a duplicate entry et voila that
worked.
3)Now I'm scouring the htm file in notepad ++ looking for the name(s) of the remaining two errant strips across the page.

When I designed my Homepage I located a web page layout I liked as a template, saved it and then edited it in frontpage along with a few guesses - no knowledge of anything involved. :cool:

All I do from time to time is substitute an image and accompanying url if I require a different clickable image site link



Edited 1 time(s). Last edit at 05/07/2021 04:49PM by Mello.

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: Mello
Date: May 09, 2021 06:39PM

This site is a fantastic resource for playing around with colours and codes.

https://rgbcolorcode.com/

I'm finding that on a larger external screen that article headlines and some links look rather blocky - is there a way to change just their fonts to something more slender and refined while retaining the main body text font as is?

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: JohnHell
Date: May 09, 2021 08:06PM

Just find the element that holds the headings and to set its font
https://www.w3schools.com/cssref/pr_font_font-family.asp


By the way, what do you mean by blocky?
http://kmeleonbrowser.org/forum/read.php?12,139853

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: Mello
Date: May 09, 2021 10:35PM

Thanks for the link John.

"blocky" - ha!
Well... if you click on reply and look at the top of the page, the letters
forming "K-Meleon Web Browser Forum"

are "blocky" (each letter is rather plain in design and thickset) when compared against those of "Forum List•Message List•Search•Log In" smiling smiley

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: JohnHell
Date: May 09, 2021 10:54PM

Bad example. Maybe a screenshot?

Beyond the font set by the page, it depends on the fonts installed by anyone or the setting on K-meleon to use web fonts and, then, the softness applied, so, what you see, might not be what I'm seeing here tongue sticking out smiley

And they have set different fonts.

Without smoothing:


With Cleartype:


See?

Options: ReplyQuote
Re: Changing web page background colours / CSS beginner help
Posted by: Mello
Date: May 10, 2021 07:35PM

Aha!

I will check my clear type, I have a vague memory - now that you mention it - of trying something different last time I set it.

Not so noticeable on a 10.1 inch screen (25.65cm) but too much on a larger screen.

Thanks.

Options: ReplyQuote


K-Meleon forum is powered by Phorum.