Pood's KSP Forum layout style

[Poodmund]

Hi all,

I saw a screenshot the other day of the KSP Forum in its native form and wondered why it looked so weird and realised I've been using my custom layout for a while so thought I could put it on here if anyone wanted to follow along with the same style.

It basically uses uBlock Origin (or your favourite blocker tool) to stop certain elements from loading that I do not care about and also the Stylus extension to run custom CSS on the forum, clientside.

Main Forum Index page:

See side-by-side comparison with the default style here: https://codepen.io/Poodmund/full/wvERLPV

Sub-forum page:

See side-by-side comparison with the default style here: https://codepen.io/Poodmund/full/YzOdoeJ

Thread page:

See side-by-side comparison with the default style here: https://codepen.io/Poodmund/full/VwGqJXG

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

To get the forum looking like this do the following steps.

Step 1: Blacklist these elements in your favourite blocker tool (uBlock Origin pictured)

Copy and paste the text below into the 'My filters' tab section.

||kerbal-forum-uploads.s3.us-west-2.amazonaws.com/monthly_2019_08/1228518151_forumBanner(2).png.b410c330a049c24666ba9f6b09085a90.png$image
||kerbal-forum-uploads.s3.us-west-2.amazonaws.com/monthly_2019_08/1228518151_forumBanner(2).png.b410c330a049c24666ba9f6b09085a90.png$image
forum.kerbalspaceprogram.com##.ipsType_richText.ipsPad.ipsWidget_inner
forum.kerbalspaceprogram.com###ipsLayout_sidebar > .cWidgetContainer > .ipsList_reset
forum.kerbalspaceprogram.com##.ipsLayout_sidebarright
forum.kerbalspaceprogram.com###elNavSecondary_14 > [href="https://kerbal.curseforge.com/"]
forum.kerbalspaceprogram.com###elNavSecondary_18 > [href^="http://webchat.esper.net/"]
forum.kerbalspaceprogram.com##.ipsMargin_bottom.sm\:ipsPadding\:half.ipsPadding.ipsBox.ipsResponsive_pull.ipsPageHeader
forum.kerbalspaceprogram.com##header > .ipsResponsive_hidePhone.ipsClearfix
forum.kerbalspaceprogram.com##.ipsResponsive_hidePhone.ipsHr
forum.kerbalspaceprogram.com##.ipsClearfix.ipsPadding.ipsResponsive_pull.ipsBox.ipsPageHeader
forum.kerbalspaceprogram.com##.ipsType_center.ipsMessage_success.ipsAnnouncement.cAnnouncementContentTop > [href^="https://forum.kerbalspaceprogram.com/index.php"]
forum.kerbalspaceprogram.com##.ipsType_center.ipsMessage_success.ipsAnnouncement.cAnnouncementContentTop
forum.kerbalspaceprogram.com##.ipsMessage_success.ipsAnnouncement.ipsJS_hide.cAnnouncementPageTop > [href^="https://forum.kerbalspaceprogram.com/index.php"]
forum.kerbalspaceprogram.com##.ipsMessage_success.ipsAnnouncement.ipsJS_hide.cAnnouncementPageTop > [href="#"]
forum.kerbalspaceprogram.com##.ipsType_break.ipsFlex-flex\:11.ipsType_pageTitle
forum.kerbalspaceprogram.com##.ipsFlex-jc\:between.ipsFlex-ai\:center.ipsFlex.ipsHeaderButtons.cForumHeader.ipsMargin_bottom.ipsClearfix.ipsPageHeader

Step 2: Create a new site style in Stylus and add these CSS changes.

Copy and paste the text below into your style section (as shown above) and save.

@-moz-document domain("kerbalspaceprogram.com") {
    .cForumList .ipsDataItem_title {
        font-size: 17px;
    }
    .ipsDataItem_lastPoster {
        width: 40%;
        max-width: 40%;
        min-width: 550px;
    }
    .ipsDataItem_lastPoster .ipsTruncate_line,
    .ipsDataItem_lastPoster__title {
        max-width: 476px;
    }
    .ipsDataItem_lastPoster.ipsDataItem_withPhoto.ipsType_blendLinks {
        width: 20%;
        max-width: 20%;
        min-width: 250px;
    }
}

TADA!

Hope that helps anyone else that would prefer a different take on the KSP Forum layout.  

Edited March 25, 2023 by Poodmund

[Poodmund]

Updated uBlock Origin elements to get rid of some of the KSP2 marketing that's been added recently and updated the CSS to indicate the use of the extension Stylus (instead of Stylish) and to correctly shift the sub-forum lastPoster over to the right hand side of the table due to a skin update.

EDIT: Added side-by-side comparison links so you can easily see the difference.

Edited March 25, 2023 by Poodmund