# Pyx's Modern Theme **URL:** https://meta.discourse.org/t/pyxs-modern-theme/357665 **Category:** Theme **Created:** [March 17, 2025, 11:17pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665 "2025-03-17T23:17:47Z") **Posts on this page:** 20 **Page:** 1
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [March 17, 2025, 11:17pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/1 "2025-03-17T23:17:47Z")
| | | | | --- | --- | --- | | ℹ | **Summary** | Pyx’s Modern Theme is the [successor to darkpixlz’s Modern Theme](https://meta.discourse.org/t/darkpixlzs-modern-theme/232543/127). | | 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/darkpixlz/pyx-modern-theme) | | 🛠 | **Repository** | [GitHub - pyxfluff/moderntheme: Modern theme for Discourse. · GitHub](https://github.com/pyxfluff/moderntheme) | | ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | | ❤ | **Love this theme?** | Support my work and the theme with [Github Sponsors](https://github.com/sponsors/pyxfluff)! | Install this theme ![This image showcases a title screen for "Pyx's Modern Theme," a modern and unibody theme design. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/c/b/5/cb5a205bbfb12091d4c2fed75b60db6fcb6ad8e9.jpeg) Pyx’s Modern Theme is the successor to my old theme, [darkpixlz’s Modern Theme](https://meta.discourse.org/t/darkpixlzs-modern-theme/232543/127), which was a fork of the Air theme. It was roughly 2500 lines and had many issues, so I have rewritten it! ## Screenshots ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/4/424e5482a3eb7a9bdb06f7282b40591f73db1667.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/0/9/5/095a63bb906d94e80bbce7b9e11962ff925fcbb6.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/c/4/9/c4940faf329fce7f02f4c557d69cbf90a939ad0c.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/8/1/7/8175c5e029c039c339bb398260e0e97482e34034.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/6/4/2/642dd2ea2b8862ad009929ef57c95b96afb7c974.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/2/9/8/298184288e8acbc0bb32b1407f622f4b7c5dca76.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/e/2/e/e2ed44bde83b27c5ca0547ca228f92efcfb2315d.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/a/3/2/a3295f1d0016416501a821480a2b87007cc634f8.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/d/8/b/d8b21006a5457c3178518b1aedf16f134d3dbae1.jpeg) ## No Background Image style ![image](https://global.discourse-cdn.com/meta/original/4X/e/9/1/e91af9b83b7e0666d8c8e63fbb67ebc646d2bcdf.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/5/ce560ff6f9879c3a670d2a87917e9c2825b93eb9.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/b/6/4/b64f75d72050b214b51570bfecd286cdd681d535.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/9/a/3/9a33af9ede09c0db3b1db47fd5e5f1ff135ecb5b.png) ## 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. ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/e/1fe3732694bda86dd789b21592e1b019915a0f76.png) ![image](https://global.discourse-cdn.com/meta/original/4X/a/2/6/a266186be787c53e374542e383f33502ffecd65c.jpeg) 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! ---
### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas) #### Post date: [March 18, 2025, 2:29am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/2 "2025-03-18T02:29:17Z")
This post was flagged by the community and is temporarily hidden. ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [March 18, 2025, 2:32am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/3 "2025-03-18T02:32:32Z")
\ Yep, this was an oversight. I forgot components could add images like this. A fix has been pushed 👍 \ This is intended behavior, I guess it just looks kinda wrong if the banner is closed. I’ll see what I can do. ---
### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas) #### Post date: [March 18, 2025, 2:38am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/4 "2025-03-18T02:38:29Z")
![The image shows a user interface of a social media or messaging platform displaying a profile with various metrics and conversation records featuring animated characters. (由 AI 生成标题)](https://global.discourse-cdn.com/meta/original/4X/f/0/a/f0a7747c2f1ad5c8ca8a4d7688ab705b1eaf5fcb.jpeg) ![A digital interface displays an anime-style image of two girls, one feeding the other an apple, surrounded by UI elements and image captions in Chinese. (由 AI 生成标题)](https://global.discourse-cdn.com/meta/original/4X/5/8/8/5881f4943924e9e12c6e773f3f2fd0bcfd7c8bbb.jpeg) 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. ---
### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas) #### Post date: [March 18, 2025, 2:44am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/5 "2025-03-18T02:44:45Z")
> [@Discourse Advertising Plugin (Ads)](https://meta.discourse.org/t/discourse-advertising-plugin-ads/33734): > > discourse2Summary Discourse Advertising allows the set up of advertisements on Discourseopen_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately.warning 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 … \ I wonder if it’s possible to add an adaptive scale? I’d like to have a sidebar component on the right side. > **CSS** > > ```plaintext > /* 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 */ > } > } > > ``` \ > [@Right Sidebar Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067): > > discourse2Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/right-sidebar-blocks)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-right-sidebar-blocks](https://github.com/discourse/discourse-right-sidebar-blocks)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags … ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [March 18, 2025, 2:45am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/6 "2025-03-18T02:45:49Z")
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. ---
### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly) #### Post date: [March 18, 2025, 2:51am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/7 "2025-03-18T02:51:07Z")
Nicely done! 👏 🤩 :discourse: ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [March 23, 2025, 8:40pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/8 "2025-03-23T20:40:54Z")
Update pushed with many fixes and support for the category edit page and other admin areas! ![image](https://global.discourse-cdn.com/meta/original/4X/d/f/0/df0d2edc57e52a8a88b9a300a148e68288f723ab.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/b/6/9/b6912da1a3ce2e945815f457750e47e758703246.png) @Monikas your issue with side buttons should also be fixed now. ![image](https://global.discourse-cdn.com/meta/original/4X/6/4/e/64e10e351240bef11b559aee53a7eec234cbb76c.png) ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [March 29, 2025, 5:36am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/9 "2025-03-29T05:36:43Z")
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! ![image](https://global.discourse-cdn.com/meta/original/4X/c/1/1/c11f78c4cd1b95e7bceb46bb75979f2b579325d5.jpeg) ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [March 29, 2025, 5:39am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/10 "2025-03-29T05:39:04Z")
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. ---
### Author: ![joshhabka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshhabka/32/452328_2.png) [@joshhabka](https://meta.discourse.org/u/joshhabka) #### Post date: [April 17, 2025, 7:42pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/11 "2025-04-17T19:42:16Z")
Is there a way to have a layout like below: ![Screenshot 2025-04-17 at 3.41.43 PM](https://global.discourse-cdn.com/meta/original/4X/f/8/0/f803a87922918ced270948e055599e12f3e803ab.jpeg) With the nice rendering and stuff of this theme? Like can I have the leaderboard sidebar and stuff too(see below): ![Screenshot 2025-04-17 at 3.42.11 PM](https://global.discourse-cdn.com/meta/original/4X/a/5/f/a5f2e802cfadf25a2582b5cbd2e950100fca4437.jpeg) ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [April 17, 2025, 7:46pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/12 "2025-04-17T19:46:05Z")
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](https://meta.discourse.org/t/horizon-theme/360486): > > information_sourceSummary Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.eyeglassesPreview Try it out here on Meta or [Theme Creator](https://discourse.theme-creator.io/theme/system/horizon)hammer_and_wrenchRepository Horizon is part of Discourse core.questionInstall Guide There is no need to install Horizon, it is preinstalled as part of Discourse core.open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)Features Horizon offers a simpl… > [@FKB Pro - Social theme](https://meta.discourse.org/t/fkb-pro-social-theme/234323): > > FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly. rocketwarning This theme is quite sensitive and maybe not well compatible with other theme components or plugins you use! Please test it before use. These usually need some css modification. If you have any issue please report and will fix it. Layout On desktop: Three column layout. Sidebar ready On mobile: 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. ---
### Author: ![xin\_wang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xin_wang/32/498908_2.png) [@xin\_wang](https://meta.discourse.org/u/xin_wang) #### Post date: [April 19, 2025, 7:10am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/13 "2025-04-19T07:10:32Z")
so cool ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [May 15, 2025, 11:25pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/14 "2025-05-15T23:25:57Z")
Hi all, sorry for the lack of updates lately! I have just added support for the review queue and docker manager. ![image](https://global.discourse-cdn.com/meta/original/4X/d/3/9/d398efd6e040ff4035969848b3cbccec000f132b.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/e/f/c/efc4a4082a072921fc8326d4d138a1416e55ddaa.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/2/8/5/2850a8d7b65c9b6c76f99ee4f3b342223cd8dfe6.jpeg) ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [June 7, 2025, 6:46pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/15 "2025-06-07T18:46:21Z")
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.](https://bsky.app/profile/pyxfluff.dev/post/3lqnrmj5ozs2v) Mix that and [the week I’ve had with personal projects (documenting 4000 LOC frontend + backend is not easy)](https://github.com/pyxfluff) 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](https://github.com/pyxfluff/moderntheme) 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 ---
### Author: ![Den](https://avatars.discourse-cdn.com/v4/letter/d/ce7236/32.png) [@Den](https://meta.discourse.org/u/Den) #### Post date: [July 16, 2025, 5:48am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/16 "2025-07-16T05:48:51Z")
Brilliant work as always, thanks! ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [July 18, 2025, 5:42am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/17 "2025-07-18T05:42:13Z")
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. ---
### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz) #### Post date: [July 18, 2025, 6:32am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/18 "2025-07-18T06:32:59Z")
More good news! I just ended up [rewriting the theme again](https://github.com/pyxfluff/moderntheme/commit/efd622be2181775ec4b889914cb98c0d5238be57) so it is no longer one massive common.scss file. It shouldn’t look any different besides some minor fixes I made. Enjoy :3 ![image](https://global.discourse-cdn.com/meta/original/4X/1/1/5/115bdc2963834efe70e8024da6e9be540a23aad1.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/a/5/8/a587a75bb1e5b658a579fd202d1b0a50cc18793e.jpeg) ---
### Author: ![DevTeVe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/devteve/32/487601_2.png) [@DevTeVe](https://meta.discourse.org/u/DevTeVe) #### Post date: [November 1, 2025, 10:52am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/19 "2025-11-01T10:52:58Z")
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) ---
### Author: ![DevTeVe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/devteve/32/487601_2.png) [@DevTeVe](https://meta.discourse.org/u/DevTeVe) #### Post date: [November 1, 2025, 5:58pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/20 "2025-11-01T17:58:48Z")
@darkpixlz I’ve recorded a video because I realize that my feedback may be hard to understand 😃 [Next page](https://meta.discourse.org/t/pyxs-modern-theme/357665.md?page=2)