I recently updated to Firefox 49 and I don't like the new color scheme (green and grey) introduced for the DevTools.
Can anybody tell me how to switch to the old DevTools theme (dark , orange , blue)?
You can select a theme for the Firefox DevTools through the settings page. You get to the settings page by clicking on the gear-like icon near the top left (fourth icon in from the left) of the DevTools. It looks like:
If those are not sufficient, you will need to look for an add-on which will provide the theme you desire, write one yourself, or make changes to your userChrome.css file (answer with code changing the position of the DevTools inspector breadcrumbs) with the CSS you desire. For the appropriate CSS classes, you could look in chrome://devtools/skin/dark-theme.css, or one of the other CSS files with DevTools themes.
Related
Sometimes at several webpages I have underlined title of page in my Firefox tabs (here is screenshot).
I have two questions related to this:
What mean this underline?
Is it possible, to do it from web page level (via CSS or JS)?
It's Firefox for MacOS, but I'm not sure if it does matter.
Are you using, by any chance, Firefox Multi-Account Container? If so the color of the line which underlines the title indicates the container the page is opened in.
I don't think you could change the color of the underline from unprivileged JS/CSS (web page), but I could be wrong. This is the source code for Firefox Multi-Account Container. Within that repository, you might be able to find the location where the underlining happens. For example, it could be this CSS code.
I just follow this tutplus tutorial for source map sass.
I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?
My sass version is 3.3.8 (Maptastic Maple)
How can I make SASS editing work in Chrome Devtools?
I made it work. SASS support is no longer an experiment: It's now a standard.
I just follow simple steps to make it work.
1) Open your inspect element on chrome and click on gear icon which appears to the top right.
2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)
3) Click on Workspace tab on the left panel just below the General tab.
4) Add your source code folder by clicking the Add folder button (close the box.)
5) Go on Sources tab and find your scss file.
Now you can make changes and hit ctrl+s it will automatically change on your style.scss.
As of Chrome 75, here's how you turn on CSS source maps.
Open the browser's Developer Tools (Ctrl+Shift+I).
Open the dropdown menu in the top right corner, and click on "Settings."
Look for the checkbox that reads "Enable CSS source maps" and turn it on.
Just my 2 cents here. Kaspersky Chome extension was blocking my CSS mapping on Chrome Developer Tools. Didn't find anywhere how to add an exception to that...
I have an image that I managed using the print screen button. I want to know the name of the font that has been used at some place in the image. Is there a way I can manage to know the name of the font using photoshop ?
If you found this online (vs a .pdf, .jpg, etc):
Using Google Chrome as your browser:
you can can go back to that site, select the font and right click select "Inspect Element". It will bring up an area through which you can see the css and therefore the font that the designer/developer used (unless they hid it, then searching through the 5 fonts suggested would be easier/faster).
AKA: find site using Google Chrome: select text in the font that you want --> right click --> select "Inspect Element" --> scroll through the CSS on the right hand side for "font-family"
Using any other browser: right click --> select "View Page Source" --> select the .css file --> find "font-family"
There is no way to do this in Photoshop. There exist some online tools that will attempt to detect fonts in images, such as this one: http://www.myfonts.com/WhatTheFont/
I wonder is it possible now to change theme in script editor from white to dark background. If not how to make Google make it.
If you are using Google Chrome, you can add the AppsScript Color extension. It has two dark color schemes to choose from.
The new Apps Script IDE in 2021 has a built-in 'high contrast mode' which makes the editor background black.
To enable: Press F1 > search for High Contrast Theme
Source: https://www.benlcollins.com/apps-script/google-apps-script-ide/#highContrastTheme (some other great tips in there too)
Go to the code editor -> click inspect -> find the element that contains the code -> find css background -> add property background-color:#ccc; or whatever color you want -> done -> works every browser
Another option is to set chrome to use auto dark mode.
chrome://flags (or edge://flags)
'Auto Dark Mode for Web Contents' - There are a couple options. I prefer 'Enabled with increased text contrast'
It's a good middle ground between AppScript Color Extension's Dracula (not enough contrast) and Monokai (too much contrast) options. It affects ALL WEB PAGES though.
It's the "use high contrast mode" in the settings on a Chromebook. Otherwise try the extension.
Feel free to use our free extension that adds color schemes and search functionality to the new Monaco editor https://www.swroot.com/black-script
Searching in the Mozilla classic.jar, I found a dialog.css (at ../classic/global/dialog.css), but no window.css nither panel.css.
So, where am I suppose to change the default background-color of a window in my theme?
Obs. I mean not only the main browser window, but any window that opens with no specified background-color, I want to change the default color.
The CSS for the window is in global.css which I already linked you to in another answer. The CSS for a panel is in popup.css.