You can control how a web page displays using css. In the case of Firefox create a file called userContent.css and place it in a folder called 'chrome' (create it if it doesn't exist) in the appropriate profile folder. Here is some css to get rid of the stuff at the top and group the icons into one window, and make the left sidebar less obtrusive. It's not perfect but much better. I started with trimming the boxes at the top but after a while just hid them in favour of bringing the icons back into one window. Leave out the bits for hiding the top boxes and hiding the stats box if you still want to see those.
/*make the top boxes less big */
.cp-group__header {
padding: 0px !important;
}
/*make the top boxes less big */
.cp-app {
padding: .1em !important;
}
/*make the top boxes less big */
h1.section-header {
padding-bottom: 0px !important;
}
/* hides the wordings in the top box */
.cp-app__details-description {
display: none !important;
}
/* hide the stats box */
#stats {
display: none !important;
}
/* hides the top boxes altogether */
.tools-stats-grid-container {
display: none !important;
}
/* make the icons column flex */
#tools {
display: flex !important;
flex-wrap: wrap !important;
}
/* make the icons column narrow and give icon bars padding */
.cp-group:not(.expanded) {
padding: 10px !important;
width: 250px !important;
}
/* icon bar margin */
.mb-1 {
margin-bottom: 5px !important;
}
/* hide the title 'Tools' */
h1.section-header {
display: none !important;
}
/* stops icon bar & dropdown moving to the right if there's only one entry */
.row {
min-width: 220px !important;
}
/* left sidebar colours*/
:root {
--cp-primary-color: #6686cc !important;
--cp-primary-contrast-text: #ffffff !important;
--cp-disabled-color: #ddd !important;
}
/*make the top boxes less big */
.cp-group__header {
padding: 0px !important;
}
/*make the top boxes less big */
.cp-app {
padding: .1em !important;
}
/*make the top boxes less big */
h1.section-header {
padding-bottom: 0px !important;
}
/* hides the wordings in the top box */
.cp-app__details-description {
display: none !important;
}
/* hide the stats box */
#stats {
display: none !important;
}
/* hides the top boxes altogether */
.tools-stats-grid-container {
display: none !important;
}
/* make the icons column flex */
#tools {
display: flex !important;
flex-wrap: wrap !important;
}
/* make the icons column narrow and give icon bars padding */
.cp-group:not(.expanded) {
padding: 10px !important;
width: 250px !important;
}
/* icon bar margin */
.mb-1 {
margin-bottom: 5px !important;
}
/* hide the title 'Tools' */
h1.section-header {
display: none !important;
}
/* stops icon bar & dropdown moving to the right if there's only one entry */
.row {
min-width: 220px !important;
}
/* left sidebar colours*/
:root {
--cp-primary-color: #6686cc !important;
--cp-primary-contrast-text: #ffffff !important;
--cp-disabled-color: #ddd !important;
}
Last edited: