Shop Mobile More Submit  Join Login
UPDATE: FlatFox Light and Dark. by maxxdogg UPDATE: FlatFox Light and Dark. by 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!!!!!!!
Add a Comment:
 
:iconahfekz:
ahfekz Featured By Owner Edited May 20, 2016
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;
Reply
:iconxeltosi:
XeltosI Featured By Owner Mar 26, 2016
Any idea why sidebar icons are missing (Bookmark/Fav/Downloads) and icons for menu? (Addons etc)
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Apr 2, 2016
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.
Reply
:iconjseger9000:
jseger9000 Featured By Owner Mar 13, 2016
Is it possible to have the favicon and text on non-selected tab not be faded?
Reply
:iconjseger9000:
jseger9000 Featured By Owner Mar 13, 2016
Figured that one out too;-)
Reply
:iconjseger9000:
jseger9000 Featured By Owner Mar 13, 2016
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.
Reply
:iconjseger9000:
jseger9000 Featured By Owner Mar 13, 2016
Just figured it out. Not sure hiding favicons by default is a good idea. Edge does not do this after all.
Reply
:icontunabolism:
tunabolism Featured By Owner Jan 21, 2016
Nice work mate, like your work!. Keep it up!
Reply
:iconkoningx:
koningx Featured By Owner Edited Nov 20, 2015
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. :)
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 20, 2015
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 :/
Reply
:iconkoningx:
koningx Featured By Owner Nov 19, 2015
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 ?
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 19, 2015
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.
Reply
:iconkoningx:
koningx Featured By Owner Edited Nov 19, 2015
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.
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 19, 2015
yes I know it was anoying. I already fixed this. Fix will be in the next update.
Reply
:iconkoningx:
koningx Featured By Owner Edited Nov 19, 2015
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
Reply
:iconkoningx:
koningx Featured By Owner Nov 19, 2015
"#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
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 19, 2015
I think this is it:

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

paste it to the /*BLUE*/ color section
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 19, 2015
and delete it in the /*GOLD*/ section!!
Reply
:iconsh2662:
sh2662 Featured By Owner Nov 18, 2015
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!
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 19, 2015
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?
Reply
:iconsh2662:
sh2662 Featured By Owner Edited Nov 19, 2015
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!
Reply
:iconkoningx:
koningx Featured By Owner Nov 17, 2015
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.
Reply
:iconkoningx:
koningx Featured By Owner Nov 17, 2015
Superb Nice them !

but can you make version with removing those square boxes in url bar and search bar ,

to make it merge more into active Tab like in image below i have posted , like it's kind of in Edge.

so only url text , search text , and Active tab text is visible...

i.imgur.com/XlLZmTt.jpg?1
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 18, 2015
I won't create custom version just for you because I don't have time. You can change code for your own. 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.
Reply
:iconoakside24:
OAKside24 Featured By Owner Edited Nov 13, 2015   Digital Artist
Amazing. Beautiful. Thank you, maxxdogg! Especially for the Dark version.

Now that the Windows title bars are properly theme-colored (Windows 10 "Fall Update" 10586), Firefox looks quite "off" in all light-grey.
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 9, 2015
update for firefox v.42 is coming! unfortunately only light version for now because I dont have much time :(
Reply
Hidden by Commenter
:iconmindscap3:
minDScap3 Featured By Owner Edited Nov 18, 2015   Interface Designer
Delete this ->          

  /*hide tab favicon*/
.tabbrowser-tab:not([pinned]) .tab-icon-image {
      display: none !important;
}
Reply
:iconthatgamer1236:
thatgamer1236 Featured By Owner Oct 31, 2015
what text files????
Reply
:iconhendriaditya:
hendriaditya Featured By Owner Oct 21, 2015
thank you sir, you're the best.!
can you help me to match this color between bookmarks toolbar and title bar. i need the color on bookmarks bar same with title bar. thank
i.imgur.com/uWsmigx.png
Reply
:iconcrevative:
Crevative Featured By Owner Edited Sep 22, 2015
Bookmarks look off in the dark version, with the pitch black font.
Also, if you have many tabs open (read: a shitload), the arrow buttons that appear have the generic Firefox gradient on them. Same with the 'new tab' button.
Other than that it looks freaking perfect.
Edit: I merged some code from another style into this one and got the bookmarks sorted. They even work with Beyond Australis.
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Sep 25, 2015
yes U are abosultely right.. I know that scroll tab arrows and new tab button when U have "shitload" are ugly. I fuckin hate it but I dont know how to change it :/ If U have some ideas or U have code which can modify it please tell me I will make some update.
Reply
:iconmahpooya:
mahpooya Featured By Owner Sep 15, 2015
bug in pinned tab
pinned tabs are smaller in height
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Edited Sep 25, 2015
I have never used pinned tabs so I didnt change it and secondly I dont know how to change it :( If U have some ideas or U have code to modify it please send me I will make an update :)
Reply
:iconricardit0:
ricardit0 Featured By Owner Sep 10, 2015
Hey man, your theme is fantastic! But i need view favicons in the tab. How to solve this?
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Sep 10, 2015
comment 470-472 lines of code.
Reply
:iconricardit0:
ricardit0 Featured By Owner Sep 10, 2015
Oh really thanks, now beautiful for me:

imageban.net/show/2015/09/11/5…
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Sep 11, 2015
how U got the bookmarks star in url bar?
Reply
:iconricardit0:
ricardit0 Featured By Owner Sep 11, 2015
I use Classic Theme Restorer
Reply
:icond--e--v--i--a--n--t:
D--e--v--i--a--n--t Featured By Owner Edited Sep 9, 2015  Hobbyist Interface Designer
Great Dark Theme!

You're next effort for a truly complete theme is to customize-darken all menu including the bookmarks menu, maybe even create your own custom icons for the bookmarks menu and panel UI.
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Sep 9, 2015
If it was so easy I would do that but I dont know how for now. I am still learning CSS for Firefox :( maybe someone who is good at it could complete my theme to get perfect and fully modded style :D
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Sep 8, 2015
dark version uploaded!
Reply
:iconpikebg:
pikebg Featured By Owner Edited Sep 7, 2015
Great job men... one question.... can you change the buttons back and forward to be the same like in edge?  and... how to remove blue border on url bar... tx
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Nov 9, 2015
Yes I can change but I dont have time for it now.
I think that blue border on url bar is not bug in my theme but maybe U have old version of firefox. I dont have that blue border. Try to update firefox
Reply
:iconmaxxdogg:
maxxdogg Featured By Owner Sep 8, 2015
to remove blue border on url bar add this to the code:

#urlbar {
    color: #757983 !important;
    font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif;
    font-size: 13px;
    box-shadow: none !important;
    padding-left: 13px !important;
    border-color: rgba(229,229,229,1) !important;
}

#searchbar .searchbar-textbox {
    color: #757983 !important;
    font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif;
    font-size: 13px;
    box-shadow: none !important;
    margin-left: 5px !important;
    margin-right: 10px !important;
    padding-left: 1px !important;
    border-color: rgba(229,229,229,1) !important;
}
Reply
:iconpikebg:
pikebg Featured By Owner Sep 8, 2015
tx men
Reply
:iconvam:
vam Featured By Owner Edited Sep 4, 2015  Professional Interface Designer
Superb! Looking forward to the dark version!
Reply
Add a Comment:
 
×




Details

Submitted on
August 27, 2015
File Size
371 KB
Link
Thumb
Embed

Stats

Views
14,308 (2 today)
Favourites
83 (who?)
Comments
73
Downloads
4,931
×