I have foxclocks installed "{d37dc5d0-431d-44e5-8c91-49419370caa1}.xpi"
I have enabled use of chrome/userChrome.css and have hidden menu items so I know it is working.
I like to hide the "closer" in fox clocks but how do I reference it in chrome/userChrome.css
I tried
#closer { display: none !important }
but didnt work?
See image below
Works by doing the same with userContent.css and turning on
toolkit.legacyUserProfileCustomizations.stylesheets to true
in about:config.
I am making an internal website for a company.
We have to use Internet explorer.
I am using SCSS to make this work.
This works well in most cases except when I want to use flexbox
SCSS changes
.container{
display: flex;
}
to
.container{
display: grid;
}
How can I tell it to stop that?
Which version of internet explorer are you using?
Internet Explorer 6-9 do not support flexbox at all.
Internet Explorer 10 supports 2012 syntax for flexbox. So to get this to work cross browser for IE11 and other browsers you could do something like:
.container {
display: flex;
display: flexbox;
}
Browsers that do not support the 2012 syntax should ignore the 'flexbox' value however if IE10 encounters it, it should use that.
Internet Explorer 11 supports the current way of using flexbox. So if you are using IE11 and encountering this issue I would double check that your CSS isn't getting overridden unexpectedly.
EDIT
Just saw that you had tagged this as IE11 - I would double check that your values aren't being overriden somewhere. Flex is known to be buggy with IE11 but I can't imagine it would choose to switch to grid unless it was getting that value from a CSS file.
I had installed magento 2.0.2 and also override the templates
I am stuck on a point that where do i write my css for my own styling.
How do i change the css of existing template.
app/design/frontend/namespace/yourtheme/web/css/source/_theme.less
start with changing the header background
.page-header {
background-color: #000;
}
check this also
Is there a way to customize the screen background in Firefox "Responsive Design View"?
I would like to insert an image (for instance a blank iphone template) and use screen recording software to simulate a mobile demo.
So far as I could tell there is no way to change the background, either via css or other addons.
I looked at Firefox OS simulator, but it doesn't cover my needs (and you can't use addons like firebug or Agent Spoofer).
Without knowing what you have tried, we have to guess at what you need to answer this question. Do you just need to know what the selectors are? Do you need to be informed as to how to apply the CSS? Are you trying to make an add-on that makes such modifications?
Without more information, here is some general information about the CSS used to style this:
Responsive mode is styled with the CSS in chrome://browser/content/browser.css and chrome://browser/skin/browser.css. Both of these are located within the omni.ja (zip archive with filename extension changed to .ja) file in the browser directory. Within that archive the above files are chrome/browser/content/browser/browser.css, chrome/browser/skin/classic/browser/browser.css, and chrome/browser/skin/classic/aero/browser/browser.css.
The background appears to be a <vbox> and have class="browserContainer" with the attribute: responsivemode="true".
As of Firefox 36.0.4 the relevant CSS is (from chrome://browser/skin/browser.css):
.browserContainer[responsivemode] {
background-color: #222;
padding: 0 20px 20px 20px;
}
There are multiple ways that you could go about making changes to this. One way would be to extract the contents of the omni.ja file, make modifications to the appropriate browser.css file then put all the files back into an archive named omni.ja and put that archive in the browser directory in place of the original file. Another method would be to create an add-on that overrides the chrome://browser/skin/browser.css file (this can be done using the override instruction in the add-on's chrome.manifest file. Yet another method would be for the add-on to directly apply the new style in one of multiple different ways.
However, probably the easiest is to create a [profile directtory]/chrome/userChrome.css file with the CSS you desire to use (you will probably have to create the chrome directory in your profile directory). As an example, the following will result in a red background for the Responsive Design View:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* Set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.browserContainer[responsivemode],
vbox[anonid=browserContainer][responsivemode]{
background-color:red !important;
}
How to increase code fonts in Firefox developer tools?
I know that there is a zoom function but I want to set the font size only for the code.
Open Firefox Developer Tools
Click anywhere within Firefox Developer Tools
Press Ctrl++ on Unix/Win or Cmd++ on Mac
To be clear, I mean the + key. You don't need to hold the Shift key while doing it.
Maybe an easier way will be to open about:config and set
devtools.toolbox.zoomValue to bigger value.
You need to modify userChrome.css under ~/.mozilla/firefox/[profile-name]/chrome with this:
/* Styles for Web developer tools */
#namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
font-family: "Ubuntu Mono", monospace !important;
font-size: 15pt !important;
}
The result looks like this:
This only changes the debugger and style editor. There's a different selector for the html inspector. Not sure what that is yet.
Open Firefox and type about:support. In Application Basics section chose Profile Folder - Open Folder. It will fire your file manager. If there is no chrome folder than create it. After that go to this chrome folder and create an userChrome.css file, open it in a text editor and add :
.devtools-monospace {font-size: 12px!important;}
Save. Be sure to restart Firefox.
UPDATE: One thing bothered me - while typing in the devtools console the text actually a bit smaller than on output (after pressing Enter). In order to make it the same we need to change font-size for its corresponding css class too. I don't know its class name yet so I just set
* { font-size: 12px !important; } globally and it works.
So sure, as stated before, the short answer is cmd++.
But the + sign might not be directly accessible on your keyboard (no numeric key pad, laptop, strange layout).
You then have to press maj first to access the + sign, like, for example on the american keyboard layout: maj+=.
Unfortunately, even if you are correctly focused on the dev tool pane, cmd+maj+= increases the font of the web view pane, while cmd+- decreases the font on the dev tool pane.
And you end-up with a web tool pane with a font size so small that it is unreadable, and no way to increase it.
Then #Thal's answer comes handy, once focused to the dev tool pane cmd+0 resets the dev tool's font size to the original.
If you want to answer the question like #Timothy_Truckle is asking for, here are a couple of them (still focus on the dev tool pane, of course):
switch to the US keyboard layout and press cmd+=
find a keyboard layout with the + directly accessible, switch to it, and press cmd++
That's for you guys wondering why some find it hard to simply press cmd++ or why some find it hard to focus on the dev tool pane (because they actually focus on the dev tool pane, but the result is as if they were focused on the web view pane).
You can specify a style for the devtools-monospace class selector. To do so, edit userChrome.css in your mozilla profile's chrome directory, and specify the CSS properties you want. For example:
.devtools-monospace {
font-family: "Source Code Pro",monospace !important;
font-size: 16px !important;
}
The userChrome.css needs to be in the chrome folder of your Firefox profile. If the folder don't exist, create it. Your userChrome.css will then override the CSS from Firefox dev tools after you restart the browser.
To find your profile in Windows OS type: Strg + R and then enter:
%APPDATA%\Mozilla\Firefox\Profiles\
Some elements of Firefox can be styled in the userChrome.css file situated in your Firefox profile's chrome folder.
As of 2018, modify/create ~/.mozilla/firefox/[profile-name]/chrome/userChrome.css with something similar to:
#-moz-document url-prefix("chrome://devtools/content/") {
* { font-size: 13px !important; }
}
Then restart Firefox.
The solution on the Mozilla forums almost has it right: https://support.mozilla.org/en-US/questions/1198481
Using Ctrl+= or Cmd+= was not ideal for me since it increased fonts for all the elements of the window, including the tab names.
Using .devtools-monospace { font-size: 13px !important;} was almost ok, but it did not affect the Debugger and Network tabs.
Using #bohag_bihu's solution had side effects for the address bar and some other text inputs.
I accidentally had my firefox developer window resized to the minimum (couldn't even read it anymore), "CMD +" (mac) didn't work for me, well only for the main web page even if the console was focused, I just hit: "CMD 0" and it came back to normal, if it can be a good alternative to anyone else ;)
As John said, the way to increase the font-size in the devtools is to use ctrl/cmd+, just like you would on a web page. In fact the devtools is a webpage. You just need to make sure that the devtools frame is focused first.
I'm afraid there's no way to only increase the font-size for the code right now.
For certain Mozilla versions (I was testing on Mozilla SeaMonkey equivalent to Mozilla Firefox 52 ESR), an explicitly set root element is required.
This will work:
#namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#namespace html url("http://www.w3.org/1999/xhtml");
while this won't:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#namespace html url("http://www.w3.org/1999/xhtml");
Once #namespace rules have been set,
you only need to add selectors and styles:
.devtools-monospace,
.CodeMirror,
.CodeMirror pre {
font-family: "Courier New", monospace !important;
font-size: 10pt !important;
}
This one works on FF => 68.0 Linux with userChrome.css. Inspector tools are now using CSS variables and the inspector tree itself is loaded in an iframe so none of the tweaks actually worked esp. with .CodeMirror classes.
You can find all the variables in this file (just copy paste below URL in FF to view source)
resource://devtools/client/themes/variables.css
For the userChrome.css part here's what solved it for me.
/* #namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */
:root {
/* Text sizes */
--theme-code-font-size: 13px !important;
}
If userChrome.css is not loaded create userContent.css and add the same rulesets. Tried and tested on FF Mac/Linux 89