Themes - Modify Tabs

[greybeard2012]

The three themes you get by default are: Default, Compact Dark, Compact Light.

I like the Dark theme but one thing that annoyed me was the tab highlighter colour. Instead of grey as you'd think would be appropriate for such a theme the chosen colour is an odd shade of blue. Additionally, unlike the the neat tab highlighting of the Default theme the blue highlighter is oversize ie. too high and just looks crude.

What is also odd is that with both the Dark and Light themes the tabs do not extend fully to the screen's left hand side. There is a distinct gap where the left side of the tab is indented about 15mm. It does not line up with left most icon on the toolbar or the menu bar above if you have that enabled.

I've found that using Waterfox which supports the same themes and yet does not arbitrarily prevent legacy addons working I can change the tab colour very easily using the great Classic Theme Restorer. But with any recent Firefox you can not do that now.

What I'm wondering is whether there is a way with Firefox using a userChrome.css? Can the tab highlighter colour and the text colour be changed, can the highlighter size be adjusted to slim it down and can that odd change in left tab positioning when using those two themes be changed?

[kerft]

You may already know, but as much as possible, this is meant to be an alternative to Classic Theme Restorer https://github.com/Aris-t2/CustomCSSforFx Once installed, you can uncomment or comment parts to act like checking a box would have.

[smsmith]

You can "make your own color theme" with this extension.
https://addons.mozilla.org/en-US/firefo ... src=search

[greybeard2012]

Thanks both ^ ^^. I was hoping there was some simple-ish theme maker/editor tool that could be used so bringing that ^ to my attention is particularly helpful.

That github link could itself have pointed me in the direction of the problem with the tab positioning. It lists a number of about:config tweaks including one related to tab size. That maybe what needs changing to realign the first tab's left hand side.

The relative complexity though of having to find the items that need modifying and employ .css files to customise Firefox now is absurd. I think I'm just about up to it but when you know you could do some of these things so easily with plugins that can not now be used it just frustrates you. At least it does me.

[dickvl]

See also the Browser Toolbox.
https://developer.mozilla.org/en-US/Too ... er_Toolbox

[greybeard2012]

I've now manged to get Classic Theme Restorer to do two of the things I wanted, at least with Waterfox and using the certificate signing addon with an old version of Firefox.

The Compact Dark theme tab highlighter height can be specifically minimized using CTR. In fact it does seem as though the Compact Dark theme does not use the default tab height (28px) but some other, larger, custom size which is particular to the two Compact themes.

But what I can't find out how do is alter the first tab's position left to get rid of that, pointless, and, I find, aesthetically annoying, indentation. It has to be a specific Compact Dark thing too but requires the original theme to be edited as there does not appear to be a plugin that works. Even if there was it is not going to effect just the Compact Dark and Light themes it will be applied across all themes which is not what is wanted.

So how can I access and edit the Compact Dark theme's code that actually controls the tab's start position and go about shifting it left to where I would like it to be: lined up with the title-bar, toolbar and menu-bar?

EDIT
I've found a CSS file which, amongst several other things, includes entries which apparently modify the first tab position by simply removing the margin. That should work across all themes and be irrelevant if the tab position is not already indented.

Not tried it with Firefox yet but can't get any CSS to work with Waterfox Portable. I suppose this is the wrong place to ask this but has anyone here any ideas about that? It certainly is not just a question of the profile/chrome folder location, there seems to be something else stopping it working. I've tried turning off the 'multi-process' option and the about:config also mentioned as possibly being involved I can't find or rather do not appear to have with either of the Firefox or Waterfox versions I'm using.

I was wondering if the same thing might apply when using Firefox Portable; is there anyone with some experience using CSS files with that Firefox version who can enlighten me about how to get them to work?

[greybeard2012]

I should have remembered that Classic Theme Restorer includes a facility for adding custom CSS. I tried that and it works but.............................it seems only for certain userChrome.css recipies. I've tried some 'off the peg' CSS test files and successfully moved the tab bar below the tool bar and curved the tabs. Neither do I want to do but it proves the method works.

However the code I've been using to remove that left margin positioning of the first tab fails to have any effect:-

/* Remove empty space before first tab

Delete this rule if you need a space to drag the window*/

/*#TabsToolbar .titlebar-placeholder[type="pre-tabs"]{*/

/*display: none !important;*/

/*}*/


}

Can anyone here work out what is wrong and/or knows why it does not have the desired result?

BTW having Classic Theme Restorer work with those test CSS files meant that I could also determine where the "chrome" folder should be located. It is just in the main portable version ....fox/Data/profile folder. With it in there the now proven working CSS test files all worked from there too.

This suggests again something is wrong with that first tab repositioning CCS code.

[smsmith]

Code: Select all

#TabsToolbar .titlebar-spacer[type="pre-tabs"] {
    display: none !important;
}

spacer, not placeholder.

[greybeard2012]

Thanks.

I was crossing my fingers that would work but I've copied it as provided and tried that. No joy.

Then I just modified the original CSS with the suggested edit ie. "spacer" instead of "placeholder". Still no joy.

Both were tried in the "chrome" folder and then as a Classic Theme Restorer CSS instead and it made no difference. It is baffling that all the other CSS I've tried have worked just not this.

[smsmith]

Based on the code you provided, I believe you have comments and extra code brackets that have broken the file. Or, Fx 57 is using a different name for the spacer.

/* This is a comments. Everything inside the slash and star star and slash is ignored. */

Code belongs inside of curly brackets. One to open and one to close the code block

SelectorID {
code
goes
here
}

[kerft]

There are many text editors that will color or highlight to show what the blocks are, this may be called syntax highlighting, making errors often easy to spot. Programmer's notepad mentioned here http://forums.mozillazine.org/viewtopic ... p=14789746
and several others like Notepad2 mentioned here http://forums.mozillazine.org/viewtopic ... &t=1356055

[greybeard2012]

I'm still having no joy with this. Maybe it just is not possible to modify the first tab margin with these particular themes using a CSS.

So I have to go back to what I asked about in my original post and ask again if someone can explain if it is possible and how to get at and modify the Compact Dark theme more directly?.

[dickvl]

Did you make sure that the file doesn't have a hidden .css or .txt file extension (userChrome.css.css or userChrome.css.txt) ?

[greybeard2012]

No but it is always worth mentioning things like that because, by default, Windows does not display the actual extension being used.

I was very careful about this and, as I said earlier, I have applied other test CSS files successfully to alter things like the position of the tab bar. That proved the Compact Dark/Light Themes could be customised via CSS and why I assumed there must be something wrong with the syntax of the CSS I've been trying.

You'd think moving a tab position/removing a margin would be a relatively simple thing but apparently not.

It is not of vital importance of course but when you set out to do something I do not like being thwarted at least not without understanding why.

[kerft]

I'm not sure which browsers you would be happy using - modern Firefox, old Firefox, Waterfox - but if you would like to use Waterfox Classic perhaps someone on their support page could suggest a userChrome.css that would work. https://www.reddit.com/r/waterfox/ Most tweaks expect you to be using the default theme, perhaps starting with it you can get to what you like, but maybe the easiest would be to find an old complete theme you like and there are some browsers (not modern Firefox) that you can use them with. Someone on the support for one of those alternate browsers might be able to point you to some complete themes. The themes that are supported in modern Firefox, as you likely know, are little more than color and background changes and are likely not useful for your purposes.

One more extensive "dark theme" on modern firefox is Shadowfox (it isn't technically a theme). https://overdodactyl.github.io/ShadowFox/ If it makes trouble, recall that you have installed it and have a profile backup available.