Address Book no longer a window, userChrome settings gone

User Help for Mozilla Thunderbird
Post Reply
Shemja
Posts: 88
Joined: January 19th, 2011, 11:35 am

Address Book no longer a window, userChrome settings gone

Post by Shemja »

Another userChrome question. My address book window is gone, replaced by putting it in a tab. Is this what it's going to be now?

I didn't notice this until now because I rarely use the Address Book, but in finding the change I see it's extremely hard to read. None of my customizations apply any longer. If I disable that section of userChrome nothing changes. The lines are too close together making it awful to read. Are there different selectors or something else I can do to at least control the line spacing so words are not on top of one another?

I hate the change.

Mac OS 12.6, TB 102.5.1
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Address Book no longer a window, userChrome settings gon

Post by morat »

You can't go back to the old address book.

New in Thunderbird 102 - Manage your contacts with ease: New Address Book
http://support.mozilla.org/kb/new-thund ... dress-book

I would remove or comment out the styles for the old address book.

CSS Comments
http://www.w3schools.com/css/css_comments.asp
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Address Book no longer a window, userChrome settings gon

Post by morat »

TB 102 Address Book won't accept CSS styling
http://forums.mozillazine.org/viewtopic ... &t=3100133

The styles are in aboutAddressBook.css and cardDialog.css and ab*.css files.

Reference
http://searchfox.org/comm-esr102/source ... ssBook.css
http://searchfox.org/comm-esr102/search ... Dialog.css
http://searchfox.org/comm-esr102/search ... oml%5D*css

note: top folder /suite/ is for SeaMonkey, not Thunderbird
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: Address Book no longer a window, userChrome settings gon

Post by limp »

Here are the new Address Book selectors organized by element, together with the style rules I use. These are thee selectors that apply specifically to Address Book. They don't include the style rules in my global settings that affect Address Book.

userContent.css:

Code: Select all

                /* =============== */	
                /* USERCONTENT.CSS */
                /* =============== */


/* ===========  ADDRESS BOOK TOOLBAR  ============ */


/* Toolbar background color */

   #toolbox .contentTabToolbar
     { background-color: #000 !important; }


/* Toolbar buttons icon color */

   .contentTabToolbar .toolbarbutton-1 image,
   .contentTabToolbar .toolbarbutton-1 dropmarker
     { color: #00a2ed !important;
       fill: #00a2ed !important; }


/* Toolbar buttons hover color */

   .contentTabToolbar toolbarbutton:hover,
   .contentTabToolbar toolbarbutton:hover toolbarbutton,
   .contentTabToolbar toolbarbutton:hover dropmarker
     { background-color: #42414d !important; }

   #toolbarCreateBook:hover    
     { border-color: #706f76 !important;
       border-radius: 4px !important; }


/* NEW CONTACT FORM */

/* New Contact form background color */

   #editContactForm .contact-details-scroll
     { background-color: #1c1b22 !important; }


/* New Contact form default photo color */

   .contact-header       img[src="chrome://messenger/skin/icons/new/compact/user.svg"]
     { background-color: #00a2ed !important;
       color: #1c1b22 !important; }


/* Photo dialog color */

   #photoDropTarget
     { border-radius: 4px !important;
       background-color: #42414d !important; }

   .dialog-menu-container
     { background-color: #1c1b22 !important; }


/* "Add name input field" buttons color */

   #n-list-component-prefix .primary,
   #n-list-component-middlename .primary,
   #n-list-component-suffix .primary,
   .n-list-component.hasButton .primary img
     { background-color: #0084c0 !important;
       fill: #fff !important; }

   #n-list-component-prefix .primary:hover,
   #n-list-component-middlename .primary:hover,
   #n-list-component-suffix .primary:hover
     { background-color: #00a2ed !important; }


/* Input field selector buttons color */

   form select
     { border: 1px solid #666 !important;
       background-color: #2b2a33 !important; }

   form select:hover
     { background-color: #52525e !important; }

   /* The appearance of the input field selector
   buttons drop-down menus is controlled by the
   userChrome.css file */


/* "Add input field" buttons color */

   .addr-book-edit-fieldset-button
     { background-color: #2b2a33 !important;
       color: #fbfbfe !important;
       filter: brightness(120%); }

   .addr-book-edit-fieldset-button:hover
     { background-color: #52525e !important;
       color: #fbfbfe !important;
       filter: brightness(100%); }

   .addr-book-edit-fieldset-button::before
     { background-color: #0084c0 !important;
       fill: #fff !important; }


/* Special Date buttons color */

   #addr-book-edit-bday-anniversary select
     { background-color: #2b2a33 !important;
       color: #fbfbfe !important; }

   #addr-book-edit-bday-anniversary select:hover
     { background-color: #52525e !important;
       color: #fbfbfe !important; }

   #addr-book-edit-bday-anniversary button:hover
     { background-color: #52525e !important;
       color: #fbfbfe !important; }


/* "Choice" buttons color */

   #photoDialog .accept,
   #detailsFooter button[type="submit"]
     { outline: none !important;
       border: 1px solid #666 !important;
       background-color: #0084c0 !important;
       color: #fbfbfe !important; }

   #photoDialog .accept:hover,
   #detailsFooter button[type="submit"]:hover
     { background-color: #00a2ed !important;
       font-weight: bold !important; }

   #photoDialog .cancel,
   #photoDialog .extra1,
   #detailsFooter button[type="reset"]
     { outline: none !important;
       border: 1px solid #666 !important;
       background-color: #2b2a33 !important;
       color: #fbfbfe !important;}

   #photoDialog .cancel:hover,
   #photoDialog .extra1:hover,
   #detailsFooter button[type="reset"]:hover
     { background-color: #52525e !important; }


/* NEW MAILING LIST DIALOG */

/* Email addresses list mouseover behavior */

   .textbox-addressingWidget.uri-element
     { outline: none !important; }

   .addressingWidgetItem:hover,
   .addressingWidgetItem[selected="true"]
     { border: 1.5px solid #00a2ed !important;
       background-color: transparent !important; }


/* IMPORT ADDRESS BOOK DIALOG */

/* Step buttons color */

   #stepNav li > button
     { background-color: #0084c0 !important;
       color: #fbfbfe !important;}


/* Import Address Book panel color and icon color */

   #addr-book-sources
     { background-color: #42414d !important; }

   #startSource::before
     { color: #00a2ed !important;}


/* "Continue" button color */

   .buttons-container > button
     { outline: none !important;
       border: 1px solid #666 !important;
       background-color: #0084c0 !important;
       color: #fbfbfe !important; }

   .buttons-container > button:hover
     { background-color: #00a2ed !important;
       font-weight: bold !important; }


/* Text links color and hover behavior */

   #importFooter a
     { color: #00a2ed !important;}

   #importFooter a:hover
     { text-decoration: underline !important; }


                /* =============== */	
                /* USERCONTENT.CSS */
                /* =============== */


/* =========  ADDRESS BOOK MAIN WINDOW  ========== */


/* ADDRESS BOOKS PANE */

/* Address Books Pane background color */

   #booksPane
     { background: #0c0c0c !important; }


/* Address book icons color */

   #books .bookRow-icon
     { color: #00a2ed !important; }


/* Address books mouseover behavior */

   #books > li > div
     { background-color: transparent !important;
       color: #fbfbfe !important;}

   #books > li:hover > div
     { color: #00a2ed !important;
       font-weight: bold !important; }

   #books > .selected > div
     { box-shadow: 0 0 0 1.5px #0084c0 !important;
       transition: 150ms 50ms !important;
       color: #00a2ed !important;
       font-weight: bold !important; }


/* Total contacts count */

   #aboutAddressBookCount
     { border: none !important;
       background-color: transparent !important;
       color: #fbfbfe !important; }


/* CONTACTS PANE */

/* Contacts Pane background color */

   #cardsPane
     { background-color: #111 !important; }


/* Search box color and outline */

   #searchInput
     { outline: none !important;
       border: 1px solid #7c7b82 !important;
       background-color: #2b2a33 !important; }

   #searchInput:hover
     { box-shadow: 0 0 0 1.5px #00a2ed !important;
       transition: 150ms 50ms !important; }


/* Sort button color */

   #sortButton
     { border: 1px solid #666 !important;
       background-color: #2b2a33 !important; }

   #sortButton:hover
     { background-color: #52525e !important; }


/* Contacts list - vertical layout */

   #cards > ab-card-listrow
     { margin-top: 1px !important;
       outline: none !important;
       background-color: transparent !important;
       color: #fbfbfe !important; }

   #cards > ab-card-listrow:hover
     { box-shadow: 0 0 0 1.5px #0084c0 !important;
       transition: 150ms 50ms !important; }

   #cards > ab-card-listrow:hover .name,
   #cards > .selected .name
     { color: #00a2ed !important;
       font-weight: bold !important; }

   #cards > ab-card-listrow:hover .address,
   #cards > .selected .address
     { color: #fbfbfe !important;
       font-weight: normal !important; }

   #cards > ab-card-listrow.selected
     { box-shadow: 0 0 0 1.5px #0084c0 !important; }

   #cards > ab-card-listrow > .recipient-avatar
     { background-color: #0084c0 !important;
       color: #fff !important; }


/* Column headers - horizontal layout  */

   #cardsHeader .table-header
     { background-color: #111 !important; }

   #cardsHeader .table-header:hover
     { background-color: transparent !important; }


/* Contacts list - horizontal layout */

   #cards > ab-table-card-listrow
     { outline: none !important;
       background-color: transparent !important;
       color: #fbfbfe !important; }

   #cards > ab-table-card-listrow:hover
     { color: #00a2ed !important;
       font-weight: bold !important; }

   #cards > ab-table-card-listrow.selected
     { border: 1px solid #0084c0 !important; 
       color: #00a2ed !important;
       font-weight: bold !important; }


/* CONTACT VIEWER PANE */

/* Contact Viewer Pane background color */

   #detailsPane
     { background-color: #42414d !important; }


/* Contact name emphasis */

   #viewContactName
     { font-weight: bold !important; }


/* Buttons color */

   #detailsWriteButton,
   #detailsSearchButton,
   #editButton
     { background-color: #42414d !important;
       color: #fbfbfe !important; }

   #detailsWriteButton:hover,
   #detailsSearchButton:hover,
   #editButton:hover
     { border: none !important;
       background-color: #52525e !important; }


/* Text links color */

   #detailsPane a
     { color: #00a2ed !important;
       text-decoration: none !important; }

   #detailsPane a:hover
     { color: #00a2ed !important;
       text-decoration: underline !important; }


/* MESSAGE SEARCH PAGE */

   /* The appearance of the contact message search
   page is controlled by the userChrome.css file */


/* EDIT CONTACT DIALOG */

   #detailsDeleteButton
     { outline: none !important;
       border: 1px solid #666 !important;
       background-color: #2b2a33 !important;
       color: #fbfbfe !important; }

   #detailsDeleteButton:hover
     { background-color: #52525e !important;
       color: #fbfbfe !important; }
userChrome.css:

Code: Select all

                /* ============== */
                /* USERCHROME.CSS */
                /* ============== */


/* ===============  ADDRESS BOOK  ================ */


/* NEW CONTACT FORM */ 

/* Input field selector buttons drop-down menus */

   #ContentSelectDropdown > menupopup > menuitem
     { background-color: transparent !important; }

   #ContentSelectDropdown > menupopup > menuitem:hover
     { background-color: #42414d !important;
       font-weight: normal !important; }

   #ContentSelectDropdown > menupopup > menuitem[selected="true"]
     { background-color: #52525e !important;
       font-weight: bold !important; }


/* =====  ADDRESS BOOK MESSAGE SEARCH PAGE  ====== */


/* TOOLBAR */

/* Toolbar color */

   .glodaTabToolbar
     { background-color: #000 !important; }


/* Toolbar search box color and outline */

   .gloda-search,
   .gloda-search:focus
     { outline: none !important;
       border: 1px solid #7c7b82 !important;
       background-color: #2b2a33 !important;
       color: #fbfbfe !important; }

   .gloda-search:hover
     { box-shadow: 0 0 0 1.5px #00a2ed !important;
       transition: 150ms 50ms !important; }


/* SIDEBAR */

/* Sidebar color */

   #facets
     { background-color: #0c0c0c !important; }


/* Sidebar list items color */

   .bar-link
     { color: #00a2ed !important; }

   .bar
     { background-color: transparent !important; }

   .bar:hover,
   .bar[selected="true"]
     { font-weight: bold !important; }

   .bar-count
     { color: #ccc !important; }


/* Sidebar popup menu color */

   .parent
     { background-color: #111 !important; }


/* Sidebar popup menu items color */

   .popup-menuitem
     { background-color: transparent !important;
       color: #fbfbfe !important; }

   .popup-menuitem:hover
     { background-color: transparent !important;
       color: #fbfbfe !important;
       font-weight: bold !important; }


/* MESSAGE SEARCH RESULTS PANEL */

/* Search results panel color */

   #main-column
     { background-color: #1c1b22 !important; }


/* Empty search results image brightness and caption
   color */

   #showEmpty > .empty > img[src="chrome://messenger/skin/icons/empty-search-results.png"]
     { filter: brightness(60%); }

   #showEmpty > .empty
     { color: #00a2ed !important; }


/* "Show results as a list" and message subject */

   #gloda-showall,
   .message-subject
     { background-color: transparent !important;
       color: #00a2ed !important; }

   #gloda-showall:hover,
   .message-subject:hover
     { text-decoration: underline !important; }


/* Toggle timeline" and "Sort by" buttons */

   #date-toggle,
   .results-message-sort-bar > select
     { border: 1px solid #666 !important;
       background-color: #2b2a33 !important; }

   /* Neither the Timeline nor the "Sort by" button
   border could be changed in any way */

   #date-toggle:hover,
   .results-message-sort-bar > select:hover
     { background-color: #52525e !important; }

   /* The color and mouseover behavior of the "Sort
   by" drop-down menu is inherited from dialogs and
   cannot be changed */


/* Messages outline */

   #results .message:hover
     { border-color: transparent !important;
       box-shadow: 0 0 0 1.5px #00a2ed !important;
       transition: 150ms 50ms !important; }
I agree that the line height in the horizontal layout is too narrow, but I couldn't find a way to increase it.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Address Book no longer a window, userChrome settings gon

Post by morat »

Shemja wrote:The lines are too close together making it awful to read. Are there different selectors or something else I can do to at least control the line spacing so words are not on top of one another?
I tried the following style using normal density.

i.e. Menu Bar > View > Density > Normal

The style increases the space between the display name and email address, but it doesn't increase the row height of the ab-card-listrow box.

Code: Select all

/* Thunderbird userContent.css */

@-moz-document url-prefix("about:addressbook") {
  ab-card-listrow :is(.ab-card-first-line, .ab-card-second-line) {
    line-height: 1.8 !important;
  }
}
AFAIK, I can't increase the row height in the <ab-card-listrow ... style="... height: 46px;" ...> elements using the userContent.css file since the value is hard-coded.

Reference
http://searchfox.org/comm-esr102/search ... w&path=css
http://searchfox.org/comm-esr102/search ... ROW_HEIGHT

Changing the density, changes the row height.

i.e. Menu Bar > View > Density
Post Reply