Dear Flarum Team,
I hope you're well.
I’m writing to request your support regarding a critical UI need for a managed Flarum community we were gifted earlier this year. First of all, thank you once again for the opportunity—we truly appreciate it.
Over the past several weeks, I’ve made multiple attempts to replicate the Asirem theme styling using custom CSS. While we were able to achieve partial similarity, the limitations without access to the actual theme or its JavaScript logic have made it impossible to fully replicate the design—especially when it comes to mobile responsiveness and overall user experience.
The situation is now time-sensitive. Our sister forum, which uses the Asirem theme, has been performing quite well and has established a high visual benchmark. We're preparing for the official launch of this forum, but the current UI stands in stark contrast to the design and feel we want to maintain across our brand.
Without the Asirem theme, I’m afraid we simply cannot go forward with our scheduled launch, promotional campaigns, giveaways, and community-building activities. We've invested a lot of time preparing content and partnerships, and this forum holds great potential to be a vibrant startup platform for aviation enthusiasts and professionals.
I’m sharing our CSS attempt below for transparency and to show the genuine effort made on our side:
.TagTiles {
list-style-type: none;
padding: 20px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
box-sizing: border-box;
}
.TagTiles > li {
background: var(--tag-bg, #f0f4ff);
border-radius: 16px;
flex: 0 1 320px;
overflow: hidden;
transition: transform 0.2s ease;
box-sizing: border-box;
align-self: flex-start;
}
.TagTiles > li:hover {
transform: translateY(-5px);
}
.TagTile {
position: relative;
display: flex;
flex-direction: column;
padding: 20px;
color: #0f0f10;
box-sizing: border-box;
}
.TagTile.colored,
.TagTile.colored a {
color: var(--contrast-color, var(--body-bg));
}
.TagTile a {
text-decoration: none !important;
}
.TagTile-info {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
}
.TagTile-info .icon {
font-size: 32px;
margin-bottom: 10px;
display: block;
}
.TagTile-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
.TagTile-description {
font-size: 14px;
opacity: 0.8;
margin-bottom: 10px;
display: block;
}
.TagTile-description:empty {
display: none;
margin: 0;
padding: 0;
}
.TagTile-children {
font-weight: bold;
font-size: 13px;
margin-top: auto;
}
.TagTile-children a {
margin-right: 8px;
}
.TagTile-lastPostedDiscussion {
font-size: 13px;
color: #555;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 15px;
opacity: 0.7;
}
/* Responsive layout */
@media (max-width: 1000px) {
.TagTiles > li {
flex: 0 1 45%;
}
}
@media (max-width: 600px) {
.TagTiles {
padding: 16px; /* Add spacing around the grid on mobile */
}
.TagTiles > li {
flex: 0 1 100%;
}
.TagTile {
padding: 16px; /* Add internal padding for mobile */
}
}
That said, I humbly request if it would be possible for you to enable the Asirem theme for our managed community. It would mean a lot to us and allow us to launch this project with the polish and professionalism it deserves.
Looking forward to your kind support and guidance.
@luceos please if you guys can assist ? @huseyinfiliz what you think about my situation ? can i solve the problem with just using css ?
Warm regards,
