urlbar font size

[FineWine]

Code: Select all

#urlbar {
    -moz-appearance: none !important;
     font-size: **px !important;
}

This works for me sort of, but when I increase the font-size it increases the actual #urlbar-input-container width (not length) which then increases the whole location toolbar width. There appears to be loads of inherit padding top & bottom within the url box. So all I want to do is increase the font size of the inherit font family nothing else.

[Nestea]

try #urlbar-input

...
This works for me sort of, but when I increase the font-size it increases the actual #urlbar-input-container width (not length) which ....

i dont think i understand. do you mean height? @ length

[FineWine]

Thanks but no-go. Also #urlbar-input-container does not work.

Using default settings


userChrome.css

Code: Select all

*#main-window .searchbar-textbox, #urlbar, #searchbar {
    font-family: arial !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
}

When I try to just increase the Font size it increases the container internal height, therefore increases the entire Toolbar height, as indicated by the red arrows

Notice the large gap, in all the shots, between the green container box border and the actual text within the box. This also occurs within the identity-box. I have tried various padding and margin adjustments but I suppose I am not getting the elements id correct or some such.

So what I want to do is to decrease that gap between the font and the box border and also make the container the same height as the icons outside of the box, whilst increasing the url font size without altering the box height. I know it will be a fine balance between the two.

[LewS]

This code may work - works for me on Mac,

#urlbar .urlbar-input-box {
max-height: 30px !important;
margin-bottom: -1px !important;
font-weight: 600 !important;
font-size: 17pt !important;}

[Nestea]

yea. max-height seems to do the trick



I have

Code: Select all

#urlbar-input {
font-size: 22px !important;
max-height: 22px !important;
}

[FineWine]

Thanks to both of you. I was over thinking it all, as usual. This is what nailed it:

Code: Select all

#urlbar-input  {
    max-height: 30px; !important;
    margin-bottom: -1px !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
}

I took away the font-family. The max-height constrained the box and the margin-bottom ensured the text was centred, whilst em value ensured scalability.

[BruceAWittmeier]

Thanks to both of you. I was over thinking it all, as usual. This is what nailed it:

Code: Select all

#urlbar-input  {
    max-height: 30px; !important;  <<<<<<<<<<< 
    margin-bottom: -1px !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
}

I took away the font-family. The max-height constrained the box and the margin-bottom ensured the text was centred, whilst em value ensured scalability.

I noticed you have a semi-colon after the 30px; Is that correct?
max-height: 30px; !important;

[Nestea]

........
Is that correct?
max-height: 30px; !important;

no. he probably just appended !important instead of inserting it

[FineWine]

........
Is that correct?
max-height: 30px; !important;

no. he probably just appended !important instead of inserting it

Typo, as I did not cut & paste the code post as I am trying to learn to do things long hand because I learn better that way.