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
Topic map looks strange and unaligned
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.
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
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