How to compact toolbars without breakage.

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

How to compact toolbars without breakage.

Post by avada »

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
User avatar
LoudNoise
New Member
Posts: 39900
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Re: How to compact toolbars without breakage.

Post by LoudNoise »

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: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: How to compact toolbars without breakage.

Post by avada »

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).
Post Reply