GithubHelp home page GithubHelp logo

customcssfortb's Introduction

Downloads for Thunderbird

CustomCSSforTb releases & changelog

Want to support this project?

[ Paypal Me ]

Instructions / Howto / Readme

Unlock custom CSS usage in Thunderbird

Settings/Options > Advanced > General > Config Editor...
toolkit.legacyUserProfileCustomizations.stylesheets > true

Where to find Thunderbird profile folder? The correct location for user styles.

1. Find your profile folder
Windows
C:\Users\ USERNAME \AppData\Roaming\Thunderbird\Profiles\ PROFILE FOLDER NAME \
Hidden files must be visible to see AppData folder. Alternatively open %APPDATA%\Thunderbird\Profiles\ from explorers location bar.
Linux
/home/ username /.thunderbird/ profile folder name /
Hidden files must be visible to see .mozilla folder.
Mac OS X
~\Library\Thunderbird\Profiles\ PROFILE FOLDER NAME \ or
~\Library\Application Support\Thunderbird\Profiles\ PROFILE FOLDER NAME \
\Users\ USERNAME \Library\Application\Support\Thunderbird\Profiles\

2. User styles belong into \chrome\ folder. Create it, if there is none yet. It should look like this afterwards:
\ PROFILE FOLDER NAME \chrome\

3. Copy userChrome.css, userContent.css and \config\, \css\, \images\ folders into \chrome\ folder. It should look like this afterwards:
\chrome\config\
\chrome\css\
\chrome\image\
\chrome\userChrome.css
\chrome\userContent.css

How to use custom user styles?

The userChrome.css and userContent.css files works like an options\configurations file. All main "features" can be enabled and disabled there.
Edit userChrome.css and userContent.css with any text editor (Notepad++ recommended on Windows) and enable or disable any feature you like by modifying, removing or outcommenting available @import strings.
Restart Thunderbird after every modification for changes to take effect.

Example
If "classic button appearance for navigation toolbar buttons" should be enabled, the corresponding line has to look like this:
@import "./css/buttons/ctb_on_main_toolbars.css"; /**/

If "classic button appearance for navigation toolbar buttons" should be disabled, the corresponding line has to look like this:
/* @import "./css/buttons/ctb_on_main_toolbars.css"; /**/

Note
Code between /* and */ won't be used by Thunderbird unless there are other /* or */ in-between.

How to find item ids and attributes?

Hit Ctrl+Alt+Shift+I or open 'Tools > WebDeveloper > Browser Toolbox'.

Inspect ui or web content.

Force popups to stay open for inspection: Click on 'Customize Tools and get help button' (= button with three dots) and select 'Disable popup auto-hide'.

customcssfortb's People

Contributors

aris-t2 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

customcssfortb's Issues

Ivent invitation support - ctb_on_main_toolbars.css

  1. Describe the issue
    ctb_on_main_toolbars.css seems to lack styling for event/invitation related buttons (they use default styling when compared to other one)

  2. What should have happened instead?
    All button on toolbar should have the same style

  3. Steps to reproduce the issue?
    Open the message that have an event/invitation for default Lightning addon

I believe this can be fixed by addingone of the following element #imip-view-toolbox (or maybe .lightning-notification-bar) to the existing style

  1. SCREENSHOTS with/without this projects files (drag & drop images into this post)

image

image

  1. System information
  • OS & OS version: Win10x64
  • OS theme name: Default
  • DPI / HiDPI resolution: 100
  • Thunderbird version: 68.5.0 (64-bit)
  • Thunderbird theme / lw-theme: default
  • This projects settings the issue occurs with:
/* Thunderbird Quantum userChrome.css tweaks ****************************************************/
/* code mostly taken from 'CusomizeMyBird' add-ons **********************************************/
/* Github: https://github.com/aris-t2/customcssfortb ********************************************/
/************************************************************************************************/

/************************************************************************************************/
/* Custom CSS for Thunderbird 68+ ***************************************************************/
/* version 1.0.1 ********************************************************************************/
/************************************************************************************************/

/*************************************************************************************************

  Make sure 'toolkit.legacyUserProfileCustomizations.stylesheets' is set to 'true' or custom
  styles will not be loaded. Settings/Options > Advanced > General > Config Editor...

*************************************************************************************************/


/*************************************************************************************************

  README
  
  Thunderbird profile folder:
  (Windows) C:\Users\<NAME>\AppData\Roaming\Thunderbird\Profiles\<PROFILE>\
  (Linux) /home/<NAME>/.mozilla/thunderbird/<PROFILE>/
  (macOS) ~\Library\Mozilla\Thunderbird\Profiles\<PROFILE>\ or
     ~\Library\Application Support\Mozilla\Thunderbird\Profiles\<PROFILE>\ or
     \Users\<NAME>\Library\Application\Support\Thunderbird\Profiles\<PROFILE>
  
  CSS files and sub-folders belong into \<PROFILE>\chrome\ directory.
  \chrome\config\
  \chrome\css\
  \chrome\images\
  \chrome\userChrome.css
  \chrome\userContent.css

  ENABLING options: remove the combination of / and * before '@import'
  DISABLING options: add the combination of / and * before '@import'
  

*************************************************************************************************/


/* MAIN CONFIG FILE - controls variables ********************************************************/
/* @import "./config/config.css"; /**/


/* TABS *****************************************************************************************/

/* Tab appearance - [only use one at a time] ****************************************************/
/* @import "./css/tabs/classic_squared_tabs.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_aero.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass1.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass2.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass3.css"; /**/

/* Tabs height and borders **********************************************************************/
/* @import "./css/tabs/tab_height.css"; /**/
/* @import "./css/tabs/tab_border_radius.css"; /**/


/* BUTTONS **************************************************************************************/

/* Classic button appearance ********************************************************************/
@import "./css/buttons/ctb_on_main_toolbars.css"; /**/
/* @import "./css/buttons/ctb_on_menubar.css"; /**/
/* @import "./css/buttons/ctb_on_tabstoolbar.css"; /**/

/* Button size **********************************************************************************/
/* @import "./css/buttons/ctb_button_size_main_toolbars.css"; /**/
/* @import "./css/buttons/ctb_button_size_menubar.css"; /**/

/* Buttons on tabs toolbar - [only use one at a time] *******************************************/
/* @import "./css/buttons/tab_toolbar_buttons_before_tabs.css"; /**/
/* @import "./css/buttons/tab_toolbar_buttons_hidden.css"; /**/

/* Icon settings ********************************************************************************/
/* @import "./css/buttons/reduce_icon_size_on_hover.css"; /**/

/* Icon sets - [only use one at a time] *********************************************************/
/* @import "./css/buttons/tb_icons_tb1.css"; /**/
/* @import "./css/buttons/tb_icons_tb2.css"; /**/
/* @import "./css/buttons/tb_icons_tb3.css"; /**/
/* @import "./css/buttons/tb_icons_tb3_strata.css"; /**/
/* @import "./css/buttons/tb_icons_dark.css"; /**/
/* @import "./css/buttons/tb_icons_white.css"; /**/
/* @import "./css/buttons/tb_icons_tb_mac.css"; /**/
/* @import "./css/buttons/tb_icons_noia_large.css"; /**/
/* @import "./css/buttons/tb_icons_noia_medium.css"; /**/
/* @import "./css/buttons/tb_icons_noia_small.css"; /**/
/* @import "./css/buttons/tb_icons_noia_tiny.css"; /**/


/* APPBUTTON ************************************************************************************/

/* Appbutton appearance - [only use one at a time] **********************************************/
@import "./css/appbutton/classic_appbutton.css"; /**/
/* @import "./css/appbutton/classic_appbutton_icon_only.css"; /**/ /* default toolbar button icon */
/* @import "./css/appbutton/classic_appbutton_icon_only_white.css"; /* white bird */
/* @import "./css/appbutton/classic_appbutton_icon_only_white2.css"; /* white bird v2 */
/* @import "./css/appbutton/classic_appbutton_icon_only_flat.css"; /* flat */
/* @import "./css/appbutton/classic_appbutton_icon_only_old1.css"; /* old Thunderbird icon */
/* @import "./css/appbutton/classic_appbutton_icon_only_old2.css"; /* old Thunderbird icon v2 */
@import "./css/appbutton/classic_appbutton_icon_only_current.css"; /* current Thunderbird icon */


/* GENERAL THUNDERBIRD APPEARANCE ****************************************************************/

/* Toolbar appearance - [only use one at a time] *************************************************/
/* @import "./css/general/toolbar_and_ui_appearance_default.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_aero.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass1.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass2.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass3.css"; /**/

/* Attachmentbox *********************************************************************************/
/* @import "./css/general/attachmentbox_above_mail_content.css"; /**/
/* @import "./css/general/attachmentbox_at_toolbars_start.css"; /**/

/* Main window ***********************************************************************************/
/* @import "./css/general/window_header_colors.css"; /**/
/* @import "./css/general/mail_panel_color.css"; /**/

/* Tree columns appearance - [only use one at a time] ********************************************/
/* @import "./css/general/tree_columns_appearance.css"; /**/
/* @import "./css/general/tree_columns_appearance_aero.css"; /**/

/* Compose window - Bold, Italic, Underlined icons ***********************************************/
@import "./css/general/write_window_replace_aaa_icons_with_biu_icons.css"; /**/

/* Quickfilter toolbar settings ******************************************************************/
/* @import "./css/general/quickfilterbar_at_the_bottom.css"; /**/

/* Quickfilter button mode - [only use one at a time] ********************************************/
/* @import "./css/general/quickfilterbar_text_only.css"; /**/
/* @import "./css/general/quickfilterbar_icons_only.css"; /**/
/* @import "./css/general/quickfilterbar_icons_and_text.css"; /**/

/* Menubar appearance and position - [only use one at a time] ************************************/
/* @import "./css/general/menubar_above_tabs.css"; /**/
/* @import "./css/general/menubar_below_tabs.css"; /**/
/* @import "./css/general/menubar_below_tabs_aero.css"; /**/
/* @import "./css/general/menubar_below_tabs_with_border.css"; /**/
/* @import "./css/general/menubar_below_tabs_with_border_aero.css"; /**/

/* Hide items ************************************************************************************/
/* @import "./css/general/statusbar_hidden.css"; /**/
/* @import "./css/general/mail_tree_folder_icons_hidden.css"; /**/
/* @import "./css/general/mail_list_scrollbars_hidden.css"; /**/

@import "./css/custom/misc.css"; /**/



Doesn't work with v 128

A quick report just to let the devs know that after updating Thunderbird to v 128.0.1 from v 127 the CSS doesn't work anymore, something has changed in TB's code.

  1. System information
  • OS & OS version: Win10
  • OS theme name: default
  • DPI / HiDPI resolution:
  • Thunderbird version: 128.0.1
  • Thunderbird theme / lw-theme:
  • This projects settings the issue occurs with:

[!] GENERAL discussion, feedback, questions belong here!

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

This project will not recreate outdated or discontinued add-ons except for CustomizeMyBird.

CustomCSSforTb does not offer ...
... version numbers for add-ons in add-ons manager add-on lists (Tbs code differs from Fx code in this case, CustomCSSforFx code to restore version number does not work with Tb68+)
... CMBs scrollbar customizations (JS code required)
... some other tweaks like "compact" menubar or main toolbar (tweaks become redundant)
... a custom CSS applier (JS code required)

A galore of unthemed icons

Thunderbird for Linux 68.2.1.

See the attached screenshot.

My UserChrome.css modifications:

diff -u userChrome.css.default userChrome.css 
--- userChrome.css.default	2019-09-08 16:02:00.000000000 +0000
+++ userChrome.css	2019-11-01 16:33:25.006605369 +0000
@@ -71,14 +71,14 @@
 /* @import "./css/buttons/ctb_button_size_menubar.css"; /**/
 
 /* Buttons on tabs toolbar - [only use one at a time] *******************************************/
-/* @import "./css/buttons/tab_toolbar_buttons_before_tabs.css"; /**/
+   @import "./css/buttons/tab_toolbar_buttons_before_tabs.css"; /**/
 /* @import "./css/buttons/tab_toolbar_buttons_hidden.css"; /**/
 
 /* Icon settings ********************************************************************************/
 /* @import "./css/buttons/reduce_icon_size_on_hover.css"; /**/
 
 /* Icon sets - [only use one at a time] *********************************************************/
-/* @import "./css/buttons/tb_icons_tb1.css"; /**/
+   @import "./css/buttons/tb_icons_tb1.css"; /**/
 /* @import "./css/buttons/tb_icons_tb2.css"; /**/
 /* @import "./css/buttons/tb_icons_tb3.css"; /**/
 /* @import "./css/buttons/tb_icons_tb3_strata.css"; /**/

Also I don't understand what the asterisks are for - all those folders don't have any unread messages:
icons

ThunderBird 78: ctb_on_main_toolbars - "Compose new message" window

  1. Describe the issue
    After update to ThunderBird 78 some new elements were introduced to "Compose new message" window.
    They are not styled properly

  2. What should have happened instead?
    I believe that new elements shod be styled the same as currently existing ones.

  3. Steps to reproduce the issue?
    Open "Compose new message". Observe CC, BCC section.
    Compare it to filters of the message pane (in vanilla they share same visual style)

  4. SCREENSHOTS with/without this projects files (drag & drop images into this post)
    изображение

изображение

  1. System information
  • OS & OS version: Win 10x64
  • OS theme name: default
  • DPI / HiDPI resolution: 100
  • Thunderbird version: 78
  • Thunderbird theme / lw-theme: default
  • This projects settings the issue occurs with:
/* Thunderbird Quantum userChrome.css tweaks ****************************************************/
/* code mostly taken from 'CusomizeMyBird' add-ons **********************************************/
/* Github: https://github.com/aris-t2/customcssfortb ********************************************/
/************************************************************************************************/

/************************************************************************************************/
/* Custom CSS for Thunderbird 68+ ***************************************************************/
/* version 1.0.2 ********************************************************************************/
/************************************************************************************************/

/*************************************************************************************************

  Make sure 'toolkit.legacyUserProfileCustomizations.stylesheets' is set to 'true' or custom
  styles will not be loaded. Settings/Options > Advanced > General > Config Editor...

*************************************************************************************************/


/*************************************************************************************************

  README
  
  Thunderbird profile folder:
  (Windows) C:\Users\<NAME>\AppData\Roaming\Thunderbird\Profiles\<PROFILE>\
  (Linux) /home/<NAME>/.mozilla/thunderbird/<PROFILE>/
  (macOS) ~\Library\Mozilla\Thunderbird\Profiles\<PROFILE>\ or
     ~\Library\Application Support\Mozilla\Thunderbird\Profiles\<PROFILE>\ or
     \Users\<NAME>\Library\Application\Support\Thunderbird\Profiles\<PROFILE>
  
  CSS files and sub-folders belong into \<PROFILE>\chrome\ directory.
  \chrome\config\
  \chrome\css\
  \chrome\images\
  \chrome\userChrome.css
  \chrome\userContent.css

  ENABLING options: remove the combination of / and * before '@import'
  DISABLING options: add the combination of / and * before '@import'
  

*************************************************************************************************/


/* MAIN CONFIG FILE - controls variables ********************************************************/
/* @import "./config/config.css"; /**/


/* TABS *****************************************************************************************/

/* Tab appearance - [only use one at a time] ****************************************************/
/* @import "./css/tabs/classic_squared_tabs.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_aero.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass1.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass2.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass3.css"; /**/

/* Tabs height and borders **********************************************************************/
/* @import "./css/tabs/tab_height.css"; /**/
/* @import "./css/tabs/tab_border_radius.css"; /**/


/* BUTTONS **************************************************************************************/

/* Classic button appearance ********************************************************************/
@import "./css/buttons/ctb_on_main_toolbars.css"; /**/
/* @import "./css/buttons/ctb_on_menubar.css"; /**/
/* @import "./css/buttons/ctb_on_tabstoolbar.css"; /**/

/* Button size **********************************************************************************/
/* @import "./css/buttons/ctb_button_size_main_toolbars.css"; /**/
/* @import "./css/buttons/ctb_button_size_menubar.css"; /**/

/* Buttons on tabs toolbar - [only use one at a time] *******************************************/
/* @import "./css/buttons/tab_toolbar_buttons_before_tabs.css"; /**/
/* @import "./css/buttons/tab_toolbar_buttons_hidden.css"; /**/

/* Icon settings ********************************************************************************/
/* @import "./css/buttons/reduce_icon_size_on_hover.css"; /**/

/* Icon sets - [only use one at a time] *********************************************************/
/* @import "./css/buttons/tb_icons_tb1.css"; /**/
/* @import "./css/buttons/tb_icons_tb2.css"; /**/
/* @import "./css/buttons/tb_icons_tb3.css"; /**/
/* @import "./css/buttons/tb_icons_tb3_strata.css"; /**/
/* @import "./css/buttons/tb_icons_dark.css"; /**/
/* @import "./css/buttons/tb_icons_white.css"; /**/
/* @import "./css/buttons/tb_icons_tb_mac.css"; /**/
/* @import "./css/buttons/tb_icons_noia_large.css"; /**/
/* @import "./css/buttons/tb_icons_noia_medium.css"; /**/
/* @import "./css/buttons/tb_icons_noia_small.css"; /**/
/* @import "./css/buttons/tb_icons_noia_tiny.css"; /**/

/* Other buttons settings ***********************************************************************/
/* @import "./css/buttons/button_popup_panelarrow_hidden.css"; /**/

/* APPBUTTON ************************************************************************************/

/* Appbutton appearance - [only use one at a time] **********************************************/
/* @import "./css/appbutton/classic_appbutton.css"; /**/
/* @import "./css/appbutton/classic_appbutton_icon_only.css"; /**/ /* default toolbar button icon */
/* @import "./css/appbutton/classic_appbutton_icon_only_white.css"; /* white bird */
/* @import "./css/appbutton/classic_appbutton_icon_only_white2.css"; /* white bird v2 */
/* @import "./css/appbutton/classic_appbutton_icon_only_flat.css"; /* flat */
/* @import "./css/appbutton/classic_appbutton_icon_only_old1.css"; /* old Thunderbird icon */
/* @import "./css/appbutton/classic_appbutton_icon_only_old2.css"; /* old Thunderbird icon v2 */
@import "./css/appbutton/classic_appbutton_icon_only_current.css"; /* current Thunderbird icon */


/* GENERAL THUNDERBIRD APPEARANCE ****************************************************************/

/* Toolbar appearance - [only use one at a time] *************************************************/
/* @import "./css/general/toolbar_and_ui_appearance_default.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_aero.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass1.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass2.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass3.css"; /**/

/* Attachmentbox *********************************************************************************/
/* @import "./css/general/attachmentbox_above_mail_content.css"; /**/
@import "./css/general/attachmentbox_at_toolbars_start.css"; /**/

/* Main window ***********************************************************************************/
/* @import "./css/general/window_header_colors.css"; /**/
/* @import "./css/general/mail_panel_color.css"; /**/
/* @import "./css/general/increase_row_height.css"; /**/

/* Tree columns appearance - [only use one at a time] ********************************************/
/* @import "./css/general/tree_columns_appearance.css"; /**/
/* @import "./css/general/tree_columns_appearance_aero.css"; /**/

/* Compose window - Bold, Italic, Underlined icons ***********************************************/
/* @import "./css/general/write_window_replace_aaa_icons_with_biu_icons.css"; /**/

/* Quickfilter toolbar settings ******************************************************************/
/* @import "./css/general/quickfilterbar_at_the_bottom.css"; /**/

/* Quickfilter button mode - [only use one at a time] ********************************************/
/* @import "./css/general/quickfilterbar_text_only.css"; /**/
/* @import "./css/general/quickfilterbar_icons_only.css"; /**/
/* @import "./css/general/quickfilterbar_icons_and_text.css"; /**/

/* Menubar appearance and position - [only use one at a time] ************************************/
/* @import "./css/general/menubar_above_tabs.css"; /**/
/* @import "./css/general/menubar_below_tabs.css"; /**/
/* @import "./css/general/menubar_below_tabs_aero.css"; /**/
/* @import "./css/general/menubar_below_tabs_with_border.css"; /**/
/* @import "./css/general/menubar_below_tabs_with_border_aero.css"; /**/

/* Hide items ************************************************************************************/
/* @import "./css/general/statusbar_hidden.css"; /**/
/* @import "./css/general/mail_tree_folder_icons_hidden.css"; /**/
/* @import "./css/general/mail_list_scrollbars_hidden.css"; /**/


/************************************************************************************************/
/************************************************************************************************/
/* Create a new file "my_userChrome.css" and add own/custom code to it. *************************/
@import "./my_userChrome.css"; /**/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

Account Colors Add-On

Sorry -- I couldn't find the General Discussion Area and didn't know where else to post this. Its not really an open issue.

thanks

  1. Describe the issue
    There was an Add-On Extension called "Account Colors" that provided for setting different colors for users who managed multiple email accounts with Thunderbird. That Add-On stopped working after version 68 of TB and the original Developer decided not to rewrite it for the "New and Improved (?)" Thunderbird.

There have been several "suggestions" like using BorderColors (which only works in the Compose window) or setting Filter/Tags to tag each message a different color in the message pane but neither of these actually allow setting a color by Account and does nothing in the Unified Folder Tree --- the original Add-On even allowed for setting a color for the Local Folders, too.

This may be the wrong place (I did post on the TB Mozilla forum) but was wondering if there is a way to set Account Colors in a User Chrome Style Sheet for TB?

I'm not a programmer, just a frustrated user who has downgraded all my systems to Thunderbird Version 68 just to keep the original Account Color Add-On. Others have done the same and some have even switched to a different email client.

If you have the time, please take a look at the original Account Colors Add-On options and see how flexible it was.

Thanks for your time --- if CustomCSSforTb could work, please let me know.

  1. SCREENSHOTS with/without this projects files (drag & drop images into this post)!

Clipboard01

  1. System information

Removing rounded corners from the menus of thunderbird 102

  1. Describe the issue
    One of the annoying changes I have noticed in tb 102 is the rounded corners that appear in menus, as seen in the screenshots below. They have that w11 look with the rounded corners, the ones that appear white do not follow the gtk theme of the desktop and when the window is inactive, the text on the main toolbar almost invisible (light grey letters on dark grey background.
    I tried your css, I played around with its options but it does not seem to solve anything of the above, so the main question here is if any of this is doable via css.

  2. What should have happened instead?
    A lot, as I described above. I would be happy even if I managed to only get the right-click white menus to follow the gtk theme.

  3. Steps to reproduce the issue?
    Install or upgrade to thunderbird 102 on a linux distro, prefereably on one using a dark gtk theme.

  4. SCREENSHOTS with/without this projects files
    The all white right right click menu with the rounded corners

2022-07-03-184532_1280x1024_scrot

The rounded menus from the main toolbar

2022-07-03-184613_1280x1024_scrot

  1. System information
  • OS & OS version: Debian testing/unstable x64
  • OS theme name: Numix
  • DPI / HiDPI resolution: 96
  • Thunderbird version: 102b7
  • Thunderbird theme / lw-theme: System theme - Auto
  • This projects settings the issue occurs with:

Thunderbird 102 > ctb_on_main_toolbars.css needs to be updated

General questions belong into the general discussion thread.
This is not a request area!

INVALID REPORTS WILL BE CLOSED WITHOUT FURTHER NOTICE TO KEEP ISSUE AREA CLEAN.
Thanks for your understanding.


Add all information required in 1-5 and delete this line and everything above it before submitting.

  1. Describe the issue
    There are some issues with ctb_on_main_toolbars.css.
    When this module is enabled some toolbars (mail, address book, calendar, tasks, etc) have different height.
    Also, toolbar button styling is not applied all the time.

  2. What should have happened instead?
    All toolbar buttons should be visually the same

  3. Steps to reproduce the issue?
    Enable ctb_on_main_toolbars.css. Cycle through mail, address book, calendar, tasks.
    Observe toolbar height and buttons styling

  4. SCREENSHOTS with/without this projects files (drag & drop images into this post)

Mail >

  • No styling for Delete, Archive buttons (multiple emails are selected)
  • Toolbar height is smaller when Root folder tree item is selected (email adress preferences)

изображение

Address book >

  • No styling for buttons
  • toolbar height is smaller than one from the Mail toolbar

изображение

Calendar + Tasks > toolbar height is smaller than one from the Mail toolbar

изображение

  1. System information
  • OS & OS version: Win10x64
  • OS theme name: default
  • DPI / HiDPI resolution: 100%
  • Thunderbird version: 102.0
  • Thunderbird theme / lw-theme: default
  • This projects settings the issue occurs with:
/*===============================================================================
  Thunderbird userChrome.css tweaks: main file
  
  Custom CSS for Thunderbird 102+
  Current version: 2.0.0

  Based on 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons CSS code 
  Github: https://github.com/aris-t2/customcssfortb
  Change-log: https://github.com/aris-t2/customcssfortb/commits/

  
  Thunderbird requires the following preference to be enabled for custom styles to be loaded:
  
    Settings/Options > Advanced > General > Config Editor...
    toolkit.legacyUserProfileCustomizations.stylesheets > true'
  
  ===============================================================================
  
  ======
  README
  ======

  
  Thunderbird profile folder:
  (Windows) C:\Users\<NAME>\AppData\Roaming\Thunderbird\Profiles\<PROFILE>\
  (Linux) /home/<NAME>/.mozilla/thunderbird/<PROFILE>/
  (macOS) ~\Library\Mozilla\Thunderbird\Profiles\<PROFILE>\ or
     ~\Library\Application Support\Mozilla\Thunderbird\Profiles\<PROFILE>\ or
     \Users\<NAME>\Library\Application\Support\Thunderbird\Profiles\<PROFILE>
  
  CSS files and sub-folders belong into \<PROFILE>\chrome\ directory.
  \chrome\config\
  \chrome\css\
  \chrome\images\
  \chrome\userChrome.css
  \chrome\userContent.css

  ENABLING/DISABLING options:
  To activate an option: remove /* before @import
  To deactivate an option: add /* before @import
  

*/

/* =====================================
   MAIN CONFIG FILE - controls variables
   =====================================
   
   [!] set global variables for font and tab size options and more inside target file 
*/

/* @import "./config/config.css"; /**/


/* ==============
   TAB appearance
   ==============
   
   [!] only use one option at a time
   [!] custom tab colors are set inside color_variablesXXX.css file(s)
   
*/

/* @import "./css/tabs/classic_squared_tabs.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_aero.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass1.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass2.css"; /**/
/* @import "./css/tabs/classic_squared_tabs_glass3.css"; /**/


/* -----------------------
   Tabs height and borders
   -----------------------
*/

/* @import "./css/tabs/tab_height.css"; /**/
/* @import "./css/tabs/tab_border_radius.css"; /**/


/* =======
   BUTTONS
   =======
*/

/* -------------------------
   Classic button appearance
   -------------------------
*/

@import "./css/buttons/ctb_on_main_toolbars.css"; /**/
/* @import "./css/buttons/ctb_on_menubar.css"; /**/
/* @import "./css/buttons/ctb_on_tabstoolbar.css"; /**/


/* -----------
   Button size
   -----------
*/

/* @import "./css/buttons/ctb_button_size_main_toolbars.css"; /**/
/* @import "./css/buttons/ctb_button_size_menubar.css"; /**/


/* -----------------------
   Buttons on tabs toolbar
   -----------------------
   
   [!] only use one option at a time

*/

/* @import "./css/buttons/tab_toolbar_buttons_before_tabs.css"; /**/
/* @import "./css/buttons/tab_toolbar_buttons_hidden.css"; /**/


/* -------------
   Icon settings
   -------------
*/

/* @import "./css/buttons/reduce_icon_size_on_hover.css"; /**/


/* ---------
   Icon sets
   ---------
   
   [!] only use one option at a time
   
*/

/* @import "./css/buttons/tb_icons_tb1.css"; /**/
/* @import "./css/buttons/tb_icons_tb2.css"; /**/
/* @import "./css/buttons/tb_icons_tb3.css"; /**/
/* @import "./css/buttons/tb_icons_tb3_strata.css"; /**/
/* @import "./css/buttons/tb_icons_dark.css"; /**/
/* @import "./css/buttons/tb_icons_white.css"; /**/
/* @import "./css/buttons/tb_icons_tb_mac.css"; /**/
/* @import "./css/buttons/tb_icons_noia_large.css"; /**/
/* @import "./css/buttons/tb_icons_noia_medium.css"; /**/
/* @import "./css/buttons/tb_icons_noia_small.css"; /**/
/* @import "./css/buttons/tb_icons_noia_tiny.css"; /**/


/* ----------------------
   Other buttons settings
   ----------------------
*/

/* @import "./css/buttons/button_popup_panelarrow_hidden.css"; /**/



/* =========
   APPBUTTON
   =========
*/

/* -------------------
   Appbutton appearance
   -------------------
   
   [!] only use one option at a time
   
*/

@import "./css/appbutton/classic_appbutton.css"; /**/
/* @import "./css/appbutton/classic_appbutton_icon_only.css"; /**/ /* default toolbar button icon */
/* @import "./css/appbutton/classic_appbutton_icon_only_white.css"; /* white bird */
/* @import "./css/appbutton/classic_appbutton_icon_only_white2.css"; /* white bird v2 */
/* @import "./css/appbutton/classic_appbutton_icon_only_flat.css"; /* flat */
/* @import "./css/appbutton/classic_appbutton_icon_only_old1.css"; /* old Thunderbird icon */
/* @import "./css/appbutton/classic_appbutton_icon_only_old2.css"; /* old Thunderbird icon v2 */
@import "./css/appbutton/classic_appbutton_icon_only_current.css"; /* current Thunderbird icon */



/* ==============================
   GENERAL THUNDERBIRD APPEARANCE
   ==============================
*/

/* ------------------
   Toolbar appearance
   ------------------
   
   [!] only use one option at a time
   
*/

/* @import "./css/general/toolbar_and_ui_appearance_default.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_aero.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass1.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass2.css"; /**/
/* @import "./css/general/toolbar_and_ui_appearance_glass3.css"; /**/


/* --------------
   Attachment-Box
   --------------
*/

/* @import "./css/general/attachmentbox_above_mail_content.css"; /**/
@import "./css/general/attachmentbox_at_toolbars_start.css"; /**/


/* -----------
   Main window
   -----------
*/

/* @import "./css/general/window_header_colors.css"; /**/
/* @import "./css/general/mail_panel_color.css"; /**/
/* @import "./css/general/increase_row_height.css"; /**/
/* @import "./css/general/transparent_mail_header.css"; /**/


/* -----------------------
   Tree columns appearance
   -----------------------
   
   [!] only use one option at a time

*/

/* @import "./css/general/tree_columns_appearance.css"; /**/
/* @import "./css/general/tree_columns_appearance_aero.css"; /**/


/* -----------------------------------------------
   Compose window - Bold, Italic, Underlined icons
   -----------------------------------------------
*/

/* @import "./css/general/write_window_replace_aaa_icons_with_biu_icons.css"; /**/


/* ----------------------------
   Quickfilter toolbar settings
   ----------------------------
*/

/* @import "./css/general/quickfilterbar_at_the_bottom.css"; /**/


/* -----------------------
   Quickfilter button mode
   -----------------------
   
   [!] only use one option at a time

*/

/* @import "./css/general/quickfilterbar_text_only.css"; /**/
/* @import "./css/general/quickfilterbar_icons_only.css"; /**/
/* @import "./css/general/quickfilterbar_icons_and_text.css"; /**/


/* -------------------------------
   Menubar appearance and position
   -------------------------------
   
   [!] only use one option at a time

*/

/* @import "./css/general/menubar_above_tabs.css"; /**/
/* @import "./css/general/menubar_below_tabs.css"; /**/
/* @import "./css/general/menubar_below_tabs_aero.css"; /**/
/* @import "./css/general/menubar_below_tabs_with_border.css"; /**/
/* @import "./css/general/menubar_below_tabs_with_border_aero.css"; /**/


/* ----------
   Hide items
   ----------
*/

/* @import "./css/general/statusbar_hidden.css"; /**/
/* @import "./css/general/mail_tree_folder_icons_hidden.css"; /**/
/* @import "./css/general/mail_list_scrollbars_hidden.css"; /**/


/* -------------------------------
   Icon sets for folder area
   -------------------------------
   
   [!] only use one option at a time
   [!] issues with some icons

*/

/* @import "./css/general/foldericons_tb1.css"; /**/
/* @import "./css/general/foldericons_tb2.css"; /**/
/* @import "./css/general/foldericons_tb3.css"; /**/
/* @import "./css/general/foldericons_tb3_strata.css"; /**/


/* ---------------------
   Custom / own CSS code
   ---------------------
   
   [!] Create a "my_userChrome.css" file and add own/custom code to it.
*/

@import "./my_userChrome.css"; /**/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.