MozillaZine

How to compact toolbars without breakage.

User Help for Mozilla Firefox
avada
 
Posts: 1789
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Post Posted October 12th, 2014, 5:46 am

Hello!
I've been trying to compact the three toolbars (menubar, navbar, tabbar) in latest FF to make them similar size as they were with Classic Compact with CSS but with little succes. I get a lot of broken stuff. So I guess I miss some (or a lot of) things. I looked some CSS provided by others but they have similar issues.

This is how it was:
http://abload.de/img/theme-ccodaoqp.png

This is as far as I got: (I restored what I could wanted wtih classic toolbar buttons, classic theme restorer)
http://abload.de/img/theme-aus-ctr-ctb-css65p9l.png

This is as far as I got:
Code: Select all
/* AGENT_SHEET */

#tabbrowser-tabs, .tab-stack{
  height: 20px !important;
  min-height:20px  !important;
  margin: 0px 0px !important;
  padding: 0px 0px !important;
}


#nav-bar{
height:20px !important;
}


#main-menubar, #menubar-items, #toolbar-menubar{
height:18px !important;
}


.toolbarbutton-1{
  margin: 0px 0px !important;
  padding: 0px 0px !important;

}


Most problem is with the icons, toolbar buttons. Which either get squashed or overlapped. And seem to have padding even though I set it to zero.

Suggestions welcome. :)
Last edited by smsmith on October 12th, 2014, 2:08 pm, edited 1 time in total.
Reason: removed img tags; large images break the forum - smsmith/moderator

LoudNoise
New Member

User avatar
 
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted October 13th, 2014, 9:57 am

Moving to Firefox Support
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

avada
 
Posts: 1789
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Post Posted October 15th, 2014, 1:42 pm

Okay So this is the max I could achieve without braking anything. (except TMP multi-row tabs.)
Image

Probably there a lot of redundancies and inert items. That's because I don't know what I'm doing just experimenting. :)
Code: Select all
/* AGENT_SHEET */

.toolbarbutton-1{
  margin: 0px 0px !important;
  padding: 0px 0px !important;
  min-height:16px  !important;
  height:16px  !important;
  border-radius: 0  !important;

}



#tabbrowser-tabs, .tabbrowser-tab
{
  height: 22px !important;
  min-height:22px  !important;
  margin-bottom: 1px !important;
  padding: 0px 0px !important;
  border-radius: 0px  !important;

}

.tab-stack{
  height: 20px !important;
  min-height:20px  !important;
  margin: 0px 0px !important;
  padding: 0px 0px !important;
 
  border-radius: 0  !important;

}

#urlbar{
  min-height:26px  !important;
  height:26px !important;
  margin: 0px 0px !important;
  padding: 0px 0px !important;
  /*margin-top: -1px !important;*/
}

#nav-bar{
height:27px !important;
  /*
  margin: 0px 0px !important;
  padding: 0px 0px !important;
  */
}



#main-menubar{
min-height:20px  !important;
height:20px !important;
}

#menubar-items{
min-height:20px  !important;
height:20px !important;
}


#toolbar-menubar{
min-height:23px  !important;
height:23px !important;
}


What's annoying is that buttons wouldn't get smaller than a certain size for some reason. Also some padding seems to persist with the tab-bar, rather the favicons began to get scaled down (ugly).

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot] and 12 guests