I'm using Firefox 48.0 on Ubuntu 14.
My profile directory is ~/.mozilla/firefox/v2fcrlqx.default
I've put a file in there called userContent.css with a simple test rule in it:
body { background-color: red; }
But I'm not getting any results.
I also tried creating a folder called Chrome beneath my profile directory and copying userContent.css into that, but that doesn't work either.
Has Firefox dropped support for user stylesheets or I am doing something wrong?
User styles are now disabled by default in Firefox.
To activate them:
Type about:config?filter=toolkit.legacyUserProfileCustomizations.stylesheets in the address bar. Set the option to true.
Restart Firefox.
hope it will help.
I've fixed it. The user stylesheet has to go into a directory called chrome (not Chrome) below the profile directory.
Related
I believe I can change internal CSS. Or may be somebody already has a solution.
You can apply css to your firefox browser with this method.
first find your firefox user profile based on your operating system. In linux userProfile directory is :
/home/--USER--/.mozilla/--something--.default/
then,make folder called "Chrome".
there are 2 files that can change css of your firefox,"userContent.css" and "userChrome.css".
userContent.css can apply css to your firefox tabs while userChrome.css apply to your firefox appearance,like developer tools and navbar.
So to change your start page(original name is about:home),make userContent.css file inside chrome folder. after all your directory tree should look like this:
/home/--USER--/.mozilla/firefox/--something--.default/chrome/userContent.css
then to change about:home style,use this code inside userContent.css:
#-moz-document url("about:home"), url("about:newtab") {
//insert css here
}
it should work perfectly and i tested it but if anything happen,i would be happy to help you
UPDATE
userprofile directory on windows is :
C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default
and mac OS:
Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default
It works beautifully in Chrome but in Safari, Firefox and Opera, the menu is broken, and some styles don't apply.
The theme includes css reset and normalize. I think I have to go and add vendor specific styles but I don't know where to start. Any guidance would be appreciated.
The problem is style.css is not getting loaded. See this request result:
Request URL:http://xxx/wp-content/themes/wright/style.css?ver=4.3.1
Request Method:GET
Status Code:404 Not Found
Chrome works because it is caching the missing style, making you think it is working.
Check to see why style.css is not being loaded.
In case anyone else comes across this problem, I solved it by creating a custom.css and putting in my css folder, registering and enqueuing custom.css, and clearing (not deleting) style.css.
This issue is under Chrome Version 39.0.2171.95 m.
So I have the above. You can see that the element (it's some text) has a color set (via a .css file) - however, the user stylesheet is setting the background to the same colour. This code:
background: rgb(255, 145, 0)
It cannot be disabled and I cannot find it anywhere in my code. Where might this be being picked up from? It's not in my .css or within my .php script. Where does the user stylesheet come from if not within a .css file?
The Google Chrome plug-in Hootsuite was causing the issue. Once removed, all OK.
I am experiencing an issue with production build version of the Sencha Touch based application not being able to apply styles properly in IE10 and Chrome.
Steps to reproduce:
Main.js
Ext.define('Lab.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'panel',
cls: 'MyFirstLogo',
itemId: 'firstLogo'
} ]
}
});
SCSS file - app.scss
.MyFirstLogo{
height: auto !important;
min-height: 100px;
min-width: 404px;
padding: 0px;
background-image:url(../../resources/images/test1.jpeg);
background-repeat:no-repeat;
background-position: left;
}
Make sure the background image URL is like this in resources/sass/app.scss - ../../resources/images/test1.jpeg.
Run "sencha app build production" in project root (Lab/)
Access the application in IE10 64bit (Win 7) : http://localhost/lab/build/production/Lab/
Images are not shown at all in IE10. However, when trying this in Chrome it works well. Chrome somehow is able to convert the ../../resources/images/test1.jpeg to http://localhost/lab/build/production/Lab/resources/images/test1.jpeg but IE10 doesn't do it and fails to show the image. This way it also works in my local development environment as it goes with my project structure.
In order to make it work in IE10, I have changed the image URL from ../../resources/images/test1.jpeg to resources/images/test1.jpeg (This actually makes sense as resources/ directory is in the project root) in resources/sass/app.scss and rebuild it for production. In this case image starts to appear in IE10 but now when I use Chrome - Image does't show up and Chrome is trying to retrieve the image from this URL which in not right: http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpeg, and it fails. This way it DOES NOT also work in my local development environment.
This issue happens for other resources as well like "fonts".
Could you please help me understand what's going on here with Sencha's Production Build version not working in both IE10 and Chrome at the same time? Is this this bug with Sencha Touch or Chrome or I am missing something here?
It turns out to be the known bug in Sencha Touch as confirmed by the Sencha people. Check this link: http://www.sencha.com/forum/showthread.php?266275. Thanks #peter and #arthurakay for you help. If I need a workaround or further discussion on this. I will start the discussion again. Thanks guys!
Why are you going back so many directories in the relative file path?
Whether you're in development or production, the CSS file lives at:
{app_root}/resources/css/app.css
Assuming your images are here:
{app_root}/resources/images/
...then your filepaths should look like this:
background-image:url(../images/test1.jpeg);
FYI I'm assuming Touch 2.3 and Cmd 4.0.x since you didn't specify.
The address you access the application (in any browser) becomes the page base address. In your case it's http://localhost/lab/build/production/Lab/
You can confirm this by printing alert(document.location.href).
Check the trailing slash, please.
Address ../../resources/images/test1.jpeg then means http://localhost/lab/build/production/Lab/../../resources/images/test1.jpeg and translates to incorrect
http://localhost/lab/build/resources/images/test1.jpeg
Modify the relative address to ../resources/images/test1.jpeg to get
http://localhost/lab/build/production/resources/css/resources/images/test1.jpeg
You can always verify the resulting address by entering it to the browser's address bar.
Both IE and Chrome translate paths correctly as this is their basic task.
I have found a workaround to make images/icons visible on both IE10 and Chrome.
Here, CSS property given for any given class containing "background-image" should contain working URL's for both IE10 and Chrome as follows :
.menuHome {
background:url(resources/icons/menu/Home.png),url(../icons/menu/Home.png) no-repeat center;
}
Here both URL's are present in the CSS property. So IE10 will fetch image from 1st URL and Chrome will fetch image from 2nd url.
The site I am currently working on is http://rattscallion.com/ I am focusing my efforts on getting the site to look proper in IE.
I was having trouble getting the frame on the pages (look at /murals.html for the page I'm working on first). IE9 said that the inline-style stated that the background-image was "none," so it crossed out the original background image. I figured it might be getting this from somewhere on the main stylesheet so what I did was make a new frame that only exists in IE and style it only in the IE stylesheet. Unfortunately this also doesn't work...it still says that an inline-style is setting the background-image to "none", but there is no such thing!
I double-checked and this is happening in IE9 standards mode. So why is this happening? Can anyone help figure out how to "force" it over what IE perceives as the inline style?
Well there's your problem:
CSS was ignored due to mime type mismatch
normalize.css
If you check the network calls the normalize.css is received as text/plain instead of text/css. You should install static content (under server roles) in your IIS as for some weird reason it's not installed by default. I'm betting one WHOLE dollar you're using IIS.
You could have just copy pasted the normalize.css into a server side css file so it's not accessed remotely.
I got it working by doing the following:
remove #framePos img{ display: none; } from styles-ie.css
remove unitpngfix.js - the png filter fix was for ie6 and serves no purpose on ie9 (it's actually one of the reasons the frame does not show)
Note: the frame.png pic is place in lots'o'places as background so you should consider a little clean up of the css files
Another Note: unitpngfix.js replaces the frame.png with the clear.gif and places transparency filters on every png element. So tinkering on css will not do anything until you remove the js.