Deviation Actions

killhellokitty's avatar

DeLorean-Dark-Theme-3.6 - Firefox-Theme 1.0

Published:
16 Comments
22K Views
DeLorean-Dark-Theme-3.6 for Firefox 16+

This theme is different from others.
Due to the rapid changes that occur within Firefox's CSS for 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. And the ability to make adjustments is simple for either accessability, or just preference.

This new version is intended for those using the 3.6 version of Delorean-Dark. Many changes have been made to this version: coloring, app-menu, private-browsing, download-manager, tabs,bookmarks-bar...

The theme included within both userChrome.css and userContent.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-3.6.
    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:
This is because I find that the theme scrollbars look bad within webpages. *May not be 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 Clean Webpage Scrollbars
  • Copy and paste the following...


      @-moz-document url-prefix(http://),
      url-prefix(https://) {

      body scrollbar,
      body scrollcorner {
      -moz-appearance: none !important;
      padding: 1px !important;
      background: transparent !important;
      }
      body scrollbar[orient="vertical"] {
      width:13px !important;
      border-radius: 17px !important;
      background: rgba(255,255,255,0.04)!important; /*for dark webpages*/
      box-shadow: 0px 0px 1px #1d1d1d inset,
      4px 0px 7px rgba(0,0,0,.15)inset !important;
      }
      body scrollbar[orient="horizontal"] {
      height:13px !important;
      background: rgba(255,255,255,0.04)!important; /*for dark webpages*/
      box-shadow: 0px 0px 1px #1d1d1d inset,
      0px 4px 7px rgba(0,0,0,.15)inset !important;
      }
      body thumb,
      body thumb[height]:not([width]) {
      min-height: 42px !important;
      -moz-appearance: none !important;
      border: 0 solid rgba(0,0,0,0.0) !important;
      border-radius: 17px !important;
      background: #006AA8 -moz-linear-gradient(to right,
      rgb(40,134,189),
      rgb(0,116,184)40%,
      rgb(0,66,105))!important;
      }
      body thumb[orient="horizontal"],
      body thumb[width]:not([height]) {
      min-width: 42px !important;
      -moz-appearance: none !important;
      background: #006AA8 -moz-linear-gradient(to bottom,
      rgb(40,134,189),
      rgb(0,116,184)40%,
      rgb(0,66,105))!important;
      }
      body thumb {
      opacity: 0.3 !important;
      }
      body thumb:hover,
      body thumb:active,
      body thumb:active:hover {
      opacity: 0.8 !important;
      }
      body scrollbar scrollbarbutton {
      visibility: collapse !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.0 - dec 1 2012 Posted this new theme for Firefox.
© 2012 - 2021 killhellokitty
Comments16
Join the community to add your comment. Already a deviant? Log In
Hi, thank you for the theme. Do you plan a slight update for firefox 32+? the tab bar does not work that well =(
GaboXandre's avatar
Great theme, thanks!
this is wonderful. wanted such a thing always.
Thank you!! :D
NanoDano's avatar
This rocks!! Firefox themes can also be used to style LibreOffice. Doing so though requires me to input an addons.firefox URL to a theme hosted there. Do you have any intentions of sharing your awesome theme in the official firefox theme list? [link]
Jacker87's avatar
works on xp sp3???? pls how???
Jacker87's avatar
works on xp sp3??????
killhellokitty's avatar
Some of it will work and the parts that are themed by Gtk within Linux will take on the xp theme you are running. Its not very pretty. Sorry.
Hi. Theme is great, but I can't find a way to change the GMail compose field color or at least the font-color in the compose field. With this FF theme (and with the previous delorean-dark FF themes also) the compose field in GMail is dark gray and the font is black.

What would be the proper way to change either background color or the font color to a lighter value?
killhellokitty's avatar
That is an issue with this theme. Changing the values for 'text-input' in the userContent may fix this. For the lastes version DeLorean-Dark-Themes-3.8, the 'FT DeepDark' Firefox theme matches great.
I dont know how to open a folder name chrome in Firefox ?? i could find it. Please can you be more especific ??

Regards !!!!
Could you please match the checkboxes and radio buttons to this [link] theme? :)
hybrld's avatar
Looks great thank you. Will you be doing a Chrome theme? (Google Chrome)
killhellokitty's avatar
Thank you. There is a Chromium Theme. [link]
Join the community to add your comment. Already a deviant? Log In