aris-t2 / customcssforfx Goto Github PK
View Code? Open in Web Editor NEWCustom CSS tweaks for Firefox
License: GNU General Public License v3.0
Custom CSS tweaks for Firefox
License: GNU General Public License v3.0
hello
what is the code to locate tabs at the bottom of the firefox 57 screen (just above the windows start button)?
it was suggested to try this=
/* Puts tabs on the bottom */
#TabsToolbar {
-moz-box-ordinal-group: 2;
border-bottom: 1px solid #888 !important;
}
#nav-bar{ border-top-width: 0px !important; }
but the tabs are still located near the top
Hi, sorry, I am probably doing something totally wrong, but I cannot get the tabs below nav bar to work in 57. I am using a Mac...does this only work for Windows? I created a chrome folder in profiles folder, then used textedit to create a userChrome.css file, then pasted in the code. Restarted firefox but no love there. Seems like I am missing something simple. Can you help?
Thanks in advance, loved (and contributed to) CTR,
Debbie
Hi!
I'm using ac_popup_searchwith_and_visit_items_hidden.css to hide the "Search with" and "Visit" links. The "Visit" one disappears, but the "Search with Google" is still there. I'm using Firefox 57.
Win10 Nightly58.
When entering about:addons and then clicking the Recent Updates button there is slight slide down effect.
I believe this is happening because of min-height property.
According to other visible elements min-height should be set to 48px
in module files
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/recentupdates_category_always_visible.css
min-height is set to 40px.
Guess this should be changed to 48px as the rest of the elements
Continued from here #3
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
Something happened with the chrome_fx57_v1.1.4.zip file. Windows and 7zip are unable to open it. The 1.1.3 file is fine.
Hi,
Is it possible to move the address bar? When i turn on "legalcy extension" in Nightly this possibility exists.
Hello and thank you for your work!
I copied your scripts appbutton_on_navbar_start_position and toolbar_mode_icons_and_text to my userChrome.css. Both worked perfectly, but the appbutton looks not quite good in Firefox Developer Edition due to its way too long name. Is there a way to either alter the name to just "Firefox", or to remove the name for that specific button at all?
My current solution is very hacky:
#PanelUI-button .toolbarbutton-text {
width: 48px !important; //this shows "Firefox...", which looks better, but still sad
content: 'Main Menu' !important; //this has no effect :(
display: none !important; //this too;
}
Sorry if I'm doing it wrong by posting an issue here, just suggest a way to contact you that is most convenient, if that's okay at all.
Thanks!
Let me know if I got this wrong, but I don't see the background of an image or the surrounding area resetted as in classic/css/webcontent.
I tried to uncomment v1 and also v2, restarted Firefox 57 after every change, but opening a raw image still looks like this:
Sidenote: I also uncommented this line to show that I have the files in the right place. Every other @import
in both userChrome.css
and userContent.css
are commented
In june, I reported a CTR bug about delay of ~ 1 second or more between pasting an address and pressing enter until the URL starts to load:
http://forums.mozillazine.org/viewtopic.php?p=14753308#p14753308
It was hard for you to reproduce the issue, but you finally managed to fix it:
http://forums.mozillazine.org/viewtopic.php?p=14753568#p14753568
But now, with this userChrome.css version of "Alternative appearance (classic)" (ac_popup_classic_with_two_lines.css), the bug has returned, at least if you paste a local URL like file:///H:/Users/Pictures/Screenshot - 13, 2017 5.08 PM.png
or H:\Users\Pictures\Screenshot - 13, 2017 5.08 PM.png
.
To reproduce this bug you must have already let the urlbar panel with suggestions appear at least once since you opened Firefox. Paste a URL like the one above, then quickly press Enter.
Firefox 58.0b1 (Developer Edition).
Hi, this menu is a little messy IMO, can there be some options to clean it up, to remove some of the listed items, I find these mostly to be all redundant, and get in the way of the more useful ones like, like Undo Closed Tab.
https://i.imgur.com/D6y5k7i.png
Some of my reasons;
Reload Tab = Hit F5 or Refresh button
Duplicate Tab = Middle click the Refresh button
Move to New Window = Drag the Tab off of Firefox
Send Tab to Device = What is this?
Reload All Tabs = I've never used this personally, I don't keep dozens of old tabs laying around.
Bookmark All Tabs... = ... indeed, seems like a good way to goof and annoy you.
Close Tabs to the Right = Middle-click them.
There is a 1px grey line between the navigation and menu bar.
Then on the left side of the tabs is a 1px grey bar but only if Fx is maximized.
@import url(./css/tabs/classic_squared_tabs.css);
@import url(./css/tabs/tabs_below_navigation_toolbar.css);
@import url(./css/tabs/tab_close_always_visible.css);
@import url(./css/tabs/tab_throbber_fx56.css);
@import url(./css/generalui/bookmark_icons_colorized.css);
@import url(./css/toolbars/navbar_more_compact_mode.css);
OS: Windows 8.1 / Default theme
Fx: 57.0b9
Theme: default
Density: compact
As long as userChrome.css and userContent.css are supported by Firefox, Photon UI content can be modified using CSS tweaks, but CSS code can not create entirely new items, buttons or toolbars.
Most CSS code is copy/pasted from already available 'Classic Theme Restorer' and 'Classic Toolbar Buttons' add-on code.
Promo screenshots (Win7s AeroBlue colors are possible on other OSs too)
Tested / confirmed working in userChrome.css/userContent.css (at the moment)
Notes
Already in Firefox 57+ without installing WebExtensions (compared to Firefox 56 or older)
Things possible by installing WebExtensions
Not properly working using CSS tweaks
Not possible
When use Compact Black theme.
I must use lighter Personas e.g. https://addons.mozilla.org/pl/firefox/addon/black-15433/, In Compat black I can not find active. I can not see bottom border is active / deactive or squeezing active tab.
I want application button back in the tab bar, where it was before.
I use Linux, and appbutton_in_titlebar.css
is Windows only.
Hi,
ac_popup_url_and_title_50percent_width module misses Switch tab selector in its code.
Because of this item Switch tab has bigger offset compared to others
I believe this issue can be fixed by adding [actiontype="switchtab"] in line 42, 50 and 56.
Also there is a duplicated selector in those lines ([actiontype="searchengine"])
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_url_and_title_50percent_width.css
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
https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43
so i found this css, so maybe add to your project?
Hi Newbie here I've always relied on extensions and some about/;config tweaks to customize Firefox
Have managed to move tabs to bottom with bookmarks toolbar directly above
Could anyone provide the code to make each tab a different color as per colorful tabs extension for Firefox 56 and before this will help my wife who has a vision problem
Many thanks
Hi,
I'm trying to sort the results you get when your start typing in the urlbar.
You get different types of entries.
type= "bookmark" for Bookmarks
type= "favicon" for History
type= "searchengine" for search suggestions.
Is there a way to arrange those results?
I played around with this code:
/Address/
#PopupAutoCompleteRichResult richlistitem[type='visiturl'] {
-moz-box-ordinal-group: 0!important; }
/Opened tabs in bookmarks/
#PopupAutoCompleteRichResult richlistitem[type='action bookmark'] {
-moz-box-ordinal-group: 1!important; }
/Opened tabs/
#PopupAutoCompleteRichResult richlistitem[type='action favicon'] {
-moz-box-ordinal-group: 2!important; }
/Bookmarks/
#PopupAutoCompleteRichResult richlistitem[type='bookmark'] {
-moz-box-ordinal-group: 3!important; }
/History/
#PopupAutoCompleteRichResult richlistitem[type='favicon'] {
-moz-box-ordinal-group: 4!important; }
/Search suggestions/
#PopupAutoCompleteRichResult richlistitem[type='searchengine'] {
-moz-box-ordinal-group: 5!important; }
But then when using the keyboard is moves according to the default sort like this:
https://i.imgur.com/OcpqT79.mp4
Thanks.
Because of the ssd drive a have program data put in a map on a other HD.
Is it possible this can give problems in finding the right data.
This
/* TABS TOOLBAR POSITION (not in titlebar / not on top) - only use one at a time ***************/
/ - TABS BELOW TITLEBAR (Fx56-like) ***********************************************************/
/ @import url(./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css); /
/ - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS (tabs not on top) ****************************/
/ @import url(./css/tabs/tabs_below_navigation_toolbar.css); /
@import url(./css/tabs/tabs_below_navigation_toolbar_aero.css); / <-- AERO colors /
/ @import url(./css/tabs/tabs_below_navigation_toolbar_transparent.css); /
/ @import url(./css/tabs/tabs_below_navigation_toolbar_aeroglass.css); */
And this
/* tab close icon settings - only use one at a time ********************************************/
/@import url(./css/tabs/tab_close_always_visible.css); /
@import url(./css/tabs/tab_close_on_active_tab_only.css);
/ @import url(./css/tabs/tab_close_show_on_hover_only.css); /
/ @import url(./css/tabs/tab_close_hidden.css); /
/ @import url(./css/tabs/tab_close_hidden_for_only_one_visible_tab.css); /
/ @import url(./css/tabs/tab_close_at_tabs_start.css); */
Don't works
Hi!
Can you, please, add this style to your pack: https://support.mozilla.org/en-US/questions/1185966 ?
I noticed while using the latest 1.2.8 version;
@ import url(./css/generalui/context_bfrsb_labels_without_icons.css);
has a slight alignment problem.
Currently to enable/disable specific option you need to add/remove comment both starter (/*) and finisher (*/). I suggest using comment terminator /**/ at the end of line so you need only to add/remove comment starter at the line start.
So instead of:
enabled option line
/* disabled option line */
It would look like:
enabled option line /**/
/* disabled option line /**/
Originally, I made a report here bsiegel/http-version-indicator#6 cause I thought it had to do with HTTP/2 Indicator :: Add-ons for Firefox
With /css/locationbar/icons_colorized.css being imported it causes the location bar icons to start flipping positions and/or disappear with the mouse hovering over them.
Before: https://i.imgur.com/cHUS6Lu.png
After: https://i.imgur.com/TRQ5XOp.png
It would also do it with these two:
https://addons.mozilla.org/en-US/firefox/addon/awesome-rss/
https://addons.mozilla.org/en-US/firefox/addon/feedly-webextension/
57beta12 in Windows 7 Pro with Classic Theme.
Window control buttons seem to be squished On Win10 (Nightly58, Drag space - ON, TitleBar - OFF) when classic_squared_tabs.css are enabled.
I believe this is happening because of
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: 26px !important; }
If min-height is commented out bug becomes fixed.
The only way to modify ui is adding custom CSS code to userChrome.css and userContent.css files inside browsers profile folder. Keep in mind CSS code can not create entirely new items, buttons or toolbars. Only already present ui items can be modified!
(CTR) = known from Classic Theme Restorer add-on
(CTB) = known from Classic Toolbar Buttons add-on
(NB) = known from NoiaButtons add-on look here
(N4) = known from Noia4 theme
(GMF) = known from GlassMyFox add-on (window transparency on Windows 8/10 can only be achieved by third party tools like Glass8)
Currently available CSS tweaks for Firefox Quantum (57+) this project offers
General configuration files to control many parts of this project
[Tabs]
[Buttons]
[General UI]
[Toolbars]
[Location Bar]
[Add-on Manager (about:addons)]
[Preferences page (about:preferences)]
[Web Content]
(*) This will work as long XBL is supported by Firefox.
Already in Firefox Quantum without custom code or WebExtensions
[Buttons]
[General UI]
Things possible by installing WebExtensions
[Buttons]
[General UI]
[Tabs]
#TabsToolbar { visibility: collapse !important; }
and enable "title bar" in 'Customize...' area)Other projects
Curved tabs: Photon Australis by wilfredwee
UserChrome.js and scripts for Firefox 57+ by Endor8 (in German)
UserChrome.js for Firefox 57+ by nuchi
simpleMenuWizard for Firefox 57+ by stonecrusher
more Add-on Bars for Firefox 57+: by tkhquang
Promo screenshots
Instead of me always commenting out this section:
/* mrh
#TabsToolbar:not(:-moz-lwtheme){
border-left: 1px solid #5f7181 !important;
border-right: 1px solid #5f7181 !important;
background-image: linear-gradient(#f9f9fa,#f9f9fa) !important;
}
#TabsToolbar:-moz-lwtheme{
background: rgba(255,255,255,0.4) !important;
}
@media (-moz-os-version: windows-win7),(-moz-os-version: windows-vista) {
@media all and (-moz-windows-theme:aero) {
#TabsToolbar:not(:-moz-lwtheme) {
background: #dbeaf9 !important;
}
}
}
*/
What would I need to do keep it at the default colors using a later override?
I'm using a Windows Classic theme so it looks like this: http://www.markheadrick.com/firefox/firefox57-appearance.jpg
Thanks
(Apparently using backticks doesn't really format it as code here.)
When using appbutton_on_navbar_start_position there is an issue with urlbar right offset on pop-up windows.
It doesn't have any offset so it looks kinda cropped.
I believe this can be fixed by adding toolbar #urlbar-container {margin-inline-end: !important;}
and negative margin-inline-end
for next element in toolbar (to compensate increased distance between elements)
URL used for testing purposes:
http://on-line.vodafone.ua/ru/messenger
type any number then click on the button and a pop-up window will appear)
First of all, Thank you for this FF57 life saver repo ๐
Maybe you can save my live by finding a solution to had multiple lines tabs possible (was possible via Tab Mix Plus prior to FF57). This will be great as i downgrade back to FF56 for this, session manager and passifox.
I'm not so confindent asking this as even chrome don't have this function :/
I really need this.
Can you add support for a Google Chrome look?
I like their icon design more than Firefox.
Is it possible to add the "add to bookmarks" star icon to the urlbar, just like RSS icon with Awesome-RSS addon?
XBL has been deprecated and is being replaced by WebComponents, with ongoing work on this being tracked by bug 1397874 and Are We XBL Still?.
This will break everything in /classic/xml/
.
chrome
folder got backuped and removedchrome
folder@namespace
references are inside CSS files1. Hit "new issue" button on this page or hit "issues" and then hit "new issue" button.
2. Add a proper issue title.
If it only happens...
Ex. 1: [Win][Lin][Fx58] wrong active tab color
Ex. 2: [NB][Fx57] downloads buttons too small
3. Post a screenshot of your full browser window and point to the issue on it.
4. Describe the issue
5. Post your configuration
This is just a hint, that the @import lines of userContent.css are ignored, when electrolysis (multiple content processes) is enabled in Firefox 57.
Workaround is to set browser.tabs.remote.autostart.2
to false
in about:config
.
A bug report at mozilla has already been filed: #1416184
configuration:
Hi,
addonlists_show_addon_version_number.css is not working.
Just shows a blank about:addons page.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.