OLD BROWSERS: ips-forum layout bugs + self help tweaks (css)

[siria]

A topic for fellow sufferers on really OLD Browsers. Hope it's okay to post it here.
I understand todays websites are all optimized for latest Chrome on latest systems only, and for us ips-forums remain partly broken. But we can at least partly help ourselves with some self-knitted custom CSS rules :) There were already a bunch of postings the last days, shattered across the forum.

Those css snippets are added e.g. in Firefox profile/chrome/userContent.css (create it or rename userContent_template.css), or via some stylesheet addon (e.g. Stylem for PaleMoon). Have no clue of addons, sorry can't help more.

And personally can only test old Firefox-forks, era FF3.5+24, not Opera, not Chrome etc.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

The first brute-force trick on all broken websites, if in hurry or nothing else helps:
Kill all page styles!
Looks horrible, but on most sites nearly all links show up and work at least, etc. Luckily, in ips-Forums too.
In K-Meleon this needs macro StyleKiller, in other browsers styles can be disabled natively, somewhere in Menu View > Page Style... (or similar)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Page header: BREADCRUMB links not clickable?

FIX: add this line to your custom css file:
body.ipsApp .ipsBreadcrumb{display: inline !important;}

(Link-killer found in file xxxx_custom.css, ca 40%, it sets display:block.
Deleting only this line didn't help, and neither trying inline-block, table-cell etc)
.

[siria]

Broken ICONS in page header, post editor, 3dots-menu?

Most such icons need a special icon-font, called FontAwesome
A) either installed locally AND added to browser prefs (font.name-list....)
B) or let browser download fonts from web when visiting a page (needs permission prefs)
HOWTO:
https://msfn.org/board/topic/176837-disable-web-fonts-in-google-chromemozilla-firefox/

example for A)
pref("font.name-list.sans-serif.x-western", "Arial, Microsoft Sans Serif, FontAwesome, Symbola, OpenSansEmoji");
But use your own fonts, and copy pref for "x-unicode", "x-cyrillic" etc,
And then the same for ...."list.serif.", and "list.monochrome." etc. pp....
.
Edited January 8, 2021 by siria

[siria]

Don't find the REPORT / EDIT Links anymore?

They are now behind a 3dot-icon, in headline of postings, right side.
You can try if clicking it works for you, or if not:

https://msfn.org/board/topic/182240-missing-buttoncontrol/page/2/?tab=comments#comment-1193841

(there's also a workaround for the menu on Login name, if broken)
. Edited January 8, 2021 by siria

[siria]

(KM74) GIANT font-size in posting text, and NOT zoomable smaller?

Very weird. Finally realized the culprit is a font-size in "rem" value.
For some crazy reason this seems to work like a "min-font-size" in my KM74(FF24)?!
Yet older browsers don't know "rem" at all and just ignore it.

FIX: add this line to your custom css file:
body.ipsApp .ipsComment_content .ipsType_richText, body.ipsApp .cke_contents{font-size: 12px !important;}
(or bigger or smaller size, as you wish)

(Found in file xxxx_custom.css, almost at end, original is {font-size:1.3rem;....}
.

Edited January 9, 2021 by siria
fixed typo in code

[siria]

(KM74) Forum shows BLACK text on DARKGRAY background?
No fun. And you tried already to change background-color, but didn't help a thing?

The trick is: the culprit is a background-IMAGE!

FIX: add this line to your custom css file:
body.ipsApp {background-image: none !important; }

This plain, darkgray color is a actually a "gradient" image. But not a simple one, instead some very complicated "modern" type. In extremely old browsers no prob, they don't know any gradients at all and just ignore it. But in medium-age browsers it's a killer, they seem to take just the darker end as plain color.
culprit is this line in xxxx_custom.css:
body{background-image:linear-gradient(to bottom, rgba(23,23,23,0.8) 0%, rgba(23,23,23,0.8) 100%);}
.

Edited January 12, 2021 by siria

[siria]

Forum background too bright to see the WHITE links?
Mainly on profile pages?

Set a medium-light color as body background, to see the black AND white links on it.
example light green:
body.ipsApp {background-color: #AADD44 !important; }

But now the posting text gets a bit harder on the eyes, sigh... It's complicated. And columns too narrow/too wide for my screen.... Have meanwhile a huge pile of just cosmetic rules, lost overview, and still growing - since many years. Guess 90% are meanwhile obsolete again, should clean up some day ;-)

Example for Profile pages (have the most white+black text), currently like this:

body.ipsApp[data-pagecontroller="profile"] {background-color: yellowgreen !important; }
body.ipsApp[data-pagecontroller="profile"] div[data-controller="core.front.profile.body"]{display: block !important;}
/* postings list */
body.ipsApp[data-pagecontroller="profile"] section.ipsColumn{display: block !important;width: 800px !important; margin: 20px 80px;}
body.ipsApp[data-pagecontroller="profile"] li[class~="ipsStreamItem_contentBlock"] {background-color: #EEFFAA;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
By the way I personally prefer not to wrap those codes into the usual domain condition, since chances are high that other ips-Forums have the same probs, so those rules can catch all flies at once ;-)
But if you prefer and don't know howto add a domain:

@-moz-document url-prefix(https://msfn.org/board/) {
.....(insert code snippets)....
}
or
@-moz-document domain(msfn.org) {
/* insert comment lines like this, for descriptions or to add info links */
.....(insert code snippets)....
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
More old-browser-CSS-fiddles when getting around later. If anyone interested.
.
Edited January 8, 2021 by siria

[schwups]

Thanks, I tested with KM74Goanna. So far - very good!.

The edit/report Control/buttons are available.

In Detail:

userContent.css:

body.ipsApp {background-image: none !important; }
body.ipsApp {background-color: #AADD44 !important; }
body.ipsApp[data-pagecontroller="profile"] {background-color: yellowgreen !important; }
body.ipsApp[data-pagecontroller="profile"] div[data-controller="core.front.profile.body"]{display: block !important;}
/* postings list */
body.ipsApp[data-pagecontroller="profile"] section.ipsColumn{display: block !important;width: 800px !important; margin: 20px 80px;}
body.ipsApp[data-pagecontroller="profile"] li[class~="ipsStreamItem_contentBlock"] {background-color: #EEFFAA;}

fa-icons - prefs.js:

user_pref("font.name-list.sans-serif.x-unicode", "Arial, Symbola, FontAwesome, Segoe UI Emoji, OpenSansEmoji, Microsoft Sans Serif");
user_pref("font.name-list.sans-serif.x-western", "Arial, Symbola, FontAwesome, Segoe UI Emoji, OpenSansEmoji, Microsoft Sans Serif");
user_pref("font.name-list.serif.x-unicode", "Tahoma, Symbola, FontAwesome, Segoe UI Emoji, OpenSansEmoji, Arial");
user_pref("font.name-list.serif.x-western", "Tahoma, Symbola, FontAwesome, Segoe UI Emoji, OpenSansEmoji, Arial");

One remaining problem on this browser is, that the reply is missing and so I cannot open it either.
.

 

[siria]

Cannot find a way to reply to a post?

(unfinished info, not quite sure what you mean exactly, and haven't much investigated this yet...)

Only have noticed:
Usually I see a big Editor field at bottom, with a "Submit Reply" button.

PROB: this editor vanishes completely if the page is loaded with javascript
(but haven't risked yet to allow wide ALL js-levels, only first basic)
Fix => Block javascript and reload page. Big editor at bottom appears.

Or if javascript shall remain enabled:
- The usual all-purpose-brute-force workaround helps too, but lousy:
Kill all Page Styles (see post-1).
This will reveal (for me) a TINY editor field at bottom, only usable for copy-paste.
This field may probably be enlarged by a bit custom css too, but had no need yet.

And on top of this page I see a "Reply to this topic" link.
But clicking it only jumps down to the bottom-editor.

And below every posting there's a "Quote" link.
This never did anything for me anyway (luckily no urgent need yet)

[siria]

Topic pages are extremely narrow, only half-screen width?
And AUTHOR-fields are not LEFT of each post, but instead ABOVE it?
Or it looks mostly okay, but not always?
(FF2/3.x) Try this in your user css file:

/* TOPIC pages: AUTHOR block on left side. Color only if needed to cover weird ghost links */
body.ipsApp aside.ipsComment_author {display: table-cell !important;}
body.ipsApp aside.ipsComment_author {background-color: #DDFF99 !important;}

/* TOPIC pages: POSTING TEXT on right side, fix width e.g. 720px */
body.ipsApp article[id^="elComment_"] > div.ipsColumn_fluid {display: table-cell !important; }
body.ipsApp article[id^="elComment_"] div.ipsComment_content {width: 720px !important;}

/* Other ips-forums: Due to fix width above (720px), any RIGHT sidebars must be moved to BOTTOM */
body.ipsApp[data-pagecontroller="topic"] .ipsLayout_sidebarright {display: block !important;}

.
Edited January 13, 2021 by siria

[siria]

PAGE NUMBERS are aligned VERTICAL, wasting screen height?
Try this in your user css:

/* PAGE NUMBERS horizontal */
body.ipsApp [class~="ipsPagination"] {display: table-row !important; }
body.ipsApp [class^="ipsPagination_"] {display: table-cell !important; }
body.ipsApp [class^="ipsPagination_"]:hover {border: 1px solid blue !important; }
body.ipsApp .ipsPagination_active {background-color: peru !important; }

/* If PROFILE PICS extremely HUGE */
body.ipsApp a[href*="/profile/"].ipsUserPhoto img {max-width: 80px; max-height: 80px;}

/* If LIKE + UPVOTE buttons too BIG */
body.ipsApp img[src^="https://msfn.org/board/uploads/reactions/"]{
max-width: 30px !important; max-height: 30px !important;
}
body.ipsApp img[src^="https://msfn.org/board/uploads/reactions/"][height="20"]{
width: 20px !important; height: 20px !important;
}

Edited January 12, 2021 by siria

[siria]

Can't see what is quoted text and what own text?
Give QUOTES a color and border:

body.ipsApp div.cPost_contentWrap blockquote {
background-color: rgba(240,240,100,0.8) !important;
outline: 1px solid peru;
padding: 0px 8px;
}

Edited January 12, 2021 by siria

[siria]

FORUM LIST: hard to see where the PINNED postings end and normal ones begin?
Try adding this to your user css:

/* FORUM-List: Mark PINNED topics with a COLORED TITLE */
body.ipsApp i.fa-lock {padding: 4px 6px 0px ; background-color: orange;}

body.ipsApp h4 i.fa-thumb-tack {
margin-right: -600px !important;
border-right-width: 600px !important;
background-color: gold !important;
border-color: gold !important;
border-right-style: solid !important;
opacity: 0.6 !important;
padding-bottom: 12px !important;
}
body.ipsApp h4.ipsDataItem_title span a span {z-index: 99; position: relative;}

.
Edited January 12, 2021 by siria

[schwups]

19 minutes ago, siria said:

Cannot find a way to reply to a post?

(unfinished info, not quite sure what you mean exactly, and haven't much investigated this yet...)

Only have noticed:
Usually I see a big Editor field at bottom, with a "Submit Reply" button.

PROB: this editor vanishes completely if the page is loaded with javascript
(but haven't risked yet to allow wide ALL js-levels, only first basic)
Fix => Block javascript and reload page. Big editor at bottom appears.

Or if javascript shall remain enabled:
- The usual all-purpose-brute-force workaround helps too, but lousy:
Kill all Page Styles (see post-1).
This will reveal (for me) a TINY editor field at bottom, only usable for copy-paste.
This field may probably be enlarged by a bit custom css too, but had no need yet.

And on top of this page I see a "Reply to this topic" link.
But clicking it only jumps down to the bottom-editor.

And below every posting there's a "Quote" link.
This never did anything for me anyway (luckily no urgent need yet)

Yes, that's the problem. "Fix => Block javascript and reload page. Big editor at bottom appears."

Input is possible, but completely without the control panel.

[siria]

> Yes, that's the problem. "Fix => Block javascript and reload page. Big editor at bottom appears."

Sigh, wasted days now trying to get the editor better working in KM1.6+74 / FF3.5+24 (getting visible with JS, find any possibility to upload files, getting editor buttons), but ZERO CHANCE
Especially the complete inability to upload any attachments is the biggest prob, grrr

But that's a huge subject and adressed in other topics too. Would prefer to keep discussion elsewhere too, so that the "Tip Postings" here don't get too shattered ;-) Have just added a few more above again.

[siria]

(placeholder, edit later)