Fix scrollbar, Developer Toolbox selectors & userChrome

[Shemja]

I have an annoying problem with message headers and am trying to fix it with userChrome.

My subject line keeps putting a tiny scrollbar to the right of each single-line subject because the font is too tall for the height alotted. I want it to scroll only when the subject line goes to a second line.

Developer Toolbox says this section is #expandedsubjectBox.header-row, but coding with any of that does not work. It also says the main message header selector is #messageHeader, but I must use #msgHeaderView to change anything in that field. It appears that some of the selectors I'm seeing in Developer Toolbox don't match what I have to use in userChrome.

(Is this a change in how TB is coding things? Someone posted in Mozilla's forums to one of my posts about userChrome, talking about Developer Toolbox, "Note that looking at the source indicates that he entire window is in transition from XUL to Xhtml. What that means for customization I really do not know.")

Since Developer Toolbox selectors don't work, how do I figure out what this selector is so I can raise the height to get rid of the scrollbar on a single line?

[limp]

Developer Toolbox selectors do work. See if this helps.

Code: Select all

/* Enlarge the message Subject header */

#expandedsubjectRow
{ min-height: 40px !important; }

#expandedsubjectLabel
{ margin-top: 15px !important; }

#expandedsubjectBox
{ font-size: 20px !important; }

[Shemja]

Developer Toolbox selectors do work. See if this helps.

Code: Select all

/* Enlarge the message Subject header */

#expandedsubjectRow
{ min-height: 40px !important; }

#expandedsubjectLabel
{ margin-top: 15px !important; }

#expandedsubjectBox
{ font-size: 20px !important; }

None of that worked. I tried changing some of those values to extremes to see if any would touch it and nothing changed. Maybe something else is overriding it, but I wouldn't know what. The only code I can think of that would be affecting this area would be global settings and Message Header View, but all I have there is:

Code: Select all

/* ::::: GLOBAL FONT AND SIZE ::::: */

* { 
	font-size: 15pt !important;
	font-family: Papyrus !important;
}

/* ::::: MESSAGE HEADER VIEW PANE ::::: */

Code: Select all

#msgHeaderView {
	background-image: linear-gradient(rgb(112, 169, 112), LightYellow, rgb(215, 212, 168)) !important;
	color: Black !important;
	text-shadow: 0px 0px 20px Yellow, -1px -1px 10px Yellow !important; 
	font-weight: bold !important;
}

None of it would be because I'm on a Mac, right?

[Shemja]

I can change the font and make it giant and the scrollbar will disappear while showing all the text, all with the same code I currently have, so the problem is my font. It falls outside accepted text parameters. I guess I deal with the tiny scroll or change my font. Thanks for the help.

[limp]

You need to increase the vertical space available in the message Subject text field to at least 24pt in order to accommodate your 15pt font size. To make the scrollbar disappear from both single-line and multi-line subjects, increase the line height.

Code: Select all

#expandedsubjectBox
{ line-height: 25pt !important; }

To remove the scrollbar from single-line subjects but retain it for multi-lime subjects, increase the overall height of the message Subject text field without increasing the line height.

Code: Select all

#expandedsubjectBox
{ height: 25pt !important; } 

[Shemja]

I had tried that before and it didn't change anything. I tried again, copying and pasting your code, and it still does not increase the height. I tried adding color there too. Nothing.

My entire code for that section of TB is below. I don't know why what you suggested would not work when added. Logic says it should. None of the other selectors in the message header will work either if I try to change any sizes or colors.

Code: Select all

/* ::::: MESSAGE HEADER VIEW PANE ::::: */
/* Header for selected message "From"/"Subject"/"TO" label and data text color */

/* Changes all text color in message header, from/to, data, date and time */

#msgHeaderView {
	background-image: linear-gradient(rgb(112, 169, 112), LightYellow, rgb(215, 212, 168)) !important;
	color: Black !important;
	text-shadow: 0px 0px 20px Yellow, -1px -1px 10px Yellow !important; 
	font-weight: bold !important;
}


/* --------------------------------------------------------------------
 * end of Message Header View Pane section
 */

[limp]

I entered your code in my Thunderbird and achieved the desired result with the CSS I posted above. Something elsewhere in your CSS is preventing the code from working. It could be anything, a misspelled word, a dangling semicolon, a missing bracket, anything at all. You need to debug your code, commenting out each style rule one by one until you find the culprit. If that doesn't work, the problem lies elsewhere in your settings.

Before you do that, enter just the message header code and no other CSS in a fresh profile. It ought to work. It works in my Thunderbird. If it doesn't work, some other factor is involved, the nature of which I can't guess.

[Shemja]

Oh man. All right. Thanks.