MozillaZine

Enlarge GUI dialog buttons in Thunderbird

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

Post Posted October 25th, 2013, 1:36 am

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

smsmith
Moderator

User avatar
 
Posts: 19742
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted October 25th, 2013, 11:43 am

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: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 25th, 2013, 1:35 pm

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: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 25th, 2013, 1:42 pm

First "success"...

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


Image

smsmith
Moderator

User avatar
 
Posts: 19742
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted October 25th, 2013, 5:18 pm

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: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 27th, 2013, 2:29 pm

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: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 27th, 2013, 2:54 pm

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.

Frank Lion

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted October 27th, 2013, 3:20 pm

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

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

Post Posted October 27th, 2013, 3:35 pm

What #-o

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

Post Posted October 27th, 2013, 3:45 pm

:-& hehe

Image

smsmith
Moderator

User avatar
 
Posts: 19742
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted October 27th, 2013, 5:03 pm

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.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 27th, 2013, 7:15 pm

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: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 28th, 2013, 12:35 am

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

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 28th, 2013, 5:20 pm

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/

smsmith
Moderator

User avatar
 
Posts: 19742
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted October 28th, 2013, 8:22 pm

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.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest