Chrome

Linnhe Web Site for Mark S Baines and of Linnhe Observatory, Highlands, Scotland

Copyright 2002-2010 Mark S Baines All Rights Reserved
Last Updated: 01 07 2010

 

The userChrome.css file can be used to modify the default style of the user interface. You can change the complete look and feel of Thunderbird by placing the appropriate Cascading Style Sheet (CSS) code in this file. If you don't know about CSS then don't worry, you can copy what I've got below and maybe fiddle with some bits to see what happens.

The userChrome.css file isn't created by default when Thunderbird is first installed. You can create your own in the Thunderbird profile folder. Here's how to locate your Thunderbird profile folder. For instance, for Windows XP it should be somewhere like:
C:\Documents and Settings\<username>\Application Data\Thunderbird\Profiles\<random number>.default
<username> is your Windows login account name. In this folder create a folder called 'chrome' and within this create a text file called 'userChrome.css' (without the quote marks).  For Linux (and Mac users?), the upper case C in the middle is significant.

The first line of the file should be:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */

After this you can insert your code. Here's some I've discovered and others I've collected from various sources. I don't, by any means, suggest that you add all of this code - I've no idea what would happen, some of it is contradictory at best. These are examples of what is possible. It's up to you to choose what suits you best and experiment. Have fun!

NEW If you've used some of this code, please give your userChrome.css file a look over when upgrading to Thunderbird 3.0. Some code may not work and some may be unnecessary. Probably best to use an empty userChrome.css file to see what Thunderbird 3.0 looks like then add the bits you want a few at a time to see the effects.

Column headings
Change the font for the whole of Thunderbird
Hide menu separators
Hide menu icons
Remove spacing between the menus
Hide specific menus
Hide specific menu items
Hide keyboard shortcuts in menus
Menu colours
Menu items font size
Menus and menu items font size
Hide toolbar borders
Toolbar height
Dialogs
ViewPicker and SearchInput box
Attachment pane
Attachment filename truncation
Notification Bar when showing a draft message
Tree text highlight when not in focus
Thread pane text format
Change Thread pane alternating row colours in Thunderbird 2 and 3
Thread pane grid lines
Thread pane grid lines - alternative method
Thread pane alternating coloured lines, remove in Thunderbird 2 and 3
Read column icon
Reverse windows layout
Account mail folder main page title
Account mail folder main page subtitles and text
Account mail folder main page background
Status toolbar colours
Status toolbar background image
Status toolbar font and height
Status toolbar panels
Folder pane font
Folder pane - unread mail and new mail display
Folder pane new mail star Thunderbird 3
Folder pane alternating row colours Thunderbird 2.0
Folder pane Close button
Hide All Folders header
Folder view cycle buttons Thunderbird 3.0.1
Pane splitters
Progress Bar colour
Text box rounded corners
MR Tech Local Install extension

You may have noticed that the column headings above the list of emails is higher than the folder pane headers and those in the address book. This makes them all the same. Adjust the height as you want. Thunderbird 2 and 3 compatible.

/* change height of all column headings including Folder pane and Address Book */
#threadTree > treecols,
#folderTree > treecols,
#abResultsTree > treecols {
  -moz-appearance: none !important;
  height: 18px !important;
}
#abDirTreeHeader,
#folderPaneHeader {
  -moz-appearance: none !important;
  height: 18px !important;
}
/* change height of Folder Pane headers  */
#folderPaneHeader,
#additionalFolderPaneHeader,
#abDirTreeHeader {
  -moz-appearance: none !important;
  min-height:  20px !important;
}

This changes the default font for the whole program, everything will appear as this style. Anything else you add to the userChrome.css file after this code may override this, so you can make individual settings, such as a larger font for the menus.

/* global font */
* {
  font-size: 9pt !important;
  font-family: Verdana !important; 
}

Sometimes there are too many separators in menus. Replace "menu item name" with the name of the menu item you see in the menu above the separator you wish to hide.

/* hide extra menu separator */
menuitem[label="menu item name"] + menuseparator {
  display: none !important;
}

Add this to strip menus to their barest!

/* hide the menu separators */
menuseparator {
  display: none;
}

Notice how I've commented out the View and Message menus because these often have icons I want to see, such as ticks. Remove the /* and */ characters around them if you want them included as well.

/* Don't display menu icons in some menus */
menu[label="File"] menuitem,
menu[label="Help"] menuitem,
/*menu[label="View"] menuitem,*/
menu[label="Edit"] menuitem,
/*menu[label="Message"] menuitem,*/
menu[label="Tools"] menuitem,
menu[label="Tools"] menu {
  list-style-image: none !important;
}

Close up the menu headings in the menu bar. You could use all that space to the right of the Help menu to drag icons onto (right-click and "Customize...").

/* remove spacing between menus on menu bar */
menubar > menu {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

You may wish to hide a menu that you don't use, such as the Go menu. Change the label to the menu you wish to get rid of.

/* hide the Go and Help menus */
menu[label="Go"],
menu[label="Help"] {
  display: none !important;
}

Some menu items are superfluous, some just take up space and clutter.

/* hide some menu items */
menuitem[label="Subscribe..."],
menuitem[label="Release Notes"] {
  display: none !important;
}

To get an even cleaner, uncluttered look to the menus you can hide the keyboard shortcuts strings.

/* Don't display keyboard shortcuts in menus */
/* With Cutemenus or MR Tech Local Install extensions */
.menu-iconic-accel {
  display: none !important;
}
/* Thunderbird */
.menu-accel {
  display: none !important;
}

As with everything, colours can be changed, font and background. This page provides a list of all the colours you can use on web pages, Firefox and Thunderbird. You can use the names or their hex values - or create your own!

/* change font color of popup menus */
menupopup > menu,
menupopup > menuitem,
popup > menu,
popup > menuitem {
  font-weight: bold !important;
  color: darkslateblue !important;
  background-color: linen !important;
}

The text of dropdown menu items can be changed like anything else. Here it is changed to 9pt. You can also change the font family, style etc as above. This affects menu dropdowns on the toolbar as well.

/* change font size of menu items */
menupopup > *,
popup > * {
  font-size: 9pt !important;
}

If you just want to change the font size (or family etc) of the main menus and items then this will do. If you only want to change the menu bar and not the dropdown menu items then leave out the "*" after the word "menu".

/* change font size of menu items */
menubar > menu * {
  font-size: 12pt !important;
}

This hides the horizontal lines between toolbars. It gives a very clean and uncluttered appearance. Use spaces between icons instead of separators to improve the look.

/* hide toolbar borders */
#mail-toolbar-menubar2,
#mail-bar3,
#compose-toolbar-menubar2,
#composeToolbar2,
#MsgHeadersToolbar,
#addrbook-toolbar-menubar2,
#ab-bar2,
#FormatToolbar {
  -moz-appearance: none !important;
  border-style: none !important;
  border-width: none !important;
}

Change the height of toolbars. You can reduce the space to whatever you want.

/* make toolbars (not menu bars) slightly bigger than icons */
.toolbar-primary {
  height: 32px !important;
}

There is a bug in Firefox and Thunderbird that causes some dialogs to be sized wrongly whereby buttons or fields at the bottom can't be accessed. In Thunderbird there are several such dialogs; the Account Manager dialog and (less common) the Mail Preferences dialog especially. You can adjust their heights with this code. Again, you might need to change the numbers.

/* to make Account Manager window fit contents */
#accountManager {
  -moz-appearance: none !important;
  width: 55em !important;
  height: 48em !important;
}
/* to make Mail Preferences window fit contents */
#MailPreferences {
  -moz-appearance: none !important;
  width: 44em !important;
  height: 40em !important;
}
/* Link Properties extension window modify */
#metadata {
  -moz-appearance: none !important;
  width: 60em !important;
  height: 15em !important;
}

You can change the width of the ViewPicker and SearchInput boxes. I also don't like that they are different heights, so I change that as well.

#viewPicker {
  height: 24px !important;
  width: 140px !important;
}
#searchInput {
  height: 24px !important;
  width: 160px !important;
}

This increases the height of the Attachment pane at the bottom of the message window to show more icons. Here I've sized it to two rows.

/* Attachment pane at bottom of message window */
#attachmentView {
  -moz-appearance: none !important;
  height: 48px !important;
  overflow: auto !important;
}

Long attachment filenames are truncated in the Attachment pane. This gives them more room to display the whole filename.

/* stop attachment filename being truncated */
.attachmentBox {
  width: auto !important;
  max-width: none !important;
  min-width: 15em !important;
}

This can be too large. I also don't like the way the contents look.

/* Notification bar when showing a Draft Message */
#editMessageBox {
  height: 16px !important;
  max-height: 16px !important;
}
#editMessageDescription {
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 8pt !important;
  color: blue !important;
}

I found that when I had a folder selected or an email in the Thread pane, it changed its highlight colour when not in focus, that is when I selected some text in the email or brought up the context menu. I prefer it to remain highlighted. You may need to change the color from black to suit your system Selected Items highlight scheme. A selected row takes the colour of the system selected text (Highlight). Substitute your own colours for "Highlight" and "-moz-Dialog" and for color depending on your system highlighted (selected) text colours.

This must go above any other treechildren code such as the Thread pane code below.

/* make all tree text (folders, address pane etc) use highlight colour even when not in focus */
/* must be first before any other treechildren code such as Thread pane text format below */
treechildren::-moz-tree-cell-text(selected) {
  background-color: Highlight !important;
  color: black !important;
}
tree[selstyle="primary"] > treechildren::-moz-tree-row {
  border: none !important;
  background-color: transparent !important;
}
treechildren::-moz-tree-row(selected) {
  background-color: -moz-Dialog !important;
}
treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

The Thread pane shows your list of emails. The text here can be styled in many ways. Here is one where unread mail is shown in forestgreen and bold to match the green unread icon. A selected row takes the colour of the system selected text (Highlight). Substitute your own colours for "Highlight" and "-moz-Dialog" and for color depending on your system highlighted (selected) text colours.

/* Thread pane text */
treechildren::-moz-tree-cell-text(unread) {
  font-size: 8pt !important;
  font-family: Verdana !important;
  font-weight: bold !important;
  color: forestgreen !important;
}
treechildren::-moz-tree-cell-text(selected, unread) {
  font-size: 8pt !important;
  font-family: Verdana !important;
  font-weight: bold !important;
  color: limegreen !important;
}
treechildren::-moz-tree-cell-text(read) {
  font-size: 8pt !important;
  font-family: Verdana !important;
  font-weight: normal !important;
  color: black !important;
}
treechildren::-moz-tree-cell-text(selected, read) {
  font-size: 8pt !important;
  font-family: Verdana !important;
  font-weight: normal !important;
  color: black !important;
}
tree[selstyle="primary"] > treechildren::-moz-tree-row {
  border: none !important;
  background-color: transparent !important;
}
treechildren::-moz-tree-row(selected) {
  background-color: -moz-Dialog !important;
}
treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

Add this code if you would like alternating background colours. This isn't necessary in Thunderbird 2 and 3 as it uses background images instead of background colours.

/* Thread pane alternating row colours */
treechildren::-moz-tree-row(odd) {
  border: 1px solid transparent !important;
  background-color: #FFFFFF !important;
}
treechildren::-moz-tree-row(even) {
  border: 1px solid transparent !important;
  background-color: #EFEFEF !important;
}
treechildren::-moz-tree-row(current, focus) {
  border: 1px dotted #000000 !important;
}
treechildren::-moz-tree-row(selected, current, focus) {
  border: 1px dotted #A0A0A0 !important;
}
tree[selstyle="primary"] > treechildren::-moz-tree-row {
  border: none !important;
  background-color: transparent !important;
}
/*must go after the above */
treechildren::-moz-tree-row(selected) {
  background-color: -moz-Dialog !important;
}
treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

Alternating row colours are standard in Thunderbird 2 and 3. The background colour is an image (why, who knows?) rather than a background colour. To change it you need to remove the image first.

/* change Thread pane alternating row colours TB2 & 3 */
#threadTree treechildren::-moz-tree-row(odd) {
  -moz-appearance: none !important;
  background-image: none !important;
  background-color:#EFEFEF !important;
}
#threadTree treechildren::-moz-tree-row(selected) {
  background-color: -moz-Dialog !important;
}
#threadTree treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

Some people find it easier to look through the email list in the thread pane if they were in a grid like the Eudora thread pane. This is an alternative to above.

/* horizontal grid lines */
#threadTree treechildren::-moz-tree-row() {
  border-bottom: 1px dotted grey !important;
}
/* vertical grid lines */
#threadTree treechildren::-moz-tree-column() {
  border-right: 1px dotted grey !important;
}
There is a problem in Thunderbird where the background colours in the treechildren::-moz-tree-row statements overwrite any treechildren::-moz-tree-column colours. So this code below will not work with the above alternate odd/even colour scheme. You will get horizontal grid lines but not vertical ones.

A solution is to use treechildren::-moz-tree-cell instead for the vertical lines. So if you want background colours to the rows then use this code instead for a grid.

/* horizontal grid lines */
#threadTree treechildren::-moz-tree-row() {
  border-bottom: 1px dotted grey !important;
}
/* vertical grid lines */
#threadTree > treechildren::-moz-tree-cell {
  border-right: 1px dotted grey !important;
}
/* vertical grid lines for blank area of thread pane */
#threadTree treechildren::-moz-tree-column() {
  border-right: 1px dotted grey !important;
}

I am indebted to Michael Venables for this. He wanted grid lines but also wanted some columns not to have vertical lines so that they seemed contiguous with the adjacent column. He came up with the code below. In the remove some columns section, you change the column ID names to the ones that you don't want to have vertical line separators for. In Thunderbird 3 there are 19 column types and the corresponding ID of the -moz-tree-cells are:

Column Type Column ID Column Type Column ID
Junk Status junkStatusCol Lines sizeCol
Starred flaggedCol Account accountCol
Attachments attachmentCol Priority priorityCol
Thread threadCol Unread unreadCol
Read unreadButtonColHeader Total totalCol
From senderCol Order Received idCol
Recipient recipientCol Tag tagsCol
Status statusCol Received receivedCol
Date dateCol Location locationCol
Subject subjectCol
/* Draw the rows and columns */
/* vertical grid lines for populated cells */
#threadTree > treechildren::-moz-tree-cell {
  border-right: 1px solid #C0C0C0;
}

/* vertical grid lines for blank space */
#threadTree treechildren::-moz-tree-column() {
  border-right: 1px solid #C0C0C0;
}

/* horizontal grid lines */
#threadTree treechildren::-moz-tree-row() {
  border-bottom: 1px solid #C0C0C0 !important;
}

/* Remove some column lines */
/* vertical grid lines for populated cells */
#threadTree > treechildren::-moz-tree-cell(statusCol),
#threadTree > treechildren::-moz-tree-cell(priorityCol) {
  border-right: none !important;
}

/* vertical grid lines for blank space */
#threadTree treechildren::-moz-tree-column(statusCol),
#threadTree treechildren::-moz-tree-column(priorityCol) {
    border-right: none !important;
}

The alternating coloured lines in the Thread pane are default in Thunderbird 2 and 3. You can remove them with this:

/* remove alternating coloured lines TB2 & 3 */
#threadTree treechildren::-moz-tree-row(odd) {
  background-image: none !important;
}

I prefer the original 'spectacles' icon in the Read column to the 'dot' icon. Here is the icon used in the code below, right-click on it, select "Save Image As..." and place it in your chrome folder. Yes, there is something there, it will appear OK in Thunderbird.

#unreadButtonColHeader {
  list-style-image: url('readcol.png') !important;
}

Here's a neat trick. You can have the Preview window on top and the Thread pane beneath with this code:

#messagesBox {
  -moz-box-direction: reverse;
}

When you click on each account folder you get a page that tells you it's name - the title, Email, Accounts and Advanced Features. The main title is quite large. You can change that and its colour, font family, style etc.

/* change Account main page title font style */
#AccountCentralTitle {
  font-size: 16pt !important;
  font-family: Verdana !important;
  font-weight: bold !important;
  color: navy !important;
}

The subtitles and text of the above page are also too large. You can change that and their colour, font family, style etc.

/* change Account main page subtitles and text font style */
.acctCentralRowTitleBox {
  font-size: 10pt !important;
  font-family: Verdana !important;
  font-weight: bold !important;
}
.acctCentralText {
  font-size: 9pt !important;
  font-family: Verdana !important;
  padding-top: 6px !important;
}

In addition to above you can change the background colour.

/* change Account main page background */
#acctCentralGrid {
  background-color: lightgrey !important;
}

This changes the status toolbar panels to black with white text.

/* change colours of status toolbar panel */
#status-bar statusbarpanel {
  -moz-appearance: none !important;
  background-image: none !important;
  background-color: black !important;
  color: white !important;
}

This instead places an image "background,gif" in the status toolbar panels instead. Place your image in the chrome folder.

/* change background of status toolbar */
window statusbarpanel {
  -moz-appearance: none !important;
  background-image: url('background.gif') !important;
  background-color: transparent !important;
}

Change the font size and family, even style. Also the height of the status toolbar. Mix and match with the above.

/* change status toolbar height and font */
#status-bar {
  max-height: 17px !important;
  font-size: 8pt !important;
  font-family: Comic Sans MS !important;
  font-style: italic !important;
  font-weight: bold !important;
}

This hides the borders between every panel in the status bar including the bottom border giving a cleaner look which complements that of not having toolbar separators above.

/* hide status toolbar panel borders */
statusbarpanel {
  -moz-appearance: none !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
}

This changes the folder pane text and other folder trees, such as in Address Book and Contacts list in Compose window.

#folderTree > treechildren,
#abResultsTree > treechildren,
#dirTree > treechildren,
#accounttree > treechildren{
  -moz-appearance: none !important;
  font-size: 8pt !important;
  font-family: Verdana !important;
}

I prefer to not have the folder's name highlight unread or new mail by becoming bold, in fact I also like them to be green like the unread and new mail shown in the Thread pane. Also, you can have unread and new mail display differently. For instance, below I have unread mail green with normal font style, but new mail shows as green with italic font style. Also below I have selected folder menu items a slightly different green colour because I use a dark background for selected items. You can delete the parts below for selected items if you wish or change both non-selected and selected the same colour.

If elsewhere you set the selected text to be any other colour (for instance, I use blue background, white text system-wide) this must go after any other code for treechildren::-moz-tree-cell-text(selected).

/* make folders with unread mail green (and not bold as default) */
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
  font-weight: normal !important;
  color: #219E21 !important;
}
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected) {
  font-weight: normal !important;
  color: limegreen !important;
}
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, hasUnreadMessages-true) {
  font-weight: normal !important;
  color: #219E21 !important;
}
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, hasUnreadMessages-true, selected) {
  font-weight: normal !important;
  color: limegreen !important;
}
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, subfoldersHaveUnreadMessages-true) {
  font-weight: normal !important;
  color: #219E21 !important;
}
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, subfoldersHaveUnreadMessages-true, selected) {
  font-weight: normal !important;
  color: limegreen !important;
}
/* new mail */
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, newMessages-true),
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
  font-weight: normal !important;
  color: #219E21 !important;
  font-style: italic !important;
}
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, newMessages-true, selected),
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected),
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true, selected) {
  font-weight: normal !important;
  color: limegreen !important;
  font-style: italic !important;
}

In Thunderbird 1 and 2, when you received new mail, a star would appear on the folder icon to let you know (as it does next to the message in the Thread pane). This was dropped in Thunderbird 3 for some unknown reason. Here's the code to get it back. You may not want the new mail section above as well as this.

/* Folders with new mail now show a star */
#folderTree > treechildren::-moz-tree-image(folderNameCol, newMessages-true) {
  -moz-image-region: rect(16px 16px 32px 0px) !important;
}
#folderTree > treechildren::-moz-tree-image(folderNameCol, selected, open, newMessages-true) {
  -moz-image-region: rect(16px 32px 32px 16px) !important;
}
#folderTree > treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox, newMessages-true) {
  -moz-image-region: rect(16px 48px 32px 32px) !important;
}
#folderTree > treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual, newMessages-true) {
  -moz-image-region: rect(16px 176px 32px 160px) !important;
}

If you have a long list of email folders it might be easier to navigate if they had alternating colours like the Thread pane.

/* Folder pane alternating row colours */
#folderTree treechildren::-moz-tree-row(odd) {
  background-image: url("chrome://messenger/skin/icons/row.png");
  background-position: bottom;
  background-repeat: repeat-x;
}

I never close the Folder pane so the close button is superfluous. I use the Maximise Message Pane extension instead.

/* hide All Folders close icon */
#button-closefolder {
  display: none !important;
}

In Thunderbird 2 and 3, above the Folder pane is a new header that is starts off showing "All Folders" and when you click on the arrows it displays different sets of folders. Someone asked me how to remove it because they never used it.

/* hide folder pane header */
#folderPaneHeader {
  display: none !important;
}

In Thunderbird 3.0.1 it was decided that the left and right buttons used to cycle through the folder views were not big or prominent enough. They were replaced with big, ugly icons totally out of sync with the rest of the program's style. Here you can put back the old, more subtle icons.

#folderview-cycler-next {
  list-style-image: url(chrome://messenger/skin/icons/arrow/arrow-right.png) !important;
}
#folderview-cycler-prev {
  list-style-image: url(chrome://messenger/skin/icons/arrow/arrow-left.png) !important;
}

The splitters between panes are overlarge for my liking at 6px. This code makes them thinner. It will affect the Address Book and Compose windows as well.

/* decrease thickness of pane splitters */
#folderpane_splitter,
#dirTree-splitter,
#sidebar-splitter  {
  min-width: 2px !important;
  width: 2px !important;
}
#threadpane-splitter,
#results-splitter,
#compose-toolbar-sizer,
#attachment-splitter,
#additionalFolderPaneSplitter {
  min-height: 2px !important;
  height: 2px !important;
}

You can change the colour of the progress bar.

/*change colour of progress bar - default green on XP */
.progress-bar {
  -moz-appearance: none !important;
  background-color: rgb(18,115,255) !important; 
}

This rounds off the corners of these text boxes. Under XP the "padding-right" might look better with 2px. Experiment.

/* slightly rounded text box corners */
#viewPicker,
#searchInput,
#addressbookList,
#msgIdentity,
#msgSubject,
#ParagraphSelect,
#FontFaceSelect,
#addressingWidget {
  -moz-appearance: none !important;
  -moz-border-radius: 3px !important;
  -moz-border-corner-fit: scale !important;
  padding-right: 1px !important;
}

Windows XP already has slightly rounded dropmarkers (the little square on the right of some of the text boxes that bring down a menu). If you have Windows 2000 or use the Classic style in XP then include this section after the above to round these as well. To be honest this is pretty poor code and it's best to use the WellRounded extension or better go to http://userstyles.org/style/show/666 and insert the code into your userChrome.css file.

#viewPicker > .menulist-dropmarker,
#addressbookList > .menulist-dropmarker,
#msgIdentity > .menulist-dropmarker,
#ParagraphSelect > .menulist-dropmarker,
#FontFaceSelect > .menulist-dropmarker {
  -moz-appearance: none !important;
  -moz-border-radius: 2px !important;
  -moz-border-corner-fit: scale !important;
}

To remove the space before the Restart icon inserted by this extension.

/* remove space in Extension/Theme manager window just before the Restart icon */
#restart-spacer {
  display: none !important;
}

More to come...

 

Home Start Extensions Chrome