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!
Supports the full admin interface and review panel
Supports almost every modern core feature (new topic map, new upgrade page, chat, …) and some plugins
Customizable background image
Adds a --user-bg-url property for your plugins to read a users background image on profiles
Compared to my old theme, way less LOC overall and easier for devices to render
Known issues
Nothing at the moment!
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.
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. I do not test nor verify mobile view at the moment, but support is planned.
Well, there seems to be a problem with not having any components installed, and then it seems to change the CSS of the images, causing a lot of them to become rectangles.
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 */
}
}
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.
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!
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.
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:
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.
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
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
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)
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 
, it has been fixed now. Everything should be normal again.
