augmentation for "modern" forum look…

seth · 2021-04-10 19:34:57

Some Dou… dude complained that the bbs looks "outdated", so here's an augmentation to make the default design look "fashionable".

html, body {background:#fff !important;}
.pun {background:none !important;}
.punwrap {border:none !important;}
.infldset {padding-bottom:0px !important; padding-top:0px !important; border:none !important;}
.inbox > .pagepost {border:none !important;}
.inbox ul.crumbs li:last-child strong:last-child a {padding-left:0.5em !important; padding-right:0.5em !important; color:#1793D0 !important; background: #EBF1F5 !important; border-radius:0.25em !important; border: 1px solid #cad7e1 !important;}
.pun a:hover, #brdmain a:hover, a:hover {text-decoration:none !important; color:#1793D0 !important;}
#brdmain > div.blockpost {border-radius:4pt !important; margin-bottom:8pt !important;}
#brdmain {border:none !important;}
.pun div.quotebox {border-radius:4pt !important;}
.pun div.codebox {border-style:dashed !important; border-radius:4pt !important;}
.inbox tr.roweven {background:#F6F9FC !important;}
.pun .blocktable .box {border-radius:4pt !important; margin-bottom:4pt !important;}
div.blockpost > h2 {background:none !important; border:none !important;}
.pun .blockpost .postbody {border-top:1px solid #dfe6ee !important; border-radius: 4pt !important;}

.blockform > * {background:#F6F9FC !important; border-radius:4pt !important;}
.blockform {border:none !important;}
#quickpostform p.buttons, #edit p.buttons {padding-top:0px !important; padding-bottom:0px !important; position:relative !important; top:-24px !important; padding-right:36px !important; text-align:right !important; display:flex !important; flex-flow:row-reverse !important; margin-left:45em !important;}
#edit p.buttons {top:-84px !important;}
.pun .txtarea textarea {border-radius:4pt !important; border: 2px solid #dfe6ee !important}
.pun .txtarea textarea:focus {border: 2px solid #1793D0 !important; outline: none !important;}
select, input[type="submit"] { background: none !important; border: 1px solid #cad7e1 !important; border-radius:8pt !important; }
select {padding-left: 10px !important; appearance: none !important; border-right:4px solid #cad7e1 !important;}
input[name="submit"] { background: #cad7e1 !important; color:black !important; border-color: #1793D0 !important;}
input[type="submit"]:hover { background: #1793D0 !important; border-color: #1793D0 !important; color:#fff !important;}
select:hover {padding-left: 7px !important; border-left:4px solid #cad7e1 !important; background:#F6F9FC !important;}
select:focus, input[type="submit"]:focus { outline:none !important; color: black !important;}

.pun .icon {border-radius:6px !important;}

#archnavbar {border: none !important; margin:4pt !important; margin-bottom:0 !important; border-radius:8pt !important; box-shadow: 0 4px 6px #1793D0 !important;}

Could still require some cleanup and doesn't cover other pages (home/packages/…)

Screenshot
Also screenshot

Use "stylus" rather than "stylish" as the latter seems malware-ridden (google)

Last edited by seth (2021-04-11 07:18:08)

Awebb · 2021-04-10 19:43:55

It also doesn't play ball with Dark Reader, but I like your style.

seth · 2021-04-11 07:17:47

The problem w/ darkreader will be that stylus handles the css later (so dark reader darkifies stuff and then stylus steamrolls the above colors over it on some elements - which are the bright forum defaults)
You'd probably have to invert them, eg. "echo 'obase=16; ibase=16; FFFFFF-EBF1F5' | bc"

Visually, the changes are actually minor and trivial, mostly preserving the original look.
#1: Avoid boxes inside boxes. They indicate layers which, if inappropriate, make the layout unnecessarily complex.
#2: Avoid redundant visual separation. Pro-Tip: Typography actually adds structure, so if you've segments of different font sizes, you don't need to split them on top of that. (And the lack of that is imo the biggest VTE issue…)
#3: Apple sued because of the rounded corners… (it's more eye-pleasing. You don't need to have corners in a layout, but if you do, make them round-ish)
#4: If you have the page title on the page, make it somehow visible for orientation ;-)

Awebb · 2021-04-11 10:04:47

I find round corners always a bit weird, they look like a waste of space, but I agree that Boxes within boxes are probably the main cause of "old looks".

icar · 2021-04-11 10:08:43

seth don't you think there is too much space between the user (left) and the message (right)?

seth · 2021-04-11 13:10:48

I didn't acutally alter those metrics (also the rounded corners don't take additional space ;-) - mostly because it's hardcoded to 194px and idk why (ie. whether it could™ be smaller)
Right-aligning it isn't a good idea at all, center is somewhat ok, but I'd change more stuff (esp. moving the username below the avatar) but don't think that's possible w/o rewriting the DOM or some *really* ugly tricks on the margins.

div.postleft, div.postfootleft {text-align:center !important;}

For a complete re-design I'd also probably seek to go w/o any corners (rounded or otherwise) and to condense that left field (because for short posts, it just adds scroll distance)

Arch Linux

#1 2021-04-10 19:34:57

augmentation for "modern" forum look…

#2 2021-04-10 19:43:55

Re: augmentation for "modern" forum look…

#3 2021-04-11 07:17:47

Re: augmentation for "modern" forum look…

#4 2021-04-11 10:04:47

Re: augmentation for "modern" forum look…

#5 2021-04-11 10:08:43

Re: augmentation for "modern" forum look…

#6 2021-04-11 13:10:48

Re: augmentation for "modern" forum look…

Board footer