-
Notifications
You must be signed in to change notification settings - Fork 58
Home
What should I know before I get started?
How do I install and/or modify ShadowFox?
- I just want to use ShadowFox as-is. No customization, no command line programs.
- I want to be able to customize ShadowFox: I do not want to use everything in this repository, or I want to make significant modifications to certain files.
In short, userChrome.css and userContent.css are style sheets that can alter the appearance (but not function) of Firefox's user interface (UI) and webpages, respectively.
Due to limitations in available API's, webextensions currently cannot alter the UI with the same freedom userChrome.css can.
Similarly, webextensions are not granted access to some webpages, such as those hard coded into Firefox (e.g. about: pages) and the addon store. userContent.css therefore must be used to stlye these pages.
Helpful Links
userChrome.org - a more detailed look at what userChrome.css is, how to alter it, and a collection of resources.
Both files must reside inside a folder titled chrome (case sensitive) within your Firefox profile directory. The chrome folder does not exist by default, so if you don't see it, you will have to create it yourself.
-
Visit
about:supportby entering this address in the url bar. -
Scroll down to
Application Basics. -
In the
Profile Foldersection, click the button that says "Open Folder", "Show in Finder" or "Open Directory" (OS dependent).
On Windows and Linux, this should take you directly to your profile directory. On a Mac, this will take you to a list of Firefox profiles, with the one you want highlighted. In this case, double click that folder to open it.
ShadowFox is designed to be modular so that you, the user, can decide what tweaks are used on your profile. The degree to which you wish to customize ShadowFox, your willingness to use command line programs and, unfortunately, your operating system, will all play into your approach to installation.
If this describes your use-case, you can simply download userChrome.css and userContent.css from the root directory. These two files contain all tweaks made in the repository and can be placed inside your chrome folder.
Alternatively, you could download chrome.zip from the latest release, unzip it, and move the resulting folder to your profile directory. Please be aware, however, that the releases will not always contain the latest updates and is more used to mark significant changes to the repository.
I want to be able to customize ShadowFox: I do not want to use everything in this repository, or I want to make significant modifications to certain files.
If this is your use-case, I would highly recommend the use of git - a widely used, open-source, version control system. git is easy to learn and there are numerous resources and tutorials available on-line.
This type of user is also likely to have other userChrome/Content modifications. As such, it may be best to isolate ShadowFox in it's own directory within your chrome folder and append a single @import statement at the top of your existing userChrome.css and userContent.css files.
# Move to the chrome directory within your Firefox profile
cd path_to_profile/chrome
# Clone this repository to a folder titled ShadowFox
git clone https://github.com/overdodactyl/ShadowFox ShadowFox
ShadowFox is designed with modularity in mind. Each tweak is contained within it's own file. The basic project structure is shown below:
-
userChrome-files: contains all userChrome tweaks -
userContent-files: contains all userContent tweaks-
about_pages: files corresponding toabout:about pages -
webextension-tweaks: files corresponding to webextensions -
webpages: files for webpages
-
If you are going to modify ShadowFox files, I recommend making changes to these corresponding files.
Within the root directory of the repository, their exists userChrome_imports.css and userContent_imports.css.
As opposed to userChrome.css and userContent.css, these files simply contain @import statements for all the tweaks in the repository. This can therefore be used to prevent specific tweaks from being used (by deleting or commenting out the corresponding lines), or to load any changes you have made to the repository.
If you used the methods suggested above, you will want to add
@import "ShadowFox/userChrome_imports.css";
to the top of your userChrome.css file located directly in you chrome folder. Similarly,
@import "ShadowFox/userContent_imports.css"; to the top of your userContent.css file located directly in you chrome folder.
Important:: A current bug in Firefox prevents the proper use of @import statements for some Linux users. If this is the case, you will have to use gulp to concatenate .css after any modifications made or to specify which tweaks are used. Please see below.
Other users may be interested in using gulp as well as having a single userChrome/Content.css file may result in a slightly faster loading time.
-
Install node.js
-
git clone https://github.com/overdodactyl/ShadowFox
-
Install the Gulp CLI
npm install -g gulp-cli
-
Install gulp and gulp-concat-css
npm install --save-dev gulp gulp-concat-css
-
Run a gulp task predefined in
gulpfile.js, or create your own.- ex:
gulp userContent_all - The following task writes
color_variables.css,all_about_pages.cssand all css files in theuserContent-filesdirectory, in that order, to a file calleduserContent.cssin the root directory.
- ex:
/* Add everything to userContent */
gulp.task('userContent_all', function() {
return gulp.src(['color_variables.css', 'userContent-files/all_about_pages.css', 'userContent-files/*/*.css'])
.pipe(concatCss('userContent.css'))
.pipe(gulp.dest('.'));
});