Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Hide or show elements of a webpage with a hotkey?

  • 6 replies
  • 1 has this problem
  • 25 views
  • Last reply by heday33967

more options

Hello. I’ve recently made the switch to Firefox due to its deep UI customizability and its open ended scripting capabilities.

I find myself using browser hosted “Apps” more and more these days and have recently realised they are open to being customised through developer tools. Hiding elements such as a side bar or a persistent website header you don’t really care for.

I am wondering is it possible to automate this processes? So instead of opening the developer tools every time you visit a site, instead you configure it once and then its automatically hidden from view.

Secondly, would it be possible to trigger the hiding of elements through a hotkey? So for example you can show or hide a side bar just when you need it?

Just trying to get consensus on what is possible or not and see which direction I need to go. Thanks!

Chosen solution

The bookmarklet I posted above works as a toggle as it checks the current display state (defaultView.getComputedStyle). You click it once to run the code to hide the element specified by the selector, in this case ".questions-sidebar". You click the bookmarklet another time to run the code once again and it will re-display this element. This only works if you run the bookmarklet on the page where you want to hide this specific content and this is similar to running JavaScript code in the Web Console. This code works in the Web Console, but it is more convenient to have such a bookmarklet available as a button on the Bookmarks Toolbar.

Using code in userContent.css is only convenient if you want to hide specific content permanently although in some case it is possible to unhide the content via a bookmarklet (only possible if the !important flag isn't used) or by using the Inspector to override rule(s) in userContent.css.

Read this answer in context 👍 1

All Replies (6)

more options

Hi, we're using uBlock Origin for hiding things.

Helpful?

more options

You can alternatively use rules in userContent.css to hide content on specific domains or pages or otherwise modify the appearance.

An example with code in the userContent.css file.


@-moz-document domain(support.mozilla.org){
 .questions-sidebar {display: none !important;} /* hide sidebar*/
}

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

Helpful?

more options

Another possibility is to use a JavaScript bookmarklet to toggle a specific element.

javascript:/*toggle style*/(function(){
var d=document,s=[{s:'.questions-sidebar',o:0}],aP=[{p:'display',t:'none',v:'block',i:1},{p:'visibility',t:'hidden',v:'visible',i:1}],pP,i,j,n,N,S;
for(j=0;S=s[j];j++){
pP=aP[S.o];n=d.querySelectorAll(S.s);for(i=0;N=n[i];i++){
N.style.setProperty(pP.p,((d.defaultView.getComputedStyle(N,'').getPropertyValue(pP.p))==pP.t)?pP.v:pP.t,pP.i?'important':'');
}}
})()

Helpful?

more options

Guys, thank allot for your help

Cor-el Thank you so much with your two suggestions. I have been using pre configured CSS files to mostly controll Firefox/Thunderbird appearances, So its great to know that you can extend it to control web content as well. I definetly plan to learn more about it now.

Your first code example is excellent but I have a follow up question to your second one. I did a qucik rudimentary read up on bookmarklets, apparently they are Javascript code you add to a URL before hitting enter

Do bookmarklets require to reload the page in order to toggle the elements visibility?

Lastly, Can bookmarklets be excuted outside of a browser, say from a folder on File explorer just like you would execute a .url file? I have allot more controll over windows with scripting language such as Authotkey and some Python as well. So it would be really nice to know.

Modified by heday33967

Helpful?

more options

Chosen Solution

The bookmarklet I posted above works as a toggle as it checks the current display state (defaultView.getComputedStyle). You click it once to run the code to hide the element specified by the selector, in this case ".questions-sidebar". You click the bookmarklet another time to run the code once again and it will re-display this element. This only works if you run the bookmarklet on the page where you want to hide this specific content and this is similar to running JavaScript code in the Web Console. This code works in the Web Console, but it is more convenient to have such a bookmarklet available as a button on the Bookmarks Toolbar.

Using code in userContent.css is only convenient if you want to hide specific content permanently although in some case it is possible to unhide the content via a bookmarklet (only possible if the !important flag isn't used) or by using the Inspector to override rule(s) in userContent.css.

Helpful?

more options

Cor-el I am intrested both in toggling and hidding permanently. Thanks allot for fleshing this out for me. Now I know which many routes are available to me as I learn more about CSS and JS.

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.