Pyx's Modern Theme

[darkpixlz (Pyx)]

	Summary	Pyx’s Modern Theme is the successor to darkpixlz’s Modern Theme.
	Preview	Theme Creator
	Repository	GitHub - pyxfluff/moderntheme: Modern theme for Discourse. · GitHub
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes
	Love this theme?	Support my work and the theme with Github Sponsors!

Install this theme

Pyx’s Modern Theme is the successor to my old theme, darkpixlz’s Modern Theme, which was a fork of the Air theme. It was roughly 2500 lines and had many issues, so I have rewritten it!

Screenshots

No Background Image style

Features

• Modern unibody design, with or without a background image
• Supports the full Discourse core and many plugins
• Supports every modern core feature
• Customizable background image
• Adds a --user-bg-url property for your plugins to read a users background image on profiles
• Many settings and choices

Plugins

I aim to support most core plugins. See below for a not exhaustive bunch of plugin screenshots.

All contributions on the repository are more than welcome and will (probably) be reviewed same-day. Comments or ideas? Drop a reply here. Issues? Make a GitHub issue please, they are easier to keep track of.

Please note that I test all of my styles for Firefox and Firefox only; if Chromium is acting up, please don't hesitate to file a report. Mobile is checked every few updates and should be generally supported.

That’s it for now - enjoy the theme!

[darkpixlz (Pyx)]

<image redacted>

Yep, this was an oversight. I forgot components could add images like this. A fix has been pushed

<image redacted>

This is intended behavior, I guess it just looks kinda wrong if the banner is closed. I’ll see what I can do.

[Monikas (JustMonika)]

I tried a different image and it seemed to be a bit of a problem, but the problem with making the image an oval did go away.

[Monikas (JustMonika)]

Discourse Advertising Plugin (Ads)

Summary Discourse Advertising allows the set up of advertisements on Discourse Install Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately. AD-BLOCKERS If you are running an ad-blocker in your browser or through a vpn, the contents of your /admin/plugins page may be blanked out. Disabling your adblocker, using an incognito tab, or whitelisting your site should prevent this issue. Features …

<redacted>

I wonder if it’s possible to add an adaptive scale? I’d like to have a sidebar component on the right side.

CSS

/* Get the user's avatar width and set the maximum width of the ad container */

/* Ad container styles */
#list-area {
    display: flex;            /* Arrange ads using flexbox */
    flex-direction: column;   /* Display ads vertically */
    gap: 0;                   /* Remove spacing between ad images */
    padding: 0;               /* Remove container padding */
    margin: 0;                /* Ensure no extra margin around the ad container */
    max-width: 812px;         /* Limit the ad container width to a maximum of 812px (avatar width: 48px) */
}

/* Ad link styles */
.banner-ad {
    display: block;           /* Make the ad container a block element */
    width: 100%;              /* Ensure the ad container occupies 100% width */
    max-width: 100%;          /* Prevent exceeding the maximum width */
    margin: 0;                /* Remove spacing between ad containers */
}

/* Responsive ad image styles */
.ad-image {
    width: 100%;              /* Ensure the image occupies the full width of its parent */
    height: auto;             /* Maintain the original aspect ratio of the image */
    max-width: 100%;          /* Prevent the image from exceeding its container's max width */
    display: block;           /* Fix the empty space issue at the bottom of images */
    margin: 0;                /* Remove any additional space around the image */
}

/* Responsive Design: Adjust ad display for large and small screens */

/* Adjust ad display on devices with a width less than 768px */
@media (max-width: 768px) {
    #list-area {
        padding: 0;            /* Ensure no extra padding on mobile devices */
    }

    .banner-ad {
        width: 100%;           /* Ensure the ad occupies the full width on small screens */
    }

    .ad-image {
        width: 100%;           /* Ensure the image adapts to the container width */
        height: auto;          /* Maintain the image's aspect ratio */
    }
}

/* Further adjust ad images on very small devices (e.g., phones in portrait mode) */
@media (max-width: 480px) {
    .ad-image {
        width: 100%;             /* Ensure images adapt to the phone's screen width */
        max-width: 100%;         /* Set the maximum width to 100% to avoid oversizing */
        height: auto;            /* Maintain the image's aspect ratio */
    }
}

<redacted>

Right Sidebar Blocks

Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-right-sidebar-blocks New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …

[darkpixlz (Pyx)]

I’ll check on the side component thing tomorrow. No promises on advertising because I cannot test that but for general scaling I should be able to fix that.

[Lilly (Lillian)]

Nicely done!

[darkpixlz (Pyx)]

Update pushed with many fixes and support for the category edit page and other admin areas!

@Monikas your issue with side buttons should also be fixed now.

[darkpixlz (Pyx)]

Sorry, I was sick a lot of this week, have also had other things to be doing. Just polished the post stream up, fixed many bugs, and made the composer float!

[darkpixlz (Pyx)]

Also, I noticed that the theme page got reverted to the old version which has summoned a lot of issues. I’m not going to make an effort to fix anything there because I feel like it will be re-added and it will look like intended.

[joshhabka (Josh U)]

Is there a way to have a layout like below:

With the nice rendering and stuff of this theme? Like can I have the leaderboard sidebar and stuff too(see below):

[darkpixlz (Pyx)]

Unfortunately that’s a little out of scope for this theme because it’s intentionally unibody so I would not adopt a layout where the sidebar is detached. If you’re looking for a design like that I’d recommend these two amazing themes:

Horizon Theme

Summary Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites. Preview Try it out here on Meta or Theme Creator Repository Horizon is part of Discourse core. Install Guide There is no need to install Horizon, it is preinstalled as part of Discourse core. New to Discourse Themes? Beginner’s guide to using Discourse Themes Features Horizon offers a simpl…

FKB Pro - Social theme

Preview Theme Creator Repository FKB Pro theme Found it useful? > ./support --coffee Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly. This theme is quite sensitive and maybe not well compatible with other theme components o…

However if the header banner is something you’d like to see supported feel free to give me a site URL and I’ll check out the possibility of supporting it.

[xin_wang]

so cool

[darkpixlz (Pyx)]

Hi all, sorry for the lack of updates lately! I have just added support for the review queue and docker manager.

[darkpixlz (Pyx)]

Hi guys,

Sorry for the slow update, I requested the title to be changed last week and never really followed up. I went to sync the theme on my local site, but I learned about some port conflicts, 8 hours later I have my entire homelab migrated to Proxmox. Mix that and the week I’ve had with personal projects (documenting 4000 LOC frontend + backend is not easy) and you don’t get a lot of spare time

tl;dr: The theme is now out of the “preview” stage! I’m confident enough it’ll work for most everybody’s sites and be styled ok. With this new stage, I am no longer looking for bug reports here, please file GitHub issues going forward.

Please keep the feedback coming - any and all is welcome. Thank you for your continued support even if I may be slow :3

[Den]

Brilliant work as always, thanks!

[darkpixlz (Pyx)]

Hi guys,

Sorry about the deprecation warning at the top of your sites for a few days , it has been fixed now. Everything should be normal again.

[darkpixlz (Pyx)]

More good news! I just ended up rewriting the theme again so it is no longer one massive common.scss file. It shouldn’t look any different besides some minor fixes I made. Enjoy :3

[DevTeVe (DevTek Ve)]

Really liked the theme, but there’s some “artifacts” that unfortunately prevents me from using it

• The “Profile” page has little button behind the header that says “skip to content”
• When I try to select a different color palette (as user, on my profile) the dropdown selection shows close to the “skip to content” button i mentioned above (that’s how I realized it was there)

[DevTeVe (DevTek Ve)]

@darkpixlz I’ve recorded a video because I realize that my feedback may be hard to understand

[darkpixlz (Pyx)]

Hey - thanks for the report. I just fixed the profile “Skip to content” error and it should be better now!

In regards to the dropdown I found the line that was blocking it but when I remove it, it looks like this, so I figured it wasn’t worth it to “fix”.