Firefox Customs

3 readers

1 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

Checkboxes in Clear Recent History (fedia.io)

submitted 5 months ago* (last edited 5 months ago) by [email protected] to c/[email protected]

5 comments fedilink hide all child comments

The question about checkboxes inspired me to try to change the colour of unchecked checkboxes in Clear Recent History (ctl+shft+del) in History > Clear Recent History.

I found the menu command in the Browser Toolbox and I used that to identify the modal. On my system is was the 343rd menuitem. My code doesn't work but I don't know why.

#menu-history-clear-recent-history{ .checkbox-check { appearance: none !important; background: #e2cfb6; } }

top 5 comments

sorted by: hot top controversial new old

[–] [email protected] 2 points 5 months ago (2 children)

Your example css here kinda makes me believe that you have a wrong idea about how selectors work. What you have written sounds like your intention is to create a sort of scope with the outer #menu-history-clear-recent-history selector and then apply the rules to elements matching .checkbox-check within that outer scope - that is, to match .checkbox-check elements which are inside #menu-history-clear-recent-history.

That kind of construction doesn't exist in css and thus this is invalid rule. What you would do instead is like this:

#menu-history-clear-recent-history .checkbox-check { appearance: none !important; background: #e2cfb6; }

The space character between selectors (the descendant combinator) means "what comes after it needs to be inside what came before it". More about selectors at MDN

[–] [email protected] 1 points 5 months ago

Thanks for that. I will look at the link.

[–] [email protected] 1 points 5 months ago (1 children)

I amended the code. I am printing it here to be sure. The colour of the checkboxes has not changed. Back to the drawing board. I will try adding !important to the colour. #menu-history-clear-recent-history .checkbox-check { appearance: none !important; background: #e2cfb6; }

[–] [email protected] 1 points 5 months ago (1 children)

Okay, so I looked a bit more and there's few other things at play here.

First, there is no element with id menu-history-clear-recent-history anywhere. There is one menuitem in menubar > history > Cler recent history with a data-l10n-id="menu-history-clear-recent-history" attribute, but that is not the same thing as id attribute (which you can match with a # prefix)

Second, that menuitem merely opens the sanitize dialog, but contents of tha dialog are not in any sense inside that menuitem. Thus, you cannot use the a selector for the menuitem as an ancestor for the checkbox in your selector.

The dialog is separate sub-frame with its own document and all so you could do this in a couple of different ways: You can either write #SanitizeDialog .checkbox-check { appearance: none !important; background: #e2cfb6; } because the sanitize dialog root element has an id attribute SanitizeDialog - or you could make your rule really scoped to the sanitizeDialog document like this:

@-moz-document url("chrome://browser/content/sanitize.xhtml"){
  .checkbox-check { appearance: none !important; background: #e2cfb6; }
}

These are different things because if there ever was some situation in any Firefox window where a .checkbox-check was inside any element with id SanitizeDialog then it would match. The second option will only ever match all .checkbox-check elements inside a document with that specific url.

[–] [email protected] 1 points 5 months ago

Thanks for your help. My idea was misconceived. If the 'image' is hidden, there is nowhere to insert 'checkmarks'.