Closed Aris-t2 closed 6 years ago
Can I possible modify about:(...)
pages with userContent.css file?
Yes, guess this is doable. It would be great if Aris has plans to add such functionality in future. To be precise I'm interested in about:addons tweaks:
#category-recentUpdates[disabled] { opacity: 1 !important; min-height: 48px !important; }
I was under the impression about:... pages were not changeable in Firefox 57+, but it seems I was wrong. Thanks for the info.
Happy to Help, Aris
I had some issues with them too.
Guess it was because i used @namespace url(http://www.w3.org/1999/xhtml);
instead of @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
Anyways currently this one works fine for me.
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {
#category-recentUpdates[disabled] {
opacity: 1 !important;
min-height: 48px !important;
}
#category-discover {visibility: collapse !important;}
.addon {counter-increment: addoncount !important; content: counter(addoncount) !important;}
.addon:first-child {counter-reset: addoncount !important;}
.addon[active="false"] {counter-increment: disabled !important;}
#addon-list:after {
display: block !important;
width: 120px !important;
content: "[ "counter(addoncount)" Включено | "counter(disabled)" Отключено ]" !important;
color: #444444 !important;
text-align: center !important;
white-space: nowrap !important;
position: fixed !important;
top: 11px !important;
left: calc(50% - 112px) !important;
cursor: default;}
}
I'm currently looking into CTRs alternative appearances for about:addons and about:preferences. Not only most of the code is portable, some other nice stuff is possible too.
Maybe change search positon in settings (about:preferences), I propose tests:
/* search in right top corner */
.search-container {
background: transparent !important;
position: fixed !important;
width: auto !important;
top: 60px !important;
z-index: 1 !important;
right: 60px !important;
}
/* repair margin after change position search box */
.pane-container {
margin: 30px 0 0 0 !important;
}
big window | smaller window |
---|---|
To be honest, the search box overlay bugs me. Its kind of annoying, that is actually can overlap with pages content. I think a better approach is keeping it as contents first "item" and make it disappear while scrolling, so it becomes a default page item like everything else.
.search-container {
background: transparent !important;
position: absolute !important;
top: 20px !important;
}
Further more I will tweak the small window case so content and search box are still visible even on smaller windows. Currently small width corrupts/moves some areas the way they should not.
Hi Aris,
Do you have any plans on adding Australias style (default-one from FF56) module for tabs?
Also could you give some details whether number of included @import url(.*.css)
inside userCrome.css affects browser speed in any way?
I have no plans to work on curved tabs, I'm glad they are gone. ;-) They were the main reason I started to work on CTR back then.
No idea about how or if many imports have an affect on browsers speed/performance issue. Testing in Portable Firefox on a very old slow usb 1.1 stick might give some insight, if anyone wants to test.
Aris, great work as always. How hide the separator near to hamburger icon in 57+?
I will add the code to next update.
#PanelUI-button {
margin-inline-start: 0px !important;
border-inline-start: 0px solid !important;
border-image: unset !important;
border-image-slice: 0 !important;
}
Hi Aris, I have I minor suggestion regarding classic_button_appearance_on_navbar.
Current module adds squared style buttons to navbar.
CTB offered an option to make those buttons rectangular.
Maybe you consider adding some more customization for those buttons (aka additional module to make them rectangular instead of squared) P.S. Button height is totally fine here perfectly matched with addressbar
Other interesting codes to add that I use:
/ Find Bar on top /
.browserContainer findbar, #viewSource #FindToolbar { -moz-box-ordinal-group: 0; width: 100% !important; }
/ Global text size UI /
* { font-size: 10pt !important; }
/ Active tab text in bold /
.tabbrowser-tab[selected="true"] { font-weight: bold !important; }
Aris, is possible make in bold or change the color of the host in Location Bar?
@Acid-Crash I will look into it. EDIT The main problem with modifying button appearance is still even in Firefox57+ the non-standardized button appearance for all toolbar buttons. We have buttons with and without badges, we have buttons with special indicator cases like downloads button, action buttons, WebExtension buttons, which Firefox is handling differently compared to default buttons... Creating such a toolbar buttons CSS modification would mean to take care of many buttons individually. I will add experimental code, but can't promise it will work for all buttons.
@happysurf
there is a short findbar on top css file in this collection ( https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/findbar_on_top.css ). I can add code inside that file users can "enable optionally" to increase findbars width to full window width.
setting a global font size for everything might break the appearance of some items, that rely on default font size. Appbutton in titlebar would need adjustment. Too high font values for tab text would break squared tabs appearance, button badges (uBlock Origin) look weird etc.. Maybe something like:
{ font-size: 10pt !important; }
font-size: 12px !important; } .toolbarbutton-badge-stack .toolbarbutton-badge{ font-size: 10px !important; }
tab text settings got recently added to this collection ( https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/custom_text_settings.css )
CSS can not identify parts of url text on the whole url
here is the code to set a custom location bar background color (will be added to this collection):
Thank you for reply but I don't want change the background but only the host text, in my screenshot is github.com.
Noticed that, edited message afterwards. ;-)
@Aris-t2. Thx for the update regarding those buttons. Experimental code will do. On the other hand I totally agree that if 2-4 pixels increase requires major changes and constant oversight for other buttons, it doesn't worth it so I will not be so sad about it.
@happysurf If you need to get rig of that light gray color for the domain part, you could flip browser.urlbar.formatting.enabled in about:config
An other useless separator that take too much space in Location Bar when the Reader View is available. Will be great hide the separator and move the Reader icon more close to the dots.
Inactive:
On mouse over:
#urlbar-container #pageActionSeparator{
visibility: collapse !important;
}
Is there or will there be anyway to create new toolbars for the locationbar?
like such:
(excuse my poor paint skills, removed some text etc..)
You can not create new toolbars at the moment. Nobody knows, if something changes once Mozilla releases a new toolbar API. They were supposed to come with something up for Firefox 57, but they didn't.
Hi Ares, Don't know whether this is a bug or a Design choice. In modules
border-radius
is set to 12px.
I've noticed that when using a compact density mode affected elements have min-height/height set to 26px. Hence for maybe that roundness should be 13px instead of 12px?
12px was the max value in Classic Toolbar Button, so I just adopted it.
Is there a way to copy default theme styles and modify those? All I really want is to use default Dark theme but with the background and tabs styles from the Default theme. Dark theme is nice and easy on the eye but that complete dark background on tabs is retarded, no contrast what so ever.
You can look into default compact theme file and use any code you like: chrome://browser/skin/compacttheme.css
Hi Aris and thank you for this beautiful settings in Firefox 57 (text from translator)
I have an issue with the download button.
In file "buttons_on_navbar_classic_appearance.css" I added "width 90px - height 25px"
and all buttons works perfect, except the dowload button when I press it, fails. (see pic).
Ιs there a way to fix it?
Thanks! P.S: I made a css file with Bookmarks multiple lines if you want it.
You have found Mozillas most complex button. It has multiple internal layers, which have to be adjusted once button size changes in some cases.
#downloads-button
#downloads-button .toolbarbutton-badge-stack
#downloads-button .toolbarbutton-text
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-icon
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-badge
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-icon
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer #downloads-indicator-progress-inner
Here is the code you need for your button width:
#nav-bar toolbarbutton .toolbarbutton-icon,
#nav-bar toolbarbutton .toolbarbutton-badge-stack {
width: 90px !important;
height: 25px !important;
}
#nav-bar .webextension-browser-action .toolbarbutton-icon,
#nav-bar #downloads-button #downloads-indicator-anchor {
margin-left: 32px !important;
margin-right: 32px !important;
}
(The .webextension-browser-action part is for buttons like uBlock Origins).
Share your bookmarks multiple lines code. I could add it to this collection too.
Thank you sooo much! Now work Perfecty! :-)
Here is the the code.
/ bookmarks multiple lines /
display:block; }
display:block; min-height: 0px; overflow-x:hidden; overflow-y:auto; max-height: 999px; }
display: -moz-stack !important; left:0px; right:0px; width: 100%; }
/display:block;/ overflow-x:visible; overflow-y:visible; }
display:block; }
visibility: visible !important; }
display:none; }
overflow-x:hidden; overflow-y:hidden; }
display:none; }
display:none; }
padding-top: 2px; padding-bottom: 2px; margin-left: -4px !important; padding-right: 10px !important; }
padding-top: 2px !important; padding-bottom: 2px !important; -moz-padding-start: 4px; -moz-padding-end: 2px; }
-moz-appearance: none !important; visibility: visible !important; display:inline; text-shadow: none !important; border-left: 3px solid ThreeDShadow !important; border-right: 3px solid ThreeDHighlight !important; vertical-align: left; }
-moz-appearance: toolbarbutton; }
@Achille-Grs Does the code work for you with more than two rows?
oops! Finaly only two lines works. Hmm... in Firefox 56 works fine. but in 57.......? something is wrong and I don't know what to fix. Maybe you can find the solution.
Some questions:
Will it ever be possible to update your code through Firefox? Or maybe at least a Add-on that notifies about a new version?
Is it possible to move reload/stop into the location bar?
@Achille-Grs I kinow that add-on. Didn't it stop working properly a long time ago?
@MrGlasspoole
Visit https://github.com/Aris-t2/CustomCSSforFx/releases and click on your RSS/feed button. Add a dynamic folder to your bookmarks toolbar.
@Aris-t2 The last update of this addon was 6/22/2016 https://addons.mozilla.org/el/firefox/addon/multirow-bookmarks-toolbarplus/?src=ss In firefox 55 I decided to use Stylish addon. I make copy-paste the code of Multirow Bookmarks and then delete it to make the firefox as lighter as possible from unused addons. Until that day the addon was working flawlessly.
@Aris-t2
As you can see in the picture, it is firefox 56 with stylish addon with css code for multiple lines and works fine. I realy hope you make it and fix this! :-)
Also on the tab new:tab I made the background transparency. It also does not work on firefox 57.
Can we make the icon in the library menu colored?
@Achille-Grs Mozilla did some changes to bookmarks toolbar, maybe that is why the Fx56 code for multirow bookmarks does not work. I haven't looked into it.
You achieved transparency with Stylish before not through userChrome/usedrContent, right?
@motfis Sure, except "Screenshots", can't find its id in popup.
@Aris-t2 Yes! The transparency I haved it 2 years ago. Here it is the old code:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @media all and (-moz-windows-compositor) {
opacity: 0 !important; background-color:transparent !important; }
background-color: rgba(255,255,127,.0) !important; }
background-color: transparent !important; } }
I made copy-paste the code witthout the firsts two lines, but nothing happened.
Is it possible at all to restore the old search-bar? I can't find any WE addon for this purpose.
I know this code from GlassMyFox. It relies on Stylish DOM access. No Stylish, not transparent tab.
This code makes all content transparent, but there is no way to use it for a specific page as it has to be applied on a level above the page, so @-moz-document won't help here either.
#main-window #content browser {
opacity: 0 !important;
background-color: transparent !important;
}
#main-window #content{
background-color: rgba(255,255,127,.0) !important;
}
#appcontent, #content > tabbox > tabpanels {
background-color: transparent !important;
}
It is possible to rebind the old search bar code, but it does not work properly. Because of that it is not part of this collection.
@Aris-t2 Ok... no problem. I can live without the transparent in my new:tab. LoL :-) Now the firfox is exactly as I wanted it to be. The only thing left to do is to get smaller urlbar height. I tryed everywhere in the code to give height 25px as I did in the buttons but.... without result.
I can't move the Pocket button, for example:
#pocket-button {
-moz-box-ordinal-group: 100 !important;
}
This does not work. Why?
Pocket button is inside its own box. You have to move the whole box.
#pocket-button-box
Further more you have to disable "starbutton_is_last_pageaction_button" and "dropmarker_at_the_end". Both are enabled by default in this collection.
I want to do the same trick with buttons of the Reload in address bar addon.
But how can I get an ID of this addon's buttons?
BTW, why is Reload in address bar (or an alternative) not supported by this project?
Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable browser chrome and add-on debugging toolboxes / Enable remote debugging Tools > WebDeveloper > Browser Toolbox
Now you can look for specific item ids, classes etc. like in Dom Inspector on older Firefox, but with less comfort.
"This project" does not create any new buttons. Its not a WebExtension, only a collection of user styles (CSS). Or did you mean why reload button of that extension is not colorized in this project? The id of Reload in address bar add-ons button is
#_e1ed7a80-7c11-4f7e-968b-79b551a0067f_-page-action
Regarding "the same trick": the code for awesome rss was experimental and did not work. I forgot to remove it. That add-on offers different icons on its options page.
@Achille-Grs
Change urlbar height with this:
#urlbar,
.searchbar-textbox {
margin: 1px 2px !important;
min-height: 0px !important;
height: 24px !important;
}
Hello, Aris! I am currently trying to do the following: drag History icon to the navigation toolbar, click on it, there is "Recently closed tabs" folder. Is it possible to move the contents of this folder to the root of History icon menu (where "Recent history" is located)? Thank you!
No, you can't move menus/menuitems/folders to a different level/node using CSS. Changes are only possible on the same level.
Is it theoretically possible to unlock the placement of the urlbar (make them draggable again) via -moz-binding and XML override?
Nevermind, the XML files in the repo shouldn't work anyways anymore.
Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.
Trying to makes CSS code Firefox 57+ ready? Remove all
@namespace
references. They are the reason, if your code refuses to work.Application/hamburger button in tabs toolbar? Look here: #46
Things this project will not target/recreate
Things not possible with CSS