killhellokitty's avatar

DeLorean-Dark Firefox-Theme 1.60

26 32 34K (1 Today)
By killhellokitty   |   Watch
Published: September 11, 2012
DeLorean-Dark-Theme for Firefox 15+
*For 3.6 go here:Link
Works in Windows7(will work with other versions) as well as Linux
To install in Windows the path is: '%AppData%\Mozilla\Firefox\Profiles\<profile>\' Copy and paste the entire included 'chrome' folder into the path.


This theme is different from others.
Due to the rapid changes to Firefox's CSS that occurs for each and every version update. I decided instead of creating a theme that will have to be updated for every new version of Firefox, I would create a userChrome.css file that contains all the theming within it. The main advantage is that updates to Firefox's CSS code will not break this theme because it is simply a layer drawn on top of the default Firefox theme . The code is easy to view and change. The theme does not rely upon some Third-Party for an Ad-On. And the ability to make adjustments is simple for either accessability, or just preference.

The theming in the included userChrome.css is intended to be applied to Firefox using its Default-theme while the DeLorean-Dark theme is selected as the systemwide GTK-Theme.

INCLUDES:
  • userChrome.css: Is for user-specified theming of Firefox's GUI. It contains the code for the DeLorean-Dark theme.

  • userContent.css: Is for user-specified theming inside of web-pages. It contains fixes to keep the contents of Entry-boxes, Drop-Down-Menus etc visable when using a dark-theme.

  • images-folder: Contains the image files that are called for within the userChrome.css.

INSTALLATION:
  • Open the included folder: Chrome

  • Inside locate the 'userChrome.css', 'userContent.css' and the 'images' folder.

  • Select all THREE to copy.

  • *If you have previously made changes to your Firefox userChrome and userContent,
    be carefull not to over-write them.
    Add the code from your old userChrome and userContent to the TOP of the the new files
    (but, underneath the absolute top-most line beginning with '@namespace'...).
    Please note, that some or all of your old code from userChrome.css may conflict with the new theme code. Although this is highly unlikely.
    Adding it to the top of the file will make it secondary to the new theme's code.
    userContent shouldn't have any conflicts. But again, add it to the TOP of the new theme file.

  • PASTE all three into your Firefox User Profile: '~/.mozilla/firefox/userprofile/chrome/'
    *** Where 'userprofile' is XsomeNumbers.default folder.

  • **** Alternatly one may choose to create a new User-Profile specifically for the DeLorean-Dark-Theme.
    To open the Profile-Manager for Firefox:
    Important: Before you can start the Profile Manager, Firefox must be completely closed.
    In Terminal or using Alt/F2 (run-dialog) type: firefox -P

  • More information on creating and utilizing User-Profiles in Firefox may be found Here

TO UNINSTAL:
  • Remove the 'userChrome.css' and the 'images' folder from Firefox User Profile: ~/.mozilla/firefox/userprofile/chrome/


For additional options to add into these default files: userChrome.css and userContent.css located within the 'chrome' folder you just installed. See - Mozilla Customizations: [link]
ArchLinux Wiki: [link]


SCROLLBAR-FIX:
needed for DeLorean-Dark ver 1.54+ & DeLorean-Dark ver 2.54+ *Not necessary for Ubuntu users with Overlay-Scrollbars
  • First install the Firefox (& or Thunderbird) Add-on 'Stylish' LINK
  • Open Add-Ons page and on the left column select 'User-Styles'
  • On the top left corner of the center box click on the 'Write New Style' button
  • For Name enter DeLorean-Scrollbar-Fix
  • Click on the 'Insert' button and select 'XUL namespace as default
  • Copy and paste the following underneath the line that begins with "@namespace url..."

      scrollbar,
      scrollcorner {
      -moz-appearance: none !important;
      padding: 1px !important;
      background: transparent !important;
      }
      scrollbar[orient="vertical"] {
      width:13px !important;
      box-shadow: 0px 0px 1px #1d1d1d inset,
      4px 0px 7px rgba(0,0,0,.15)inset !important;
      }
      scrollbar[orient="horizontal"] {
      height:13px !important;
      box-shadow: 0px 0px 1px #1d1d1d inset,
      0px 4px 7px rgba(0,0,0,.15)inset !important;
      }
      thumb, thumb[height]:not([width]) {
      min-height: 42px !important;
      }
      thumb[orient="horizontal"], thumb[width]:not([height]) {
      min-width: 42px !important;
      }

  • Press save, and Restart Firefox for the changes to take effect
  • *Unfortunately Firefox does not allow changing of the Scrollbars within either the UserChrome.css or UserContent.css. Therefore the need to use stylish to correct the issues with the scrollbars.

    CHANGELOG:
    vs. 1.32 - Forgot to move the '@namespace line' to the very top of the userChrome.css file. FIxed now.
    vs. 1.40 - Many additions for a better browser experience: 1)Background for blank tab and Firefox startup blank page; before homepage loads. 2)Add-ons Manager themed. 3)New Tab Window themed. 4)Mozilla start page, I was able to add a slight darker gradient over the page for a better match with this dark theme. 5)Blank background before clicked link page loads, themed.
    The user should nolonger get a flash of white before a page loads.
    vs. 1.50 - Finished Mozilla Start-Page, it now matches the theme. StatusPanel themed dark to match.
    vs. 1.60 - Sept 26 - Fixed the missing background-image for Mozilla Start Page. Added TreeView's Text-input, Spinn-buttons, & Headers. Most of these additions affect the Preferences-Window and DOM-inspector.
    Oct 21 - Updated the Scrollbar-Fix. Its been trimmed down. For those who would like a thicker/thinner scrollbar in Firefox simply change the values: 'height:13px' and 'width:13px'. The scrollbar itself is set to 'transparent', change this to any color( may be necessary for those with visual impairment.)
Comments32
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
TheAngeldove's avatar
TheAngeldoveProfessional Interface Designer
:iconpurplebutterflyplz:¸¸♥´¯) Thank you so much!
(¸☆´ (¸.♥´´¯`•.¸¸.ღ •.♥ .•´¯`•.¸¸.••Ƹ̵̡Ӝ̵̨̄Ʒ
:iconsparklesplz:


Your Friend Always,
dove :butterfly:
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
You are very welcome!
Cheers!
julio1963's avatar
Hi
I'm using Ubuntu 12.04 LTS. Have you Ubuntu Orange version instead of blue?
Thanks
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
Sorry, but no I don't have an Orange version.
gmoney41685's avatar
That did it! Thank you!
gmoney41685's avatar
I'm having problems making this work on FireFox 23.0.

"Add the code from your old userChrome and userContent to the TOP of the the new files"
    
     -I don't have these "old" files is that because I have never mod'ed FF? That's what I assumed so I tried skipping that part and continued on to the next step.

"PASTE all three into your Firefox User Profile: '~/.mozilla/firefox/userprofile/chrome/"

     -There is no chrome folder in that location, the only one I can find is ~/.mozilla/firefox/userprofile/chrome/IndexedDB/Chrome is that where the folder and 2 .css files go? I tried putting them there and it didn't do anything. I also tried putting them at ~/.mozilla/firefox/userprofile and it didn't do anything.

Am I even close? I really like this theme I got
DeLorean-Dark_1.55 working just fine. Thanks.
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
You are close.
It is normal for there to be no 'chrome' folder within user profile.  Generally it only exists if you had made personal changes to the look of firefox previously. 
Simply create a 'chrome' folder directly within your 'userprofile(XsomeNumbers.default)' folder.
Then copy and paste the DeLorean-Dark
'userChrome.css', 'userContent.css' and the 'images' folder into the newly created 'chrome' folder.
Restart Firefox for the changes to take affect.

I hope this gets it working for you.  Let me know if there is anything else i can do.
-Cheers!
gmoney41685's avatar
That worked, thanks! My icons (back, forward, home, etc.) are not darkened like yours, what did you use for that?
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
Glad that worked.  I used a dark icon theme.  I'm really not sure what icon theme i was using back then.  Experiment with some different ones.  I am sure you will find one you like.
alexi4213's avatar
greatl!
But the form element is black,Looks rather ugly
jamerlan's avatar
WOW! Scrollbars are really awesome! Good job!
Also thank you for gnome 3 theme! I love it!!!
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
Thank You :-) I put a lot of work into the scrollbars. And I'm psyched about the results. Thanks for the message!
Cheers!
Rasa13's avatar
Awesome, got it working, But why doesnt my start page look like yours? Everything looks great except the new tab page.
hmm, maybe its because i have speed dial enableed...
Beautiful theme though. Thanks. <3
Rasa13's avatar
this is what i mean.. [link]
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
I am sorry, I double checked the images folder in the chrome and noticed that i hadn't included the metallic background image. I will upload a new version with the correction later today. I will also include fixes for the DOMinspector.
Rasa13's avatar
this is beautiful! i wish the chrome one looked just like this! :love:
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
Thank you for the compliment. Chromium is ... difficult. Much of the browser can not be themed at this point and that causes strange issues with its appearance. I don't believe they had in mind that a background in GTK would be an image file. Its not me, its the browser. Opera is another i've looked into but it is written in Qt and full theming for it is a massive undertaking. For now Firefox is the browser of choice for this theme.
Rasa13's avatar
Thanks very much for the reply. :)
Firefox is my preferred browser anyway,
I just havnent been using it for a few weeks due to some mem. leaks, but i love this theme soo much Im thinking about using FF again just for it. lol :) <3
ShippD's avatar
looks great will it work in windows also
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
I have no idea if it will work in Windows. What i mean to say is that, the parts that are themed in the userChrome.css will work in Windows also. Everything else though uses the system theme(what ever theme you currently have selected). I suppose if you have a dark theme in Windows and add this user profile it may work okay. AHH--LOL, If you use Windows, why don't you get back to me and let me know how it works out.
If it doesn't look good in Windows i suppose someone could add the missing widget definitions to the userChrome.css.
ShippD's avatar
hmm do not see a user folder but will look into it
killhellokitty's avatar
killhellokittyHobbyist Interface Designer
On Windows systems, the default location of the profile folder containing your user data is under the "Application Data" folder in Windows XP and below or under the "AppData\Roaming" folder in Windows Vista and above. In Windows 2000 and above, these folders are hidden. To find your profile folder in Windows 2000/XP/Vista/7:

Press [Windows Key]+[R] → Type in %APPDATA% → click OK

A Windows Explorer window will open, showing the contents of the C:\Documents and Settings\<user name>\Application Data folder (Windows 2000 and XP) or the C:\Users\<user name>\AppData\Roaming folder (Windows Vista and 7). You can then open successive folders until you get to the profile folder.
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In