Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Userchrome.css help

  • 5 replies
  • 2 have this problem
  • 21 views
  • Last reply by boogerlad

boogerlad
boogerlad
more options

Hi, I have written this code: 

   #titlebar-content
   {
      margin-top: -3px !important;
   }
   .tabbrowser-tab
   .tab-close-button
   {
      visibility: collapse !important;
   }
   .tabbrowser-tab:not([pinned]):hover
   .tab-close-button
   {
      visibility: visible !important;
      margin-right: 3px !important;
      display: -moz-box !important;
   }
   .tabbrowser-tab:not([pinned])
   .tab-text
   {
      -moz-box-ordinal-group: 4 !important;
   }
   .tabbrowser-tab:not([pinned])
   .tab-throbber,
   .tabbrowser-tab:not([pinned])
   .tab-icon-image,
   .tabbrowser-tab:not([pinned])
   .tab-close-button
   {
      margin-left: 2px !important;
   }
   .tabbrowser-tab:not([pinned]):hover
   .tab-icon-image,
   .tabbrowser-tab:not([pinned]):hover
   .tab-throbber
   {
      display: none !important;
   }
   #urlbar-container
   {
      min-width: 300px !important;
      max-width: 300px !important;
   }
   #urlbar
   {
      border-style: none !important;
   }
   #star-button
   {
      display: none !important;
   }
   #identity-box
   {
      display: none;
   }
   #navigator-toolbox::after
   {
      height: 0px !important;
   }
   #appmenu-button
   {
      background-color: transparent !important;
      background-image:
      -moz-linear-gradient(hsla(0, 0%, 80%, .4), hsla(0, 0%, 20%, .2)),
   /*URL data has been broken into separate lines.  Put back together before using !! */
      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAA
   AAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAElElEQVQ4T32UeVAVVBSHX8N7gCzvP
   R4QCohoLBrjVrhQYiJqyObCJpugKCCiEomMiaMopo1EuSEIuYAYWigUKLhkxiYDIvDYHqAIKabIIiIikl9P/3DGybozZ87MvXO/Ob/fvecIBO9Y0hm
   bzcevTNoTeLL0xu7fm/uPlLeT2dzV872iq8j+u6tbjDxSRr3r3pu958ftNEQWKzQlH69LnBKSMRwr7ya/72/kgy+pV0atMsqfveTgrS7WHD474BJzP
   CYx0EfjX9CB+I9cb26y3qFm7nfT1GEvLvE32H/iFH/kpVH05AWl/cOvc37vEEl3+/HMlJORl0zaoS97c90sfd8CPvDR/bnFTUKC5zRORniQEeDCNX
   dTkutaye4eoqBvmJyeIXYpugkv6cAxuZrYlEzaKkPI3etJTdz0iDfA+qXaRX+G6tLko0Ojrw4Vi2UUBExkn7yJlHs9nOh5wZFHQ8S19RN8/SFelx8w
   a+NJelpDeVzuSUnq/IHnDUv0BL27jEw7wnSeNbqoU+ukRY2rGLmXjDJnCU1LtbgT9gFhv5YR1fCEtdWP8S/tYV5aM5O2/UZqYhD9VYsYqHNlsO
   pzd0HvduOvW9w0qXPQoGqBJpULxdR46dESNYXanH2s3pPBoqw23PM7mX+skRnfVmC1o5gx3odZHxnM06I5vGhx4fH5qZsF3dtNChteVeSgRZ
   WTEuShlLt2HPfjbfDb+QM2RxTYHrvF9PhyPozMwWRZEkYeiejbbaXqQih9+Z8xJF/A9UirVsH9dYZlciWoWgl6JS9rqiapJqpYL96KVUQWltuKmR
   BbgkXMNUYvT8Ng4Tfo2+9EOmMjXRXODBZPY7B8GgdWWD8T3FqiU1tpr6zKVcoNdxlnzIVc/VQNr9VbMArJYXRYLlbhp5m8/jRGQT8hs41BOj
   MayaRg+krteXpxAr2/jOXaQUuFoMpmxKGimUqvXHSo8dalzFYFhYsQxVpDzqyzIzPcjpbosdw5YMuyDXFoT49mhNUaokLm0p9jRv85EzqTdJW
   2aCUKCs1VnPLM1SicrU31Mj2a/CS0+Yzg0mwNCuylFC6SsX+eJWafRKA+ay/C8eGoGHtTkTCW3rSRdB6U0rZZjduR2jMFV0xVRGcNRW2njFU
   pmi+lxk+fppD3uRVmwNY5Exlj4YXAMgqBSQACfWeMzZ1Y5TybrqMmPNonpv0rNbJdTVBs8jZ7/XGzDYV+KVIhaaPVuO4oo9pXn8bgkTSHj6JklQ
   lfzLXGf7IR2+31kYdr8tcOCXdjpbTHiMnz0+Pi7rnVwx3J773pggyZMD1BQ4V0U3WK50moVD6G3F+fhpV6NAbJUASJqV8upiFQm9ZwDe7tMaBjlx
   a9x3U6np/Tm/BWf6ZLVESpElHKAbEKR0cKuWKjReViKbXeUhr8JSgCtGkK1KI1VIv2CLHSI02lRHF+Z4L2f4+jHw1EHukGwnsnDIRkW6hSbKtOla
   MaDW6q1Hspc6Aquf6G5LiaXSp3nCT537n26jB3nFDzvIVofYGV6MLlyaLKEhvRw5sOqlfrfDWymjeI425HS2a9C/IPcDqo7+BRMssAAAAASUVORK
   5CYII="),
         -moz-linear-gradient(rgb(247, 182, 82), rgb(215, 98, 10)),
         -moz-linear-gradient(rgb(153, 38, 211), rgb(105, 19, 163)) !important;
      background-position: -100px 0px, 2px center, 0px 0px, -100px 0px !important;
      background-repeat: no-repeat !important;
      margin-top: 3px !important;
      min-height: 20px !important;
      max-height: 20px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      border: none !important;
   }
   #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive)
   {
      background-position: -100px 0px, 2px center, -100px 0px, 0px 0px !important;
   }
   #appmenu-button:-moz-window-inactive
   {
      background-position: 0px 0px, 2px center, -100px 0px, -100px 0px !important;
   }
   #appmenu-button
   .button-text
   {
      display: none !important;
   }
   .tabbrowser-tab,
   .tabs-newtab-button
   {
      padding: 0px 0px 4px 0px !important;
   }
   .tabbrowser-tab[pinned],
   .tabs-newtab-button
   {
      max-width: 22px !important;
      min-width: 22px !important;
   }
   #TabsToolbar
   {
      margin-bottom: -2px !important;
   }


and when there aren't that many tabs, it looks fine. http://i.imgur.com/vXjLcDo.png

However, when tab overflow occurs, app tabs don't look quite right. http://i.imgur.com/8XLuWka.png

Is there a way to fix this?

Also, when are the svg versions of the firefox logo coming out? The status has been "will be released soon" for over a year now.

Hi, I have written this code: #titlebar-content { margin-top: -3px !important; } .tabbrowser-tab .tab-close-button { visibility: collapse !important; } .tabbrowser-tab:not([pinned]):hover .tab-close-button { visibility: visible !important; margin-right: 3px !important; display: -moz-box !important; } .tabbrowser-tab:not([pinned]) .tab-text { -moz-box-ordinal-group: 4 !important; } .tabbrowser-tab:not([pinned]) .tab-throbber, .tabbrowser-tab:not([pinned]) .tab-icon-image, .tabbrowser-tab:not([pinned]) .tab-close-button { margin-left: 2px !important; } .tabbrowser-tab:not([pinned]):hover .tab-icon-image, .tabbrowser-tab:not([pinned]):hover .tab-throbber { display: none !important; } #urlbar-container { min-width: 300px !important; max-width: 300px !important; } #urlbar { border-style: none !important; } #star-button { display: none !important; } #identity-box { display: none; } #navigator-toolbox::after { height: 0px !important; } #appmenu-button { background-color: transparent !important; background-image: -moz-linear-gradient(hsla(0, 0%, 80%, .4), hsla(0, 0%, 20%, .2)), /*URL data has been broken into separate lines. Put back together before using !! */ url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAA AAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAElElEQVQ4T32UeVAVVBSHX8N7gCzvP R4QCohoLBrjVrhQYiJqyObCJpugKCCiEomMiaMopo1EuSEIuYAYWigUKLhkxiYDIvDYHqAIKabIIiIikl9P/3DGybozZ87MvXO/Ob/fvecIBO9Y0hm bzcevTNoTeLL0xu7fm/uPlLeT2dzV872iq8j+u6tbjDxSRr3r3pu958ftNEQWKzQlH69LnBKSMRwr7ya/72/kgy+pV0atMsqfveTgrS7WHD474BJzP CYx0EfjX9CB+I9cb26y3qFm7nfT1GEvLvE32H/iFH/kpVH05AWl/cOvc37vEEl3+/HMlJORl0zaoS97c90sfd8CPvDR/bnFTUKC5zRORniQEeDCNX dTkutaye4eoqBvmJyeIXYpugkv6cAxuZrYlEzaKkPI3etJTdz0iDfA+qXaRX+G6tLko0Ojrw4Vi2UUBExkn7yJlHs9nOh5wZFHQ8S19RN8/SFelx8w a+NJelpDeVzuSUnq/IHnDUv0BL27jEw7wnSeNbqoU+ukRY2rGLmXjDJnCU1LtbgT9gFhv5YR1fCEtdWP8S/tYV5aM5O2/UZqYhD9VYsYqHNlsO pzd0HvduOvW9w0qXPQoGqBJpULxdR46dESNYXanH2s3pPBoqw23PM7mX+skRnfVmC1o5gx3odZHxnM06I5vGhx4fH5qZsF3dtNChteVeSgRZ WTEuShlLt2HPfjbfDb+QM2RxTYHrvF9PhyPozMwWRZEkYeiejbbaXqQih9+Z8xJF/A9UirVsH9dYZlciWoWgl6JS9rqiapJqpYL96KVUQWltuKmR BbgkXMNUYvT8Ng4Tfo2+9EOmMjXRXODBZPY7B8GgdWWD8T3FqiU1tpr6zKVcoNdxlnzIVc/VQNr9VbMArJYXRYLlbhp5m8/jRGQT8hs41BOj MayaRg+krteXpxAr2/jOXaQUuFoMpmxKGimUqvXHSo8dalzFYFhYsQxVpDzqyzIzPcjpbosdw5YMuyDXFoT49mhNUaokLm0p9jRv85EzqTdJW 2aCUKCs1VnPLM1SicrU31Mj2a/CS0+Yzg0mwNCuylFC6SsX+eJWafRKA+ay/C8eGoGHtTkTCW3rSRdB6U0rZZjduR2jMFV0xVRGcNRW2njFU pmi+lxk+fppD3uRVmwNY5Exlj4YXAMgqBSQACfWeMzZ1Y5TybrqMmPNonpv0rNbJdTVBs8jZ7/XGzDYV+KVIhaaPVuO4oo9pXn8bgkTSHj6JklQ lfzLXGf7IR2+31kYdr8tcOCXdjpbTHiMnz0+Pi7rnVwx3J773pggyZMD1BQ4V0U3WK50moVD6G3F+fhpV6NAbJUASJqV8upiFQm9ZwDe7tMaBjlx a9x3U6np/Tm/BWf6ZLVESpElHKAbEKR0cKuWKjReViKbXeUhr8JSgCtGkK1KI1VIv2CLHSI02lRHF+Z4L2f4+jHw1EHukGwnsnDIRkW6hSbKtOla MaDW6q1Hspc6Aquf6G5LiaXSp3nCT537n26jB3nFDzvIVofYGV6MLlyaLKEhvRw5sOqlfrfDWymjeI425HS2a9C/IPcDqo7+BRMssAAAAASUVORK 5CYII="), -moz-linear-gradient(rgb(247, 182, 82), rgb(215, 98, 10)), -moz-linear-gradient(rgb(153, 38, 211), rgb(105, 19, 163)) !important; background-position: -100px 0px, 2px center, 0px 0px, -100px 0px !important; background-repeat: no-repeat !important; margin-top: 3px !important; min-height: 20px !important; max-height: 20px !important; min-width: 34px !important; max-width: 34px !important; border: none !important; } #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { background-position: -100px 0px, 2px center, -100px 0px, 0px 0px !important; } #appmenu-button:-moz-window-inactive { background-position: 0px 0px, 2px center, -100px 0px, -100px 0px !important; } #appmenu-button .button-text { display: none !important; } .tabbrowser-tab, .tabs-newtab-button { padding: 0px 0px 4px 0px !important; } .tabbrowser-tab[pinned], .tabs-newtab-button { max-width: 22px !important; min-width: 22px !important; } #TabsToolbar { margin-bottom: -2px !important; } and when there aren't that many tabs, it looks fine. http://i.imgur.com/vXjLcDo.png However, when tab overflow occurs, app tabs don't look quite right. http://i.imgur.com/8XLuWka.png Is there a way to fix this? Also, when are the svg versions of the firefox logo coming out? The status has been "will be released soon" for over a year now.

Chosen solution

.tabbrowser-tab[pinned=true] .tab-throbber, .tabbrowser-tab[pinned=true] .tab-icon-image { margin-left: 1px !important; margin-right: 1px !important; }

from https://addons.mozilla.org/en-us/firefox/addon/noverflow/

fixed the problem. =) Thanks for helping me find the errors in my ways.

Read this answer in context 👍 0

All Replies (5)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

That is caused by this rule and it is better to leave pinned tabs as they are and remove this rule. 

.tabbrowser-tab[pinned],
.tabs-newtab-button {
  max-width: 22px !important;
  min-width: 22px !important;
}
boogerlad
boogerlad Question owner
more options

Removing that rule results in this: http://i.imgur.com/ViFvRTu.png where the apptab is drawn over the tab toolbar. Would I be able to resolve that via z-index or moz-box-ordinal-group?

If that's not the correct way to change the width, what is the recommended way?

Modified by boogerlad

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Are that the two pixels added by the last rule causing this? 

#TabsToolbar { margin-bottom: -2px !important; }
boogerlad
boogerlad Question owner
more options

Yes, you are right again. As you can probably infer, I'm going for a minimalistic theme. I'm trying to reduce the space as much as possible. 

  #titlebar-content { margin-top: -3px !important; }

removes the top 3 pixels on top of the tab bar, and the last rule 

  #TabsToolbar { margin-bottom: -2px !important; }

is to make the tab height shorter. My original solution was manually adjusting the tab-height, but it would cause the fonts and the favicon to be squished and it would look quite ugly. Can you recommend an alternate method then?

boogerlad
boogerlad Question owner
more options

Chosen Solution

.tabbrowser-tab[pinned=true] .tab-throbber, .tabbrowser-tab[pinned=true] .tab-icon-image { margin-left: 1px !important; margin-right: 1px !important; }

from https://addons.mozilla.org/en-us/firefox/addon/noverflow/

fixed the problem. =) Thanks for helping me find the errors in my ways.