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
Related
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.
I created a test extension, to change a few things and maybe add some features to Firefox built-in devtools.
I set up a basic extension, with content css and the usual files, and chrome.manifest:
content devtooltweaks content/
style chrome://browser/content/devtools/framework/toolbox.xul chrome://devtooltweaks/content/devToolStyle.css
Although I can go to "chrome://devtooltweaks/content/devToolStyle.css" and see that file exists in the browser, DOM inspector doesn't show the style applying, I can't see the stylesheet listed either. It's been a long time since I did extension development, is there a step I'm missing here? Or is it not permitted to change the built in dev tools, similar to how it's not permitted in Chrome?
It looks like the style is imported, but not shown as a stylesheet in the DOM Inspector, I also may not have been using firefox -purgecaches. It's working now.
I have a top docked toolbar, and I used firebug to inspect the element to find the css class, which was:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
}
I changed this to:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
background-color: transparent !important;
}
Now I see the toolbar as transparent in Firefox, but in chrome it still has the default background color (blue). Why does this happen? Maybe I don't need to use this technique here, but there are definitely instances where I need to find a very specific css class using firebug. Any help or information?
Note: I tried using the Cls attribute of the toolbar with the same result.
In Chrome the background image (it's a gradient) works meanwhile in Firefox it is ignored.
So all you have to do is set the background-image and the background-color of .x-toolbar-dark like this:
.x-toolbar-dark{
background-image: none;
background-color: transparent;
}
http://jsfiddle.net/awHkT/1/
Sencha is for webkit browser, so it's CSS is made for webkit browsers like Chrome or Safari. So this kind or problem must be because there's a CSS rule with a -webkit prefix that is hence only applied on webkit browsers and ignored in firefox.
But anyway, toolbars have a gradient background, so if you want to override it you will need to do like so :
background-image: none;
background-color: transparent;
Two last thing
It's bad practice to override Sencha's CSS. Use the the cls config on you toolbar to assign it a CSS class and then use this class to style your toolbar.
Don't test you app with Firefox, but with Chrome of Safari.
Hope this helps
Can you creating a custom theme installing SASS and Compass. The instructions for installing SASS and Compass vary slightly for Mac and Windows users. Mac users will need to open the Terminal application and type the following:
i. sudo gem install haml
ii. sudo gem install compass
You will need to authenticate with your username and password to complete the install.
Windows users need to open the command line and type the following:
i. gem install haml
ii. gem install compass
Installing Ruby
Mac users get a break, since Ruby is already installed on OSX by default. Windows users should download the Ruby installer from rubyinstaller.org.
Once the installation is complete, we are ready to set up our folders and begin using SASS and Compass.
Creating your custom theme
The next thing you need to do is create your own theme SCSS file. Locate the sencha-touch.scss file in ../lib/resources/sass, and make a copy of the file. Rename the new copy of the file to myTheme.scss.
Now, you need to tell the index to look for your new theme. Using your previous example files, open your index.html file, and locate the line that says the following:
<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">
Change the sencha-touch.css stylesheet reference in your index.html file to point to myTheme.css:
<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">
SCSS and CSS
Notice that you are currently including a stylesheet from the css folder, called sencha-touch.css, and you have a matching file in the scss folder, called sencha-touch.scss. When the SCSS files are compiled, it creates a new file in your css folder. This new file will have a suffix of .css instead of .scss.
.scss is the file extension for SASS files. SCSS is short for Sassy CSS.
Now that you have your paths set up, let's take a look at the theme file copy we made. Open your myTheme.scss file. You should see the following:
#import 'sencha-touch/default/all';
#includesencha-panel;
#includesencha-buttons;
#includesencha-sheet;
#includesencha-picker;
#includesencha-tabs;
#includesencha-toolbar;
#includesencha-toolbar-forms;
#includesencha-carousel;
#includesencha-indexbar;
#includesencha-list;
#includesencha-list-paging;
#includesencha-list-pullrefresh;
#includesencha-layout;
#includesencha-form;
#includesencha-msgbox;
#includesencha-loading-spinner;
This code grabs all of the default Sencha Touch theme files and compiles them into a new CSS file located in the css folder. If you open up the sencha-touch.css file in the ../lib/resources/css folder, you will see the compressed CSS file you were previously using. This file is pretty huge, but it's all created from the basic commands.
The best part is that you can now change the entire color scheme of the application with a single line of code.
Base color
One of the key variables in the Sencha Touch theme is $base_color. This colour and its variations are used throughout the entire theme. To see what we mean, you change the colour of your theme adding the following to the top of your myTheme.scss file (above all the other text):
$base_color: #d1d3d4; //for example, color gray
Next, you need to re-compile the SASS file to create your stylesheet. From the command line, you need to change into the sass folder where your myTheme.scss file lives. Once you are in the folder, type the following into the command line and hit Enter:
compass compile
And have fun :), this will update your myTheme.css file with the new $base_color value. Reload the page in Safari or FF or anywhere, and you should see a new gray look to your application.
And look at this in http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
I hope this helps. :)
Is there some way to style an external webpage, so that when it opens in our browser, it is styled using a local css file (perhaps even a javascript). (for Firefox/Chromium)
It is possible to edit userContent.css for firefox (and equivalent file for chromium), but this in turn effects every website that would open on the browser.
Firefox has the -moz-document domain(...) rule, while Chrome has the Stylish extension
Greasemonkey!!
Thats what userscripts are for.
I would like to apply a CSS stylesheet to all page views in a Firefox browser using a menu option and be able to toggle this when required. (The functionality I want exists in IE: Tools | Internet Options | Accessibility | Format Documents Using my Stylesheet (although I think this may affect pages outside of simply IE).
You could use the file userContent.css lying within the directory named chrome in your Mozilla Firefox profiles directory. There is also an example file named userContent-example.css.
you can use Stylish, you can define global styles in firefox and ability to switch it on and off fast from Firefox.
Usage page.
Global styles, you can see code and how it is done.
There is another Firefox addon called Platypus which which adds a toolbar for editing site styles. It does require you to install Grease Monkey.
I just installed Stylish and my first impression is that is nicer than Platypus, especially when it comes to sharing your styles with others. But I'll reverse my judgment as to which I think is better when I have more time to compare them. :)