. My mistake was that I decided to "Unwatch" everything and start over. And for each individual forum I add I have to make individual settings, that is a lot of mouse clicks .
class value, and use that to write some CSS for that class./* Eng-tips.com compactification */
/* Comments like these don't change anything on the site, they're for human-readable explanations. */
/*
Comments can span multiple lines, like this one.
I'm writing these comments in [CommonMark](https://commonmark.org/) syntax.
The MDN [CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS) is very useful for finding out what you can change & how to do it.
Your browser's development tools (usually Shift+F12 brings this up) should have some sort of "inspector" tab, and a way to pick an element by clicking on it.
*/
/*
To change something on the site, open the inspector and find the element you want to change. It either has a `class` directly or a parent item has a `class`.
Get the name of that class (e.g. the text within a post is in a `<div class="bbWrapper">` block, so the class name is `bbWrapper`).
Then it's a matter of writing the override:
```
.className {
property: value;
another-property: value;
}
```
Replacing the className with the class name you want to override, and the list of properties & values with the ones you want.
The semicolons are optional if you only have one property in the block, but recommended anyway so adding more is easy.
You can add `!important` after the value to ensure your version overrides the site's original styles, if needed.
See [MDN's page on important](https://developer.mozilla.org/en-US/docs/Web/CSS/important) for detail.
Most of the uses below aren't actually necessary, but they don't hurt for our purposes.
A lot of this is overriding [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size).
*/
/* The big set of pictures & links to "similar" threads at the top of the page. */
.more-like-this-article-ul {
display: none;
}
/* Your username in the top-right of the navigation bar.*/
.p-navgroup-link {
font-size: x-small;
}
/* Your avatar image in the upper-right*/
.avatar--xxs {
display: none;
}
/* The `HOME`, `FORUMS`, etc. links on the top nav bar.*/
.p-navEl-link {
font-size: x-small;
}
/* Reduce excessive padding on the top nav bar with `HOME`, `FORUMS`, etc. */
.hScroller-scroll.is-calculated {
padding: 1px 1px;
margin-bottom: 0px;
}
/* The arrows for the `WHAT'S NEW`, `MEMBERS`, and `GROUPS` buttons can make vertical spacing messy on this bar.
The one for `FORUMS` is controlled by JS AFAICT, so full Tampermonkey userscripts might be needed.
Also used for the `NEW POSTS`, `FIND THREADS`, etc. bar.
*/
.p-navEl-splitTrigger {
max-height: 40px;
}
/* Reduce the size of the section links bar with `NEW POSTS`, `FIND THREADS`, etc. */
.p-sectionLinks {
padding: 1px 1px;
max-height: 30px;
.p-sectionLinks-list {
font-size: xx-small !important;
}
}
/* Reduce padding from the header */
.p-header {
padding-top: 1px;
padding-bottom: 1px;
}
/* Hide the header logo (it's huge, and CSS can't resize images) */
.p-header-logo.p-header-logo--image {
display: none;
}
/* Keep the search box aligned to the right, and reduce both vertical and horizontal padding */
.p-header-content {
justify-content: end;
padding: 1px 1px;
}
/* Reduce the size of the magnifying glass in the search box */
.xb-searchWrapper {
font-size: x-small;
}
/* Reduce the size of the text in the search box, and limit its max height */
.input {
font-size: x-small;
max-height: 20px;
}
/* Avatar next threads */
.node-extra-icon {
display: none;
}
/* Text about each thread */
.node-extra {
font-size: x-small;
}
/* Eng-tips.com compactification for thread view */
/* Message body text */
.bbWrapper {
font-size: small;
}
/* Message poster's username */
.message-name {
font-size: small;
}
/* Message poster's engineering specialty, e.g. Automotive, Chemical, Computer, … */
.userTitle {
font-size: x-small;
}
/* Message poster's account creation date, number of posts, and location in the left block next to the post */
.pairs {
font-size: xx-small;
}
/* The text inside the message header. Date, number of stars, share button, etc. */
.message-attribution {
font-size: xx-small !important;
}
/* The bar at the bottom of each post with the `Report`, `Great post!`, `Like`, and `Reply` buttons */
.actionBar-action {
font-size: xx-small;
}
/* Each message poster's avatar picture.
You can change 'block' to 'none' to hide those and make the layout even smaller */
.message-avatar {
display: block;
}
/* General options for the site */
/* How much horizontal space the main body with all the posts or subforums takes up. */
.p-body-inner {
min-width: 85%;
max-width: 95%;
}
