[UPDATING] - best way to setup 'CustomCSSforFx' updates

[Merseybuoy]

Hi,
I only found this project yesterday, and since then there have been two updates. What is the best way to update without losing all the changes I've already made to your userchrome.css? Thank You.

[Aris-t2]

There is no perfect solution. Main files content changes often and sometimes the imported files get renamed too.

You could create own userChrome.css and userContent.css files and only copy and paste the stuff you need there from release files, while always replacing css, image and xml folders.
At least I think that is what userOperaFF might have tried to say.

[Merseybuoy]

OK, I see. Thanks for the prompt replies.

[Pizzapops]

When a new CustomCSSforFx comes out, I rename the current Chrome folder to version #, IE. Chrome133. Then I create the new Chrome folder. Using EmEditor's compare feature on the two userChrome.css and userContent.css files, I set my preferences and can see what has changed. I also add 1 image file and 2 css files of my own. After doing this for the last 20+ versions, I find it only takes a minute or two. Directory Opus makes file manipulation a breeze.

[Merseybuoy]

I now have a similar strategy to Pizzapops. Using the compare feature in Notepad++, it doesn't take long to see which lines require enabling or disabling.

[MarkRH]

I ended up copying the @import lines into my userChrome.css file and put this project into /profile/chrome/classic.

@import url(./classic/css/tabs/tabs_below_navigation_toolbar.css); /**/

When a new version comes out, I rename /classic/ to /classic133/ for example and create a new /classic/ folder to put the new project in. I then do a file comparison to make sure none of the @import lines have changed names or something. This makes it much quicker than having to always comment or uncomment lines to match what I had.

[stonecrusher]

I think at some point in the future the update frequency will be lower and as it is not security sensitive, you don't need to update all the time as long as you don't experience bugs by yourself or need new features.
Updating every new version would be too annoying for me, although comparing files worked well so far.

[gombszem]

It could be solved:

1. The search bar is returned to the bottom
2. Restart button, or row on the File tab

Thanks

[Speravir]

I’d suggest to use a diff program that is able to compare directory/folder structures. I myself having Windows use WinMerge2011 which as I just noticed has a wine version, too. but there are more. If you search for a free folder diff program you will also get results from helpful pages comparing these programs not only for Windows.

With Winmerge I compare the existing installation with the update (zip files can be compared without unpacking). I copy updated and new files inside of the diff. I update userChrome.css and userContent.css inside the diff. The last step takes the most time (depending on how much you’ve altered the settings), but is better then starting again and again from zero.

[tvanassche]

I've been toying with the idea of creating a small configuration tool (or site) in .NET/Mono for this. The tool would create the config files automatically based on the options you chose. I've also got a couple ideas to make updating to newer versions very easy.

I'm not sure if I'll ever actually get around to actually create this tool. But I've got 2 weeks of vacation coming up, and if it's OK with Aris-t2, I'll look into starting to work on it then.

[stonecrusher]

Another approach might be adapting this .bat script that was written to update user.js.

[Aris-t2]

@tvanassche
Sure, I'm fine with it.

[Gittyperson]

I'll make a suggestion: assign a number for each single tweak (001, 002 etc.) and make it clearly visible in the .css file, so users can note the tweaks they are interested in, and easily find and re-enable them (after overwriting them with an update, for example).

[stonecrusher]

@Gittyperson I don't think that that's a good concept as tweaks can be deleted, renamed and added. So after a while you'd have a mess of unordered numbers not winning anything. Unless you give up grouping by topic completely.

[Gittyperson]

Shouldn't be a problem if the numbers are unique. If a tweak is no longer available then the number will not be re-used (tw001, tw003, tw004, tw006 etc). If Aris-t2 feels a tweak has changed significantly then he can just give it a new number. These will only be description/helper numbers for quickly locating the tweaks, nothing more. They cannot interfere with the actual usage of the tweaks in any way.

[stonecrusher]

So it could look like this:

/* navigation toolbar buttons appearance - only use one at a time *******************************/
@import url(./css/buttons/buttons_on_navbar_classic_appearance.css); /* tw001 */
/* @import url(./css/buttons/buttons_on_navbar_classic_appearance_v2.css); /* tw018 */
/* @import url(./css/buttons/buttons_on_navbar_glass_appearance.css); /* tw002*/
/* @import url(./css/buttons/buttons_on_navbar_osx_appearance.css); /* tw003 */

/* squared buttons - only use one at a time (based on Firefox version) **************************/
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx57.css); /* tw004 */
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx58.css); /* tw059 */

/* navigation toolbar buttons - button roundness (edit file to set different roundness) *********/
/* @import url(./css/buttons/buttons_on_navbar_button_roundness.css); /* tw005 */

Or did I get you wrong? Not a big improvement in my eyes as we already have unique file names to search for.

[Gittyperson]

Yes, something like that. The 'tw' part would help in making the quick search more effective ('003' might not be enough for an instant result).

[stonecrusher]

I mean it doesn't hurt, but it may result in additional future work for Aris when updating? However, I'm not in a position to decide.

[Aris-t2]

I believe this method would leave too much room for misunderstandings. Most of the time only target files change and adding a number to the corresponding tweak inside userChrome.css might be forgotten or overlooked by me.

A better solution is looking watching commits and especially monitoring userChrome.css changes. All the magic like new settings and file name changes happens there.

It is save to update css, image and xml folders without losing anything (if not modified manually).

[ao2]

Hi,

this is how use CustomCSSforFx:

1. I enter the chrome dir under my profile, e.g.:

   cd ~/.mozilla/firefox/8t2820kedf.default/chrome
   

2. I clone CustomCSSforFx as a subdirectory of chrome/ with git:

   git clone https://github.com/Aris-t2/CustomCSSforFx
   

3. In userChrome.css I reference the files in the subdirectory, notice the first part of the path:

   @import url(./CustomCSSforFx/classic/css/buttons/icons_colorized.css); /**/
   ...

4. When I want to update CustomCSSforFx I run git pull in the CustomCSSforFx directory, this leaves userChrome.css untouched because it is in the parent directory.
5. If I need to override some details I do that in a local branch of the CustomCSSforFx repository (whch I can rebase when there is a new release), or even directly in userChrome.css after all the @import lines.

Ciao,
Antonio

[rddim]

Hello,
There are scripts for updating the user.js and prefs.js files from gHacks Technology. I think and believe that it can be adapted for our needs from someone with a good skils in *.bat and *.sh. More is explained in the Wiki. The repo is here: https://github.com/ghacksuserjs/ghacks-user.js

[atomGit]

old issue, but i wanted to comment on this

indeed a script could be written to diff versions, but i'm wondering if there might be a better/easier way...

i wonder if a companion add-on might be a better solution where it would import, compare and export the files - a GUI that lists only the relevant options (auto-hides options that don't match FF version) and allows users to easily select which options they want to enable - an add-on would also allow a GUI color picker to be used, as well as more detailed descriptions and perhaps even images to show what an option affects

[albino1]

I almost posted something similar yesterday. There's so many changes, and so many of them are version dependent, that's it's getting hard to keep track. A GUI addon that just allowed you to navigate all of that would be super helpful.

[Aris-t2]

Creating a GUI would require a huge amount of time and it would obviously require being kept up-to-date.
It would basically require to create something like CTR was, but being able to import styles from here.

I doubt anyone will create something like that. Keeping CSS up-to-date is already very time consuming.

[Aris-t2]

This is the easiest way to update to new releases in my opinion:

1. Backup chrome folder
2. Replace current folders inside chrome folder with new folders from latest release
3. If something changed in an unexpected way, look into commits userChrome.css and userContent.css files and copy over changed or new entries of settings you are using.

[petsam]

Since this project is my favorite for changing FF look, I have created a bash script to make updates (and installation easy.
Being a bash script, it is easy for Linux users, but I believe it would be easily converted to a Windows script, from a Windows user (I have been Linux-only user for more than ten years, sorry...).

https://github.com/petsam/prettyfirefox

• The idea is to include more than the current repo,
• userChrome.css and userContent.css are transformed and saved as .readme files (they are actually mostly informational, since the actual active @import lines are comparatively lesser)
• Keeping personal settings in my_user{Chrome,Content}.css, confirming a link from user{Chrome,Content}.css.
• It is possible to install a specific version.
• If there is an existing chrome folder, it is backed up.
• I wish to continue with a feature to compare old with new files, but it needs a defined standard.

Depending on the users' response (dev's @Aris-t2 opinion is a priority, of course), I may add more features.
Feedback is more than welcome!
Bugs are always there ;)

[Aris-t2]

@petsam

I think making updating easier and more comfortable is a great idea.

[atomGit]

hi @petsam - i know essentially nothing about bash scripting, but i think there's another similar script that may be useful to you and it includes backup and diff functionality - see the updater.sh and updater.bat files at ghacks-user.js

[petsam]

see the updater.sh and updater.bat files

Thanks!
I"ll have a look.

[atomGit]

in addition to @petsam script, here's another possible alternative that uses some RegEx...

1. find and copy all uncommented lines ( ^@ ) for userChrome and userContent and stick them in separate text files (userChrome_regEx.txt and userContent_regEx.txt)
2. remove everything outside of the double quotes (replace @import with empty string, replace ;.* with |
3. replace all . with \.
4. remove last |
5. (if necessary) remove space after all |

when a new version lands, prepend all uncommented lines with /*, then using the string in the appropriate text files, do a RegEx search for the string to find all lines that need to be uncommented

not a complete solution obviously, but it saves some time

[petsam]

here's another possible alternative that uses some RegEx...

You"ll be surprised to see that happening with an AI assistant ;).
My script is doing what you suggest (and more) with user interaction for available choices, when required.

I would appreciate some feedback, so I can make it as foolproof as possible, or improving interaction etc.

[atomGit]

hi @petsam - i didn't forget about you, i was just busy restoring my website after the nut that owned my previous hosting company decided to play O.K. Corral with the coppers

i'm going to pass on testing your script - i'm not super happy with the dos2unix dependency, plus i keep the 'aris-t2' stuff in a subdirectory of /chrome and i'm not sure how the script would handle that - i think maybe it might also be more intuitive if the script were located in the FF profile directory

hope you're not disappointed and please don't take it personally

[petsam]

hope you're not disappointed and please don't take it personally

Why would I? I asked for feedback ;)

i keep the 'aris-t2' stuff in a subdirectory of /chrome

I thought this repo is "designed" to work inside the chrome folder. I followed this convention.
If you have another idea, please, explain how it will work. I assume with an @import from original userChrome.css and userContent.css?

i'm not super happy with the dos2unix dependency

This is used to clean Windows line-endings, that break usual bash/Linux search-and-repair commands.
If @Aris-t2 is convinced to set Linux-type line-endings in his text editor, it isn't needed.

Also, I hope for a re-thinking of the released files, but I can't ask much from the start. If there is some positive feedback for the script perception, I will ask.

FYI, I cleanup the 2 main files from non-characters and save them as .readme reference manuals, then copy default @import choices to new userC*.css.
Until I settle on a way to diff (possible) old files to new version ones, I keep a backup of the (if existing) old userC*.css in a meaningfully named folder (with version Nr.).

The setup can be applied to specific profile, if more than one.

Any feedback and ideas are welcome.

[atomGit]

I thought this repo is "designed" to work inside the chrome folder. I followed this convention.
If you have another idea, please, explain how it will work. I assume with an @import from original userChrome.css and userContent.css?

bingo - i keep it all in a subfolder

[Aris-t2]

You can move this repositories files to any drive location/folder.

The two main files inside chrome folder (userChrome.css and userContent.css) have to point to "other" CSS files from there.

Example
This projects files are stored inside E:\Test\.

Inside your chrome folder the userChrome.css file only contains
@import "file:///E:/Test/userChrome.css";
and the userContent.css file only contains
@import "file:///E:/Test/userContent.css";

Thats it.

[petsam]

You can move this repositories files to any drive location/folder.

The two main files inside chrome folder (userChrome.css and userContent.css) have to point to "other" CSS files from there

I will re-design the script to that then.

What about IDentification of @import entries, so we can confidently compare entries, without making search attempts?
If there was a standard, like a naming convention and label usage, it would make comparing new/old/changed entries more confidently.

What do you think of the idea of making Usage instructions and descriptions in a readme/md file, while keeping @import lines in a plain css file?

[Aris-t2]

I'm not sure this will work for most users.

Offering cleaner base files without descriptions is a good idea I agree, but without them many users would combine/set modules not meant to be set (at the same time) and wondering why things refuse to work. The other problem is labeling modules itself. From time to time names of CSS files change or new files are added for certain Fx versions (e.g. option_name_fx72.css).
Using IDs for them might become confusing, but that is only my opinion.

What about a script that looks for lines starting with @import and moving everything else like descriptions or lines starting with /* @import to a userChrome_org.css or similar?

[jdie1320]

Hi Aris,
I just signed up on GitHub.
I've been using your userchrome.css files for Firefox to keep the tabs below the address bar for quite some time now.
All was well until I updated to Firefox 72.
The tabs, still on the bottom, are now broken, with the close X in the center of the tab & the lettering moving around, closer to bottom of tab.
Also, The Add-ons Extensions page is truncated, with a small scrolling section at the top. There’s barely enough space to view one extension, and the top of the page is also moved upwards, so clicking the gear icon only displays the bottom half or so of the menu.
I see on 'ghacks.net comments' that there are others with this same problem.
One comment:
"Same problem here! Tabs and addonpage are messed up.
Setting “layout.css.xul-box-display-values.survive-blockification.enabled” to “true” solved the problems!"
However, doing this moves the tabs back up top.
I thank you for your help for a few years now & wondering if you've got an answer for these
problems.
Many thanks,
JDie1320

[Aris-t2]

Such problems are caused by using outdated CSS files from this project and/or combining those files with other custom code.

Test a new and clean setup of this projects latest files inside chrome folder.

[jdie1320]

Aris, Wow, thanks so much for the reply so soon.I'm not really well versed in .css files. Any chance you could send the latest correct files to this address or send a link ? I hope I'm not pushing my luck.I've looked on your github v2.9.8 & earlier and I'm a little confused as to what to use.Thanks for any help,JDie1320

…

-----Original Message----- From: Aris <notifications@github.com> To: Aris-t2/CustomCSSforFx <CustomCSSforFx@noreply.github.com> Cc: jdie1320 <jdie1320@aol.com>; Comment <comment@noreply.github.com> Sent: Sat, Jan 11, 2020 4:54 am Subject: Re: [Aris-t2/CustomCSSforFx] [UPDATING] - best way to setup 'CustomCSSforFx' updates (#64) Such problems are caused by using outdated CSS files from this project and/or combining those files with other custom code.Test a new and clean setup of this projects latest files inside chrome folder.— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[atomGit]

delete your current CustomCSSforFx files
go here:
https://github.com/Aris-t2/CustomCSSforFx/releases
download the zip
read:
https://github.com/Aris-t2/CustomCSSforFx/blob/master/README.md

[jdie1320]

atomGit,Thank you for the links.I downloaded the zip, extracted the files and spent 3 hours last night moving filesin & out of the 'userchrome.css' and nothing much changed.Still have the close x over in the middle of the tab & the add-on extension page is stillmessed up. Not much luck.Like I mentioned, everything was fine before Firefox 72 & I'm still pretty green whenit comes to .css files. Just to note, if I change "toolkit.legacyUserProfileCustomizations.stylesheets" to 'false', the tabs are back on top looking good, the add-on extension page is just fine, however, I would like the tabs below the address bar. Hoping you can help,Thanks, JDie1320

…

-----Original Message----- From: atomGit <notifications@github.com> To: Aris-t2/CustomCSSforFx <CustomCSSforFx@noreply.github.com> Cc: jdie1320 <jdie1320@aol.com>; Comment <comment@noreply.github.com> Sent: Sat, Jan 11, 2020 12:41 pm Subject: Re: [Aris-t2/CustomCSSforFx] [UPDATING] - best way to setup 'CustomCSSforFx' updates (#64) delete your current CustomCSSforFx files go here: https://github.com/Aris-t2/CustomCSSforFx/releases download the zip read: https://github.com/Aris-t2/CustomCSSforFx/blob/master/README.md— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[atomGit]

@jdie1320 - i don't know what you mean by "and spent 3 hours last night moving filesin & out of the 'userchrome.css'" - there's noting to "move"

extract the zip and in your profile folder where prefs.js lies, you should have...

/chrome
    /config
    /css
    /image
    userChrome.css
    userContent.css

the only files you need to edit are the css files

toolkit.legacyUserProfileCustomizations.stylesheets must be 'true'

[Aris-t2]

Make sure about:config > layout.css.xul-box-display-values.survive-blockification.enabled is set to true or Firefox might have issues displaying a lot of things correctly even without any CSS modifications.

Extract the latest zip of this projects files into chrome folder and edit userChrome.css to enable "tabs below navigation" toolbar. Thats it.

[Aris-t2]

I think this does not need an own discussion anymore.
Use main thread: #454