Recommended for you
maxxdogg's avatar
UPDATE: FlatFox Light and Dark.
82 72 18K (2 Today)
By maxxdogg   |   Watch
Published: August 27, 2015
© 2015 - 2019 maxxdogg
Flat theme for Firefox 40.0.2 or above. Inspired by Microsoft Edge UI and based on 10fox, Windows 10 Firefox Theme, Charming Firefox Theme. Created for Windows 10. I tried to make this theme pixel, border and color perfect. If You find some bug please report me and send screenshot. For some time I will upload dark version!

Bug list:
-on 3rd party Windows 10 themes caption buttons of Firefox window are big and white (I don't know how to fix it :c ), You have to use original Windows theme.

How to install?
Stylish addon is required. Create new script in Stylish and paste there content of .txt file and save script.

UPDATE:
-updated Light version, fixes and optimizations
-added DARK version!!!!!!!
Recommended for you
Comments72
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
megazildjian's avatar
megazildjianHobbyist Interface Designer
Or please fix this if you have some time. Latest FF update broke it. 

namespace url(www.mozilla.org/keymaster/gate…); @-moz-document url("chrome://browser/content/browser.xul") { #main-window { background-color: rgba(204,204,204,100) !important; } toolbarbutton.bookmark-item { -moz-appearance:none !important; } toolbarbutton.bookmark-item:hover { background-color: #e1e1e1 !important; border: 1px solid #cccccd !important; } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) { background-color: rgba(242,242,242,100) !important; margin-bottom: 0px !important; margin-top: 0px !important; } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon, .urlbar-history-dropmarker, #urlbar > toolbarbutton, #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active, #urlbar-stop-button, #urlbar-stop-button:hover:active, #urlbar-stop-button:not([disabled]):hover, #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active, #PanelUI-menu-button .toolbarbutton-icon { -moz-image-region: rect(0, 0, 0, 0) !important; } #urlbar-reload-button, #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active, #urlbar-stop-button, #urlbar-stop-button:hover:active, #urlbar-stop-button:not([disabled]):hover, #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active, #PanelUI-menu-button .toolbarbutton-icon, .tabs-newtab-button .toolbarbutton-icon { list-style-image: none !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } #urlbar:not(:-moz-lwtheme), .searchbar-textbox:not(:-moz-lwtheme) { background-color: #E5E5E5 !important; } #back-button > .toolbarbutton-icon { background-color: rgba(204,204,204,1) !important; opacity: 1 !important; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAOVBMVEX///////////////////////////////////////////////////////////////////////////+0EB4eAAAAEnRSTlMAARITFEhhYoCVxs7P0NHS+P68sBq6AAAAX0lEQVR4Ae2UOw6AMAzFIKV86Aea+x+WnQFkibA0nm0pWd7gdMwcmb+0MzJfdR+Zn4T52dgvwdav1J+Yfxj7bVufuPuv8ICfRJ/+pKi8CLQoPxRZ7IskfGbokOGpdJwLrn4Nz4WSMXAAAAAASUVORK5CYII=) !important; box-shadow: none !important; } #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { background-color: rgba(179,179,179,1) !important; opacity: 1 !important; } #back-button:not([disabled="true"]) > .toolbarbutton-icon { background-color: rgba(179,179,179,.7) !important; opacity: 1 !important; } #forward-button > .toolbarbutton-icon { background-color: rgba(179,179,179,.7) !important; opacity: 1 !important; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsSAAALEgHS3X78AAAAoUlEQVR42u3YywnCQBhF4diCsSjbMJXYhC251Ek6mVkJ8%2FIXssjClQjJzZwPsg33QAjMdB0AAGhEjPGcUrrIji%2BlvOwpFjGo7T%2FknO91JhnhvT9axGMPEU8i1hZC6C3CEbGRiFE94rSXiImIJXvZdYXn9hn%2Bl4i6ET9HyAfIf0L8iRobP6qO79XHO8ZzoGlsvOyhXv9aRf1iS%2F9qEQAAfPEGvXXvmMQxVScAAAAASUVORK5CYII%3D) !important; box-shadow: none !important; } #forward-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { background-color: rgba(179,179,179,1) !important; opacity: 1 !important; } #page-proxy-favicon { list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD6T+iNAAAAIHRSTlMAAQIOFBgaGx4gIiMwMTI1OkBBQ0RGR0lKS01PUVJTVGSK8IQAAACESURBVBjTZU8JDoMwDPNaYMC4ysIRaPH/f7kipm1aLSWSc9pARNas5NpkeGMguW0xDRcfpTxuXWeOUsaT96xaFstSsK3YA5a603uesSstnBrL3IiYnNaoA+s4BDgHxHZNhEmUT/FehCpTQJh/C3P4W3kwPZq8vYTdv8JS6am5075+7L8Aeq4P9lht9xsAAAAASUVORK5CYII=); background-size: contain !important; } .urlbar-history-dropmarker { margin-right: 4px !important; list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAKlBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmU0mKAAAADXRSTlMAAp6go6KHIKGfpOAD7XSp+AAAAIJJREFUeNrt0DEOgCAQRFFXEAXd+1/XRoL4o9MbpiN5fwumsbGxx9Zkilhab3732YSffW9FckcB7576Z7YPn+tJFtq3ItiLD9WLAl4V9Cw2Htqa1wU9i6X/jIWehfIs4EURL2Kxel3AywJeFOU4Sud1Aa8KeFHAqwJeFvCqsGnsVzsB77EHSXksSN4AAAAASUVORK5CYII=); } .urlbar-history-dropmarker .dropmarker-icon { width: 16px !important; opacity: 0.33 !important; } #urlbar-reload-button, #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAATlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADEoqZZAAAAGXRSTlMAECAwP0BQYG9wf4CPkJ+gr7C/wM/Q3+/wOZx2zAAAAYBJREFUeAGdldHW2yAMg00YIRnj7xpgid//RdcOfDhaPUr33TQXCFkGU0LMt+8/fy00Blfzg2t+tZAIWR0hfbUQCAl8oMjz36wvEuYfZqhZFAlnO9BcpEn4HGiSLmH2oBmlJ1u0kLueHn2wtkNN3/EXP8lGNblIw1ZNpMZyDtJjXCntVtdiej3P0Uz4SSGvpxdq31w1kW+P6QHZ+d4/b7VgNT3UbyRYM/RqerDZRVykMZgeKdLRE/pkSKUf30lkpa73uHY09ZemaBc6SJQBECZUSaIpUpXETyXxfySfF1YlmabIVeI/b7Kcz3v6qctlGwDzLpnydJQkWpys8eWHERtz63unORvbB5mcvB1jDulXt9ln2pVgdNiOy8JRjPBKq4oTH1gyZawRRTEvrzRvpLLxHy7YcuXKsSgWB0sQ/Y/5C0W0fHHDEyHrxY28WRKDLXPjcop/4U4+HmTuFEsKJvI/iYZ0XGKVNHpM3Z1fuDsas+xglfaFZnA+hBhD8Or+vwHYtEgUMH04/AAAAABJRU5ErkJggg==); background-size: 80% !important; } #urlbar-reload-button { opacity: 0.33; } #urlbar-reload-button:not([disabled]):hover, #urlbar-reload-button:not([disabled]):hover:active { opacity: 0.5; } #urlbar-stop-button, #urlbar-stop-button:hover:active, #urlbar-stop-button:not([disabled]):hover { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAKlBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmU0mKAAAADXRSTlMAAqOfnqKhpBegA+AgKN8kbwAAAKhJREFUeAHtlMuqhjAMhDta7aXm/V/3oAyF89NAZufCLJvvC17SSW+rryq8Durq9BoZDp/HtZg/zDLWvNmoy2PbseB346iY4fJstZ8WGse4xvmvidPnOW4ak28uT+CYAA4OCBhBntD2QNgoB40gT7D0XihGjRhP44ZvCSlYvTx8T7qgP5L+0vpn1X+cvhr68unrrV8g/YrqIaDHjB5kelTqYazE/cvqqz8pywuRZp6l4QAAAABJRU5ErkJggg==) !important; } #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAb1BMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADrabCLAAAAJHRSTlMAGNdw+gsK+0/BwgxSv8C+UVNQTq+LBAOn+Ww48js1VNgbw3Sk/KLxAAAAkElEQVR4Ae3Vxw6EMAwE0O2b7Uvv3f//jUSIcMUjy7fMiYOfhMCZHNTjkyZH99iUjPksp9MqqprO+6AtyImYiCOiixO3H08YifhoiVAgrl+e+EvEgyfeuLgLxJMngk281ERnRT8sYrRikgP8lcB5/LPiPw5fDXz58PXGDxB+RI18Hi8yvCrxMsbrHr9QfJQzA0DCHbVE0a0XAAAAAElFTkSuQmCC) !important; } #urlbar-go-button { opacity: 0.33; } #urlbar-go-button:not([disabled]):hover, #urlbar-go-button:not([disabled]):hover:active { opacity: 0.5; } .tabs-newtab-button .toolbarbutton-icon { width: 16px !important; height: 16px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAABgSURBVDhPzcsxCkJBAEPBvf+lVwLTCE/kg4UDaUJyfuLe+zhvaiBTvSc1kKnekxrIVO9JDWSq96QGMtV7onzCkxUfMtV7UgOZ6j2pgUz1ntRApnpPaiBTvSc1+JZ/cc4LVFYODzudx0wAAAAASUVORK5CYII=) !important; background-size: 100% !important; margin-left: 3px !important; margin-right: 2px !important; margin-top: -1px !important; } #TabsToolbar .tabs-newtab-button { opacity: 1; } #TabsToolbar .tabs-newtab-button:hover { background: rgba(128,128,128,.7) !important; } #TabsToolbar .tabs-newtab-button:active { background: #a2a2a2 !important; } #PanelUI-menu-button .toolbarbutton-icon { width: 32px !important; height: 28px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAANElEQVR42u3ToQ0AMAwDwQzs%2Fam7RNWCHHh8UiJP2%2FnRgMF74CS9kVODweYEBpuTH4PB7zp5%2B1rPXyietwAAAABJRU5ErkJggg%3D%3D) !important; } #TabsToolbar { background: transparent !important; margin-top: -1px !important; margin-bottom: 0 !important; margin-left: -1px !important; } #TabsToolbar .arrowscrollbox-scrollbox { padding: 0 !important; box-shadow: none !important; } #TabsToolbar .tabbrowser-tab { border-width: 0px 0px 0px 0px !important; -moz-border-top-colors: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; color: rgba(0,0,0,.8) !important; padding: 0px 0px !important; background: rgba(255,255,255,.0) !important; background-clip: padding-box !important; transition: all .1s !important; margin-top: 1px !important; /*1px line to enable window drag and drop*/ } #TabsToolbar .tabs-newtab-button { -moz-border-top-colors: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; border-style: solid !important; border-color: transparent !important; border-width: 1px 1px 0 1px !important; background: transparent !important; background-clip: padding-box !important; transition: all .1s !important; } #TabsToolbar .tabbrowser-tab[selected] { color: rgba(0,0,0,1) !important; background: rgba(242,242,242,1) !important; background-clip: padding-box !important; margin-top: -1px !important; /*potrzebne do 1px linii*/ padding-top: 2px !important; /*potrzebne do 1px linii*/ } #TabsToolbar .tabbrowser-tab:hover:not([selected]) { background-color: rgba(229,229,229,1) !important; margin-top: -1px !important; /*potrzebne do 1px linii*/ padding-top: 2px !important; /*potrzebne do 1px linii*/ } } #TabsToolbar .tab-background { margin: 0 !important; background: transparent !important; } #TabsToolbar .tab-background-start, #TabsToolbar .tab-background-end { display: none !important; } #TabsToolbar .tab-background-middle { margin: 0px 0px !important; background: transparent !important; } #TabsToolbar .tabs-newtab-button { border-width: 1px 1px 0 1px !important; margin: 0 !important; width: auto !important; padding: 0 5px !important; } #PersonalToolbar { min-height: 32px !important; padding-bottom: 3px !important; -moz-padding-start: 2px !important; -moz-padding-end: 2px !important; } #addon-bar, #PersonalToolbar, #nav-bar { background: #F7F7F7 !important; box-shadow: none !important; background-clip: padding-box !important; border-color: rgba(0,0,0,.25) !important; border-radius: 0 !important; } #menu_pocket, #menu_pocketSeparator, #panelMenu_pocket, #BMB_pocket, #BMB_pocketSeparator, #context-savelinktopocket, #context-pocket { display: none !important; } .tab-throbber[busy] { animation-name: none !important; list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4jWNgGAWjYLCB/1BMjhh1DBipAAAfxwv1p0imEAAAAABJRU5ErkJggg==") !important; } .tab-throbber[progress] { animation-name: none !important; list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4jWNgGAWjYLCB/1BMjhh1DBipAAAfxwv1p0imEAAAAABJRU5ErkJggg==") !important; } #identity-box { display:none;} #urlbar #plugins-notification-icon, #urlbar #notification-popup-box { display:none!important; } #urlbar { color: #757983 !important; font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif; font-size: 13px; box-shadow: none !important; padding-left: 13px !important; } #searchbar .search-go-button { visibility: hidden !important; } #searchbar .searchbar-dropmarker-image { display: none !important; } #searchbar .searchbar-engine-image { width: 0 !important; padding-left: 18px !important; margin-left: -20px !important; margin-top: 0px !important; margin-bottom: 0px !important; margin-right: 3px !important; } #searchbar .searchbar-textbox { color: #757983 !important; font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif; font-size: 12px; box-shadow: none !important; margin-left: 5px !important; margin-right: 10px !important; padding-left: 1px !important; } #urlbar > toolbarbutton { /*-moz-box-ordinal-group: 0;*/ /*refresh button on left side*/ padding-left: 10px; padding-right: 10px !important; margin-right: 5px !important; margin-left: 6px !important; } .autocomplete-history-dropmarker { display:none !important; } #main-window:not([privatebrowsingmode="true"])[sizemode="fullscreen"] #TabsToolbar { margin-right: -53px !important; } .tabs-alltabs-button { display: none !important; } /*remove dropdown all tabs button*/ /*tabs width*/ .tabbrowser-tab:not([pinned]) { min-width: 60px !important; /* defaults to 100px */ } .tab-close-button { display: -moz-box !important; opacity: 0 !important; } tab:hover .tab-close-button { display: -moz-box !important; opacity: 1 !important; } /*hide tab favicon-change opacity to 0 to hide*/ .tabbrowser-tab:not([pinned]) .tab-icon-image { opacity: 100 !important; } /*center tab text*/ .tabbrowser-tab .tab-text {text-align: center;} .tab-content:not([selected]) { /*font-size:12px!important;*/ /*text-align: center !important;*/ opacity: 0.4 !important; } .tab-content[selected] { /*font-size:12px!important;*/ /*text-align: center !important;*/ opacity: 0.8 !important; }
megazildjian's avatar
megazildjianHobbyist Interface Designer
Please update for latest Firefox. Amazing theme before latest FF update broke it. 
ahfekz's avatar
Love this theme, just needed Favicons for a pop of color for me. For anyone wanting Favicons to show back up, delete find and delete the following below:

/*hide tab favicon*/
.tabbrowser-tab:not([pinned]) .tab-icon-image {
      display: none !important;
XeltosI's avatar
Any idea why sidebar icons are missing (Bookmark/Fav/Downloads) and icons for menu? (Addons etc)
maxxdogg's avatar
no more support for this theme. I dont have time to create uploads for flatfox. I'm focused on my very latest theme Firefox App. I'm working on uploads for this and also I'm planning to create dark version.
jseger9000's avatar
Is it possible to have the favicon and text on non-selected tab not be faded?
jseger9000's avatar
Figured that one out too;-)
jseger9000's avatar
Great theme. Makes Firefox look much better on Windows 10. Are you planning to add the tab icons back? That's all I miss from the standard Firefox theme.
jseger9000's avatar
Just figured it out. Not sure hiding favicons by default is a good idea. Edge does not do this after all.
tunabolism's avatar
Nice work mate, like your work!. Keep it up!
koningx's avatar
i don't get why are you being so offensive like mate

First of all , No i did'nt mean to take entire credit like ,( that was not my idea or thinking ), 

that's  why i asked you friend in the first place this -

"can/should i post it for others also giving you credit ?

or should i give you the modified code .txt file so you can make the gap fix in that to and post it later as the Blue version ?"


Otherwise why would i had even ask you,  i could have directly uploaded without even asking.
BUT I didn't mate. becuz i know the value of your work n effort.


(i said to write comments like /*BLACK GAP FIX TITLEBAR BUTTONS*/ in the code
 merely becuz to locate quick which part has been altered for Gap fix)

, Othewise i shall have to again search and look for the changed/edited parts in the entire code only for that one gap correction thing
and then use that small part in edited version)


-----------------------

it doesn't means that you have to question or assume like regarding anybody's knowledge.

No i don't have problems with simple changes in code,

n well i do have knowledge about HTML & CSS coding , but it's just i don't use it on daily and regular basis ,

otherwise how would i even possibly have understood which part of code did what and which should i edit .

which attributes and properties are for what , like child class selectors and id selectors which are in code.

i even know and famaliar of C , Java, ASP.Net, Databases MySQL and SQL server , functions and loops things ,

But it's it's just that i don't daily do it , only sometimes ,

so it's just i am not that much in practice and proficient rite now.


-----------------

by the way

for transparent urlbar?

you said

"Search in the end of code for #searchbar and #urlbar and change borders width to 0px and background color to transparent and that's all."

what you told that didn't work out for results what i wanted ,


so i had to edit

#urlbar:not ,

#navigator-toolbox

to make it work



and

plus ;) i figured out that bookmark starred thing , even before you wrote regarding it

that -

#bookmarks-menu-button:not([starred]) .toolbarbutton-icon,
#bookmarks-menu-button[starred] .toolbarbutton-icon,

Nevermind , but still thanks that you responded.


----------------------


Now you too said your theme is "Inspired by Microsoft Edge UI and based on 10fox

whose Author is  HughesMDflyer4

so i may be right or i may be wrong , cuz i have not seen you made this theme totally  from scratch entirely from Line 1

so this might not makes this theme 100 % yours.


----------------

Plus i too honestly agree and don't deny , imade only a handful of small tweaks/changes to it .
it's not that i am not accepting.

see i am accepting.

------------

Also, Just becuz somebody makes a steering wheel,  doesn't means others can't use that steering wheel or change it's look aspects in their car.


that's something i assume what Bill Gates said to Steve Jobs in movie "Pirates of Silicon Valley".


----------

you know mate , Previously i decided to make my own dark theme , more of Google chrome like tabs but dark version of it, not edge like

in .xpi format

But then i was lazy and  have other works to do also , so i thought n looked for if there is already other/any dark version of themes out there.

-----------

BUT Still i respect and admire your effort n work, n know the value of your work. whether its' 60% or 40 % or whatever %age that doesn't matter.

Thats' why i i asked you friend in the first place like this -


Can i upload or Not ? (your permission)

and i said this too -  i can give you my modified version so you can upload for others too the Blue version..


Otherwise i would not have even asked and Could have directly rather uploaded.


-------------

So No Hard feelings and i am not being offensive and you also don't need to friend. :)

Sometimes in life take people in life positively my dear.

For Not all people are bad people , greedy , stealers of others work and not honest .  :)


Anyways i can understand n know the kind of feeling you felt, when we feel someone tries to steal our work ,
we get bit protective  n you went slightly offensive for that.



Nevermind mate ! all cool. :)
maxxdogg's avatar
yep. maybe you're right in some aspects but yesterday I was tired of 12h coding and that's why I responded so angry and nervous. sorry. :) now I am trying to figure out how to remove shadow in context menu, urlbar autocomplete forms popup and searchbar popup my new theme Firefox App. #PopupAutoCompleteRichResult {box-shadow: none !important;} doesn't work :/
koningx's avatar
Well if you have fixed then please

Do Put Comments like /*BLACK GAP FIX TITLEBAR BUTTONS*/ in the code

so that i can copy that part only also into my modified version of your theme

{which is with "Blue Buttons n Edge like merged (Tab+Navbar+urlbar)"}

can/should i post it for others also giving you credit.

or should i give you the modified code .txt file so you can make the gap fix in that to and post it later as the Blue version ?
maxxdogg's avatar
so you have problems with simple changes in code and you dont have any knowloedge about CSS coding and you want to upload whole my theme with the only difference which are blue buttons and transparent urlbar? really? no you can't upload! -_- you can modify code for personal use. Of course you could upload this as your own theme based on mine that would be different from mine about 60% of whole code (it's more than 600 lines of code) so dont be funny.
koningx's avatar
i.imgur.com/kc6wtyW.jpg?1

this is a small flaw

when firefox window is maximized

How to remove this black gap - there is between close button and navbar.
maxxdogg's avatar
yes I know it was anoying. I already fixed this. Fix will be in the next update.
koningx's avatar
got that in /*COLORED ICONS*/

but i want a different blue , like the kind of my back button , lighter blue

can't find the matrix values

---------

update -

used the default inbuilt firefox blue color for starred and azure for not starred in code.

Done :) blue version of the theme
koningx's avatar
"#searchbar and #urlbar and change borders width to 0px and background color to transparent and that's all. "

that didn't seem to work out for what i wanted , tried that , so i tweaked with other values to achieve what i wanted

So far i have edited color values using

#urlbar:not

#navigator-toolbox  etc..back and forward buttons and Tab selected and Tab hovers colors.

------------

, Yet How can i change in code starred toolbar bookmark icon, the orange icon to blue color.

i.imgur.com/zC27T8y.jpg
maxxdogg's avatar
I think this is it:

#bookmarks-menu-button[starred] .toolbarbutton-icon

paste it to the /*BLUE*/ color section
maxxdogg's avatar
and delete it in the /*GOLD*/ section!!
sh2662's avatar
Thank you for beautiful theme! I would like to make a small adjustment, and I would appreciate if you give me an instruction on it!
Here is the comparison of firefox dark theme with the default theme in windows 10.

i.imgur.com/4tXCb9q.png

The total height of bars are equal in your FlatFox Light theme and the default theme, but the "bar with the url bar" is 1 pixel higher in the default theme, which makes a thin grey line at the bottom of the bar.
Personally I found this is good, and I am wondering if there is a way to do the same thing with your theme. Thank you!
maxxdogg's avatar
there is a couple of way to get this effect I think.

in the 17th line of code change -1px to 1px:
margin-bottom: 1px !important;

this is what U want?
sh2662's avatar
Thank you!
For Flatfox Light, that makes a little bit thicker line, but changing it to margin-botum: 1px, margin-top: -2px is almost similar as what I want!
Although it makes the total height 1 pixel smaller than the default theme of firefox. The bar with tab names get 2 pixel smaller with this setting.

I tried margin-bottom: 0px, margin-top: -1px, but this did not make a thin bar at the bottom.
This did not help with Flatfox Dark.
I am safisfied with this solution, but if you have further notes I would appreciate it!
koningx's avatar
One more thing  , On the right

the Windows minimize , maximize and restore buttons in the theme dont tend to change state on highlight.

Close Button only changes state on highlight.
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
©2019 DeviantArt
All Rights reserved