My new layout for this forum

I didn’t like the layout of the new forum very much (understatement), especially the incredible amount of wasted white space and the overdose of fancy but unneeded stuff. So I started changing a thing or two, using CSS in Firefox’s userContent.css.

This is what it used to look like (and stilll does in my Chrome):

  • I removed all unnecessary margins and paddings,
  • removed the top banner ('Welcome" etc.),
  • removed the notice about closing the topic after four months
  • removed all avatars,
  • added a backcolor for the title of each message,
  • added a thin line at the bottom,

and this is what it looks like now:

The slider will only appear on a wide enough screen:

On an even wider screen the text of each message is divided in two columns:


NB.: This has an effect on included images and code blocks, so I changed them to be resizable.

This way the forum becomes readable again, and I can finally do some reading and replying about Arduino’s and C++ again… :wink:

3 Likes

Here’s the code, to be inserted in Firefox’s userContent.css. Someone wrote it also works in Chrome, but I don’t know how.
NB.: It only changes the layout of the topic pages! I’m still working on the edit box and the preview box.

/* ----- Arduino Forum ----- */
/* version 1.5, april 27 2021 */
/* text colors for code box */
:root {
 --hljs-attribute: black!important;
 --hljs-built_in: yellow!important;   /* ?? */
 --hljs-keyword: black!important;
 --hljs-meta: black!important;
 --hljs-number: black!important;
 --hljs-regexp: black!important;
 --hljs-string: black!important;
 --hljs-title: black!important;
 --hljs-variable: black!important;
 --primary-very-high: black!important;
 --tertiary-high: black!important;
}

/* --- Topic pages --- */
/* page container */
body.archetype-regular div#main-outlet {
 padding-top: 0px!important;
 padding-left: 5px!important;
}
/* site notice and alerts */
body.archetype-regular div#global-notice-alert-global-notice {
 display: none!important;
}
/* new or returning user alert etc. */
/* NB. Possible to use div.new-user and/or div.returning-user instead */
body.archetype-regular div.post-notice {
 display: none!important;
}
/* all div elements (dozens!) */
body.archetype-regular div {
 margin-top: 0px!important;
 margin-bottom: 0px!important;
 padding: 0px!important;
}
/* all messages container and various elements*/
body.archetype-regular section,
body.archetype-regular nav {
 margin: 0px!important;
 padding: 0px!important;
}
/* single message container, large */
body.archetype-regular div.topic-body {
 width: 98%!important; /* was: calc(690px + (11px * 2)) !! ?? */
}
/* single message container, small */
body.archetype-regular div.cooked {
 columns: 440px 2;
 margin-bottom: 0px!important;
 padding: 5px 11px!important;
 line-height: 1.2em!important;
}
/* message title bar */
body.archetype-regular div.topic-meta-data {
 background-color: #E0E0F0;
 padding: 0px 3px 1px 3px!important;
}
/* user avatar next to message */
body.archetype-regular div.topic-avatar {
 display: none!important;
}
/* quote */
body.archetype-regular aside.quote {
 font-size: 85%!important;
 margin-bottom: 0px!important;
}
/* quote */
body.archetype-regular aside.quote div.title,
body.archetype-regular aside.quote blockquote {
 padding: 2px 3px!important;
}
/* avatar in quote */
body.archetype-regular div.title img.avatar {
 display: none!important;
}
/* message text */
body.archetype-regular p {
 margin: 0px 0px 3px 0px!important;
 padding: 0px!important;
}
/* image in message */
body.archetype-regular div.lightbox-wrapper {
 /* todo: resizable ? */
 max-width: 100%!important;
 overflow: auto!important;
}
/* image in message */
body.archetype-regular img.d-lazyload {
 border: 1px solid silver!important;
 margin-top: 3px;
 margin-bottom: 5px;
 padding: 0px!important;
 resize: both!important;
}
/* code block in message, part 1 */
body.archetype-regular code {
 /* code.cpp, .css, .php, .apache (etc. ?) */
 display: block!important;
 /* height: 180px; todo: wert niet ? */
 border: 1px solid silver!important;
 resize: both!important;
 margin-bottom: 0px!important;
}
/* buttons below message (like, share link, ..., Reply) */
body.archetype-regular button.widget-button,
body.archetype-regular button.btn-flat,
body.archetype-regular button.btn-icon {
 margin: 0px!important;
 padding: 0px 0px 3px 10px!important;
}
/* thin line below message */
body.archetype-regular article {
 display: block!important;
 border-bottom: 1px solid silver;
}
/* "[user] is replying..." - avatar */
body.archetype-regular div.presence-users img {
 margin-top: 5px;
 height: 10px!important;
 width: 10px!important;
}
/* "[user] is replying..." - hide dancing dots */
body.archetype-regular span.wave {display:none!important;}
/* "Please register" (when not logged in) and "This topic will close 4 months after the last reply" 

*/
body.archetype-regular div.topic-timer-info,
body.archetype-regular div.signup-cta {   
 display: none!important;
}
/* list of suggested topics */
body.archetype-regular h3#suggested-topics-title {
 margin: 10px 0px -5px 0px!important;
}
body.archetype-regular table.topic-list {
 margin-bottom: 0px!important;
}
body.archetype-regular table.topic-list td,
body.archetype-regular table.topic-list th { 
 padding-top: 0px!important;
 padding-bottom: 0px!important;
}
/* user alert */
body.archetype-regular div.modal-inner-container {
 padding-left: 5px!important;
 padding-right: 5px!important;
}
/* user alert, backdrop */
div.modal-backdrop {
 background-color: #C0C0C0!important;
 opacity: 0.66!important;
}
2 Likes

I figure it this way. It’s change and it really does not get any simpler. Remember when Microsoft went with Windows XP and everyone wanted Windows 98 SE back. Once everyone adjusted to the change and learned how to use it then it was the best thing since sliced bread. Well everyone for the most part anyway. All new designs always require some “tweaking” to get things how they are wanted. The entire new layout and subsequent “tweaks” are just what people need to learn and navigate.

I use Firefox and Chrome primarily but have other browsers I can use. I use mostly Chrome here and I like the new look but again it takes time to learn and navigate. Like anything else new and different.

Ron

Bro really appreciated your efforts, I’m really happy , It’s look like same as Cloudflare community use. BBCODE based language is a good idea.

I don’t know many that wanted SE back. Now XP or 7 well that’s a different matter.

1 Like

How many people want’s Windows 8 back?
Or Windows Vista?

Managed to skip both of those :stuck_out_tongue:

Not me on those choices. :slight_smile:
Ron

I actually won a copy of Windows Millennium Edition from Microsoft :slight_smile:
Not that I ever installed it.

“Not that I ever installed it”.

You were among the fortunate. I attended a few launches of Microsoft products until they quit giving away the good stuff. We had Microsoft HUP (Home User Program) through where I worked. That was actually a good deal till I retired. :slight_smile: Today the HUP is nothing like it was years ago.

Ron

The technet conventions as you rightly state used to be full of great freebies.
Alas no more. :disappointed:

I got so many soft toys over the early years (Late 90’s to 2005). I have 8 Tux’s and 5 Red dragons from Dragon Systems. Also plenty of coffee mugs from MS and others

Depend … how many peoples developed them ? :wink:

Windows ME, in Dutch the ME stood for Meer Ellende (more misery)