Enlarge GUI dialog buttons in Thunderbird

Discuss application theming and theme development.
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

Hi forum,

is there a code snippet for userchrome.css that controls the height of the dialog box buttons (in Thunderbird)?

I'd like to enlarge the buttons in order to accomodate the enlarged font size.

At the moment, the buttons look like this:

Image
Image

I suppose the code would have to do something with

Code: Select all

.button-box
:?:

Thanks very much already for help.

Regards David.P
User avatar
smsmith
Moderator
Posts: 19979
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Re: Enlarge GUI dialog buttons in Thunderbird

Post by smsmith »

You could try this:

Code: Select all

.button-text {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}


Changes the top and bottom margin to be 5 pixels beyond the text for ALL buttons. Adjust to your liking.

You can add side margin using margin-start and margin-end (or margin-left and margin-right) or use a catchall margin: T R B L !important, where T=top margin, R=right, B=bottom and L=left. Don't forget the unit.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

Now it looks like this:
Image
:(

I mean, the text was too big anyway, so what's the point in adding margins.

It's the buttons themselves that should be made higher.

:?:

Regards David
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

First "success"...

Code: Select all

button {
  min-height: 55px !important;
}


Image
User avatar
smsmith
Moderator
Posts: 19979
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Re: Enlarge GUI dialog buttons in Thunderbird

Post by smsmith »

Well, the button-text is inside the button box, so if you give the text margin, the box should get bigger which makes the button bigger. It was working for me, but I didn't try it with more than a couple of buttons. Which dialogs specifically do you keep posting a screenshot of? Is the last one asking for your password? Master password?

Changing the size of the button shouldn't have made it red. Did you color that in Paint or something? Do you have other code running alongside it?
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

smsmith wrote:Well, the button-text is inside the button box, so if you give the text margin, the box should get bigger which makes the button bigger.

Obviously, the button-text is not inside the button box, see my first screenshots:

Image

smsmith wrote:Which dialogs specifically do you keep posting a screenshot of? Is the last one asking for your password? Master password?

Yes, but it is the same on all dialogs:

Image

Image

(button size reduced to :

Code: Select all

button {
  min-height: 25px !important;
}


smsmith wrote:Changing the size of the button shouldn't have made it red. Did you color that in Paint or something? Do you have other code running alongside it?

I didn't change it. Maybe the red stripe is is because of the used TB skin.

Any more ideas for a CSS snippet that properly enlarges the button height (including the fill color)?

Thanks
David.P
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

OK, it IS a problem related to the theme that I use, because this is what the standard theme looks with enlarged fonts:

Image

..i.e. no problem with the button height here.
Last edited by David.P on October 27th, 2013, 3:32 pm, edited 1 time in total.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Enlarge GUI dialog buttons in Thunderbird

Post by Frank Lion »

David.P wrote:
smsmith wrote:Well, the button-text is inside the button box, so if you give the text margin, the box should get bigger which makes the button bigger.

Obviously, the button-text is not inside the button box, see my first screenshots:

It is inside as a nested element as seen in the DOM inspector. So...it's not obvious at all, is it?

I didn't change it. Maybe the red stripe is is because of the used TB skin.

The red is the underlying background colour. Giving the button a min-height does not increase the size of the button background, so you get what's underneath showing.

Any more ideas for a CSS snippet that properly enlarges the button height (including the fill color)?

Yep, but I'm in no mood for any of your 'obviously....' type stuff. ssmith is much more patient than I am.

Good luck with it.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

What #-o
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

:-& hehe

Image
User avatar
smsmith
Moderator
Posts: 19979
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Re: Enlarge GUI dialog buttons in Thunderbird

Post by smsmith »

Without knowing what theme it is you are trying to use, I can only offer more guesses. Would also help to know what size and what font you are using and if you are also using a high DPI setting.

And every button I have ever seen that is not a toolbar button, it is button-text inside a button-box inside the button. With improper margins, things can get pushed outside of their elements and cause all kinds of problems, as you have seen.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Enlarge GUI dialog buttons in Thunderbird

Post by patrickjdempsey »

The buttons you see are being drawn by the OS. Generally speaking, OS-drawn widgets are not very flexible to adjustment. In order to get flexible widgets you need to start with -moz-appearance:none!important; but then you have to define ALL of the code to draw the buttons after that, including many things that are not obvious and do not appear in the default theme because they are handled by the OS.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
David.P
Posts: 182
Joined: July 25th, 2006, 11:27 am

Re: Enlarge GUI dialog buttons in Thunderbird

Post by David.P »

Thanks guys, but if you have a look at my last screenshot you can see that I fixed it :)

It is the Thunderbird MS Office 2003 JB theme, and obviously the theme overrides the button size as provided by
smsmith wrote:button-text inside a button-box inside the button
...by somehow fixing the button height against the flexible standard method explained here by smsmith.

@patrick, these buttons are not "drawn by the OS", but to my knowledge by the Mozilla XUL toolbox using CSS definitions.

These two lines in userchrome.css

Code: Select all

button {
  min-height: 30px !important;
  background-color: lightgrey !important;
}


...make all the difference between this:
Image
and this:
Image
Regards David.P
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Enlarge GUI dialog buttons in Thunderbird

Post by patrickjdempsey »

David.P wrote:@patrick, these buttons are not "drawn by the OS", but to my knowledge by the Mozilla XUL toolbox using CSS definitions.


Somewhere there is a command that says: -moz-appearance:button, which passes off the drawing of the button to the OS... this is how all of the major widgets are magically themed like native OS widgets. The code you see in the theme is largely a backup for cases where the OS fails to draw the buttons properly. There are a handful of things like padding that actually directly control the widgets.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
User avatar
smsmith
Moderator
Posts: 19979
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Re: Enlarge GUI dialog buttons in Thunderbird

Post by smsmith »

patrickjdempsey wrote:
David.P wrote:@patrick, these buttons are not "drawn by the OS", but to my knowledge by the Mozilla XUL toolbox using CSS definitions.


Somewhere there is a command that says: -moz-appearance:button, which passes off the drawing of the button to the OS.

I'm guessing the theme in question uses -moz-appearance: none.

Edit: Ha! I was wrong! Shocker! :D

From global/button.css

Code: Select all

button {
  -moz-appearance: button;
  margin: 1px 5px 2px 5px;
  min-width: 6.3em;
  border: 3px solid;
  -moz-border-top-colors: transparent ThreeDHighlight ThreeDLightShadow;
  -moz-border-right-colors: transparent ThreeDDarkShadow ThreeDShadow;
  -moz-border-bottom-colors: transparent ThreeDDarkShadow ThreeDShadow;
  -moz-border-left-colors: transparent ThreeDHighlight ThreeDLightShadow;
  background-color: ThreeDFace;
  color: ButtonText;
  text-shadow: none;
}

.button-box {
  border: 1px solid transparent;
  padding-top: 1px;
  padding-bottom: 2px;
  -moz-padding-start: 3px;
  -moz-padding-end: 4px;
}

.button-text {
  margin: 0 !important;
  text-align: center;
}


The margin in the .button-text isn't doing any favors.

Edit 2: Ha ha! Maybe not wrong after all!

From skin/options/xpcontrols/xpcontrols.css

Code: Select all

button,
button[disabled="true"],
button:hover:not([disabled="true"]),
button:focus,
#msgHeaderView button.msgHeaderView-flat-button
colorpicker[type="button"] {
  -moz-appearance: none !important;
  height: 21px !important;  <-- not nice!
  max-height: 21px !important;  <-- not nice!
  min-height:5px !important;  <-- not nice!
  border-radius: 3px !important;
  margin: 1px 3px 2px 3px !important;
}


I've flagged the not nice rules that were probably causing the problem. This "theme" is a weird one. Packaged as an XPI with a bunch of @import rules, so I don't know which of the buttons rules is to apply when.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.
Locked