Cloning the Repository
# 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
Modifying ShadowFox Files
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 tweaksuserContent-files: contains all userContent tweaksabout_pages: files corresponding toabout:about pageswebextension-tweaks: files corresponding to webextensionswebpages: files for webpages
If you are going to modify ShadowFox files, I recommend making changes to these corresponding files.
userChrome_imports.css and userContent_imports.css
Within the root directory of the repository, there 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.
Using gulp
-
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('.'));
});