Overriding the layout to be more compact, or any other changes 2

[Eufalconimorph]

Since I'd buried it in a thread before, and it could be helpful but is easily missed:

First, there are "Style chooser" and "Change width" buttons on the bottom of the page. These might be sufficient for your needs. If not, you can use CSS (Cascading Style Sheets) and/or ECMAScript to override the layout of the site (or any site). The Stylus extension allows changing the CSS,, and is a lot less complex than a more complete override system that also allows changing the ECMAScript like Tampermonkey.

You can override colors, fonts, font sizes, padding, hide items, or change basically anything else about the layout.

My style, makes it more compact, hides the giant logo at the top, hides the gigantic "more like this" section, hides avatars on the main forum page, etc. Paste it into a new style in Stylus for URLs starting with "https://www.eng-tips.com/" and it should work to alter the site layout. Then customize whatever you want!

/* 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).
*/

/* 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: 70%;
    max-width: 95%;
}
/* 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: medium;
}
/* 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;
}

Make the web work the way *you* want it, not the way site owners want it. It's your browser, not theirs. Also, if a lot of us pick up the same style it's a lot easier for the admins to add that as a new option in the "change style" button since we'll have created the CSS already! Be kind, help others, and take control of your own web browsing experience all in one.

 

[Brian Malone]

Eufalconimorph, I have never modified a web browser page, a CSS, or anything on a web forum so 90% of what you posted is intriguing but non-actionable by me! Can you provide a step-by-step instruction on what to do with the code segment you created? Or did you do that and I just do not understand the guidance sufficiently?

 

[Eufalconimorph]

Install the Stylus extension (there are links on that page for the Mozilla Firefox addon page and the Chrome web store). Then in the extensions menu (probably under the "hamburger" menu in the browser) open Stylus. Add a new style, set it to "URLs starting with" instead of "Everything", put "https://www.eng-tips.com" in the box for the URL, and then paste all the code from above into the giant input box. Press save. The layout should adjust.

I've commented what each of the overrides does, so you can do things like increase font sizes instead of decrease them. E.g. I've got

/* Message poster's username */
.message-name {
    font-size: small;
}

but you might want that bigger. So you could change "small" to "medium". Or make it smaller with "x-small" or "xx-small". Etc.

 

[GregLocock]

Subtle difference, i was expecting fireworks, nice. Works in Opera.

 

[Maslov]

I really like this. I tinkered with it a bit and was able to change out some colors too. Here's a green look to match the Eng-Tips icon

.p-nav {
    background: #1e9646;
}

.block .block-minorHeader{
    background: #1e9646;
}

.p-body-sidebar .block .block-minorHeader{
    background: #1e9646;
}

.button,a.button {
    background: #1e9646;
    border: 1px solid #1e9646;
    box-shadow: inset 0px 1px 0px 0px #1e9646;
}

.button.button--primary,a.button.button--primary {
    background: #1e9646;
    border: 1px solid #1e9646;
    box-shadow: inset 0px 1px 0px 0px #1e9646;
}

.button.button--cta,a.button.button--cta {
    background: #1e9646;
    border: 1px solid #1e9646;
    box-shadow: inset 0px 1px 0px 0px #1e9646;
}

.p-header {
    background: #1e9646;
}

.p-footer-default {
    background: #1e9646;
}

.p-footer-copyright {
    background: #1e9646;
}

.block-header {
    background: #1e9646;
    border: 1px solid #1e9646;
    box-shadow: inset 0px 1px 0px 0px #1e9646;
}

.message-header .message-attribution {
    background: #1e9646;
    border: 1px solid #1e9646;
    box-shadow: inset 0px 1px 0px 0px #1e9646;
}