Modern theme for Flarum

mekici

Aren't you tired of using the same flarum design as everyone else? Do not worry. Customizations are always possible for Flarum. You might like this modern design.

Demo

An explanation of what each of the following code works for is available on this link, but in Turkish. With Google translate, you can translate it into your own language and read it.

@media (max-width: 767px){
.App-content {
    background: #eff3f7;}}

@media (min-width: 767px) {.sideNav .Dropdown--select {
    background: #fff;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border:1px solid #f4f4f4;
    border-radius: 6px;
}}


@media (min-width: 767px) {body.dark .sideNav .Dropdown--select {background: transparent!important;  border:1px solid rgb(56, 68, 77) !important;}}


@media (min-width: 768px){
.sideNav, .sideNav>ul {
    width: 205px;
}}

body.dark .Post.CommentPost {background-color: transparent !important;}

.Post.CommentPost {background-color: #fff !important; border-radius: 8px; margin-top: 20px; border: 1px solid #f4f4f4;}


@media (max-width: 767px){
.DiscussionPage-nav {
    
    border-bottom: none;
}}


@media (min-width: 768px){.item-recipients{ margin-left: 10px;}}

@media (min-width: 768px){
.IndexPage .DiscussionListItem-info>.item-tags, .UserPage .DiscussionListItem-info>.item-tags {
    margin-right: 0;
    position: absolute;
    left: 80px;
    top: unset !important;
    max-width: 500px !important;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .2s ease-in-out,-webkit-mask-image .2s;
    
    font-size: 13px !important;
    bottom: 14px;

-webkit-mask-image: initial !important;

}}

@media (min-width: 768px){
.DiscussionListItem-author .Avatar {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    font-size: 20px;
    line-height: 40px;
}}




@media (min-width: 768px) {.DiscussionListItem-title {
    font-size: 17px;
    font-weight: 600;
}}


@media (min-width: 992px){.DiscussionListItem-count:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    content: "\f27a";
    float: left;
    margin-left: -21px;
    margin-top: 4px;
}}


@media (min-width: 768px) {
.DiscussionListItem-badges {
    margin-left: 0px;
    position: absolute;
    right: 40px;
}}


@media (min-width: 767px) {
.DiscussionListItem-info .item-excerpt {
    padding-bottom: 8px;
    margin-bottom: 15px;
    margin-right: -40px !important;
    display: block !important;
     border-bottom: 1px solid #f4f4f4;}}






@media (min-width: 768px){
.item-discussion-views {
    margin-right: -50px !important;
    
    float: left;
    margin-top: 68px;
    position: absolute;
    right: 100px;
    bottom: 13px;
    color: #667c99
}}

@media (min-width: 768px){
.DiscussionListItem-count {
    float: right;
    margin-top: 12px;
    text-decoration: none;
    position: absolute;
    right: 145px;
    bottom: 15px;
    padding-left: 0px !important;
    line-height: normal;
}}


@media (max-width: 767px) {
.DiscussionListItem-badges {
    margin-left: 0px;
    position: absolute;
    right: 10px;
}
.DiscussionListItem-info .item-excerpt {
    margin-right: -30px !important;
    white-space: normal !important;
    font-size: 14px !important;
    margin-left: -40px !important;
    line-height: 1.5em !important;
    margin-bottom: 25px !important;
    color: #3a3a3a !important;
    display: block !important;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 5px;
}

.DiscussionListItem-content {
    padding-left: 60px;
    padding-right: 50px;
    margin: 10px;
    margin-bottom:15px;
    border-radius: 6px;  
   
    background: #fff !important;
}
.DiscussionListItem-info>.item-tags {
    margin-right: 4px;
    opacity: 1;
    position: absolute;
    left: 20px;
    bottom: 12px;
    -webkit-mask-image: linear-gradient(to right, #000 140px, rgba(0,0,0,0) 150px);
}
.DiscussionListItem-title {
    margin-right: 0;
    font-weight: 600;
    
}
.DiscussionListItem-info {
    overflow: unset !important; 
    
}
.DiscussionListItem-count {
    background: transparent !important;
    font-size: 14px;
    position: absolute;
    bottom: 6px;
    right: 45px;
    
    
}
.DiscussionListItem-count:before {
    font-family: 'Font Awesome 5 Free';    
    display: inline-block;
    line-height: 1;
    content: "\f27a";
    float: left;
    margin-left: -21px;
    margin-top: 4px;

}

.DiscussionListItem-info> .item-recipients {
    margin-right: 40%;
    opacity: 1;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.item-discussion-views {
   font-size: 14px !important;
   bottom: 6px;
   left: 70%;
   position: absolute;
   color: #667c99;
   top: unset !important;
background: transparent !important;
}

.item-discussion-views:before {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-size: inherit;
    text-rendering: auto;
    content: '\f06e';
    float: left;
    margin-left: -21px;
    margin-top: 0;
    

}
.unread .DiscussionListItem-count {
    background: transparent !important;
    color: #E7672E;
       


}}

.DiscussionList-update {
    color: #fff !important;
    background: #e7672e !important;
  
}


@media (min-width: 768px){body.dark .DiscussionListItem-content { background-color: transparent !important;}}


@media (min-width: 768px){.DiscussionListItem-content {
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 10px;
    border-radius: 6px;
    padding-bottom: 20px;
    border: 1px solid #f4f4f4;
    background-color: #fff !important;
    
    }


.DiscussionListItem {
    position: relative;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    border-radius: 6px;
    margin-top:20px;}}

.unread .DiscussionListItem-title:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 16px;
    content: '\f06d';
    color: #cc3737;    
    margin-left: 6px;
}
.sideNav .Dropdown--select .Dropdown-menu>li>a {
    font-weight: 600;
}


.Hero h2 { font-size: 25px; font-weight: 700;}
.DiscussionHero-title {color: #282828 !important;}
.Hero { background-color: #fff !important; margin-bottom: 15px;}
.DiscussionHero .TagsLabel .TagLabel { color: #4D698E; font-size: 18px !important; }
.DiscussionHero .RecipientsLabel .RecipientLabel {color: #000;}
.Hero h2 {color: #282828;}
.Hero-subtitle {color: #000;}

.Scrubber-handle { background-color: transparent !important}
.Search-input input { border-radius: 30px; }
.Post-body { font-size: 16px; }
.DiscussionList-loadMore button { width: 75%; border-radius: 30px;margin-top: 30px;}
.sideNav .Dropdown--select .Dropdown-menu>.Dropdown-separator { border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

.DiscussionListItem-info .item-excerpt {color: #696969 !important; font-size: 14px !important;}
.PostStream-item:not(:last-child) {
    border-bottom: none;
}
  
.UserCard .Button,  {
    color: #667c99;
    background: rgba(0, 0, 0, 0.1);
}

.UserDirectoryList .UserCard--directory {
    
    background-color: transparent !important;
    border: 1px solid  #f4f4f4;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 6px #f7f9f9 !important;
   -webkit-box-shadow: 0 2px 6px #f7f9f9 !important;
    border-radius: 6px !important;
}

.darkenBackground {
    background: #fff;
    border-radius: 6px !important;
}
.UserCard, .UserCard a {
    color: #40444a;
}

@media (min-width: 767px) {

.TagTiles>li {
    width: 18% !important;
    margin-right: 20px !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
    height: 280px !important;
    
}

.TagTile, .TagTile a {
    color: #323f50 !important;
}


.TagsPage-content .TagTiles>li.TagTile {
    
    background-color: #fff !important;
    color: #000;

}
.TagTile.colored .TagTile-description {
    color: #667c99 !important;
}
.TagTile-name {
       color: #e7672e;
}
}
.IndexPage .DiscussionListItem-title, .UserPage .DiscussionListItem-title {margin-right: 10px !important;}

.DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title { font-weight: 600;}
.DiscussionList:not(.DiscussionList--searchResults) .unread .DiscussionListItem-title {font-weight: 600; color: #E7672E;}


// Unlogged users alert message
body.dark .CantSeePastFirstPost {
background: #1b2028;
color: #6c7d93;
}
body.dark .Hero {
    background: #15202B!important;
}

body.dark .Hero-title {
    color: rgb(255, 255, 255);
}

body.dark .App-content {
    background: #15202B !important;
}

body.dark .App:before {
    background-color: #15202B !important;
}

body.dark .Search .FormControl {
    background-color: #15202B !important;
}

body.dark .FormControl {
    color: #15202B !important;
}

body.dark .Search .FormControl {
    background-color: #253341 !important;
}

/* Dim Button Group */
body.dark .IndexPage-toolbar .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .item-subscription .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .item-share-social .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .Navigation .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .Post-controls .Button {
    background: #21303D !important;
    color: rgb(136, 153, 166) !important;
}

body.dark .Post-actions .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-controls .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-subscription .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-session .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-sort .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-fof-upload .Button {
    background: #21303D !important;
}

body.dark .item-preview .Button {
    background: #21303D !important;
}

body.dark .item-changePassword .Button {
    background: #21303D !important;
}

body.dark .item-changeEmail .Button {
    background: #21303D !important;
}

body.dark .DiscussionListItem-controls .Button {
    background: #21303D !important;
}

body.dark .item-notifications .Dropdown-menu {
    background: #21303D !important;
}

body.dark .item-flags .Dropdown-menu {
    background: #21303D !important;
}

body.dark .DiscussionListItem-controls .Dropdown-menu {
    background: #21303D !important;
}

body.dark .App-primaryControl .Dropdown-menu {
    background: #21303D !important;
}

body.dark .Modal-header {
    background: #21303D !important;
}

body.dark .Modal-body {
    background-color: #15202B !important;
}

body.dark .Modal-footer {
    background-color: #21303D !important;
}

body.dark .containerNarrow {
    color: rgb(136, 153, 166) !important;
}

body.dark .sideNav .Dropdown--select .Dropdown-menu>.Dropdown-separator {
    box-shadow: 0 1px 0px 0 rgb(56, 68, 77) !important;
}

body.dark .DiscussionListItem-content {
    border: 1px solid rgb(56, 68, 77) !important;
}

body.dark .DiscussionListItem-info .item-excerpt {
    color: #aaa !important;
}

body.dark .DiscussionListItem-info .item-excerpt {
    border-bottom: 1px solid rgb(56, 68, 77) !important;
}

body.dark .DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title {
    color: #ffff !important;
}

body.dark .Dropdown-menu {
    background: transparent !important;
}

body.dark .Scrubber-handle {
    background: transparent !important;
}

body.dark .Post.CommentPost {
    border: 1px solid rgb(56, 68, 77) !important;
}

body.dark .ReplyPlaceholder {
    border: 1px dashed #aaa !important;
}

body.dark {
    background: #15202B !important;
}

body.dark .DiscussionHero-title {
    color: #fff !important;
}

body.dark .Header-secondary .Button {
    color: rgb(136, 153, 166) !important;
}

body.dark .Button-label .username {
    color: #fff !important;
}

body.dark .Hero {
    box-shadow: 0 1px 0px 0 rgb(56, 68, 77) !important;
}

body.dark .darkenBackground {
    background: #15202B !important;
}

body.dark .UserBio {
    color: #aaa;
}

body.dark .username {
    color: #aaa;
}

body.dark .Button--primary {
    color: #fff !important;
}

body.dark .Composer {
    background: #21303D !important;
}

body.dark .FormControl {
    background-color: #21303D !important;
    color: #aaa !important;
}

body.dark .FormControl:focus, body.dark .FormControl.focus {
    background-color: #21303D !important;
}

body.dark .DiscussionListItem:hover {
    background: #21303D !important;
}

body.dark .UserCard-lastSeen {
    color: #aaa !important;
}

body.dark .item-joined {
    color: #aaa !important;
}

body.dark .NotificationGrid {
    background: #21303D !important;
    color: #aaa !important;
}

body.dark .App-backControl .Button:hover, body.dark .Button:focus, body.dark .Button.focus {
    background-color: transparent !important;
}

body.dark .App-navigation .Navigation .Button {
    background-color: transparent !important;
}

body.dark .App-titleControl .Button {
    color: #aaa!important;
}

body.dark .Slidable .Slidable-underneath {
    background: #21303D !important;
}


body.dark .DiscussionList-loadMore .Button {
    background: #21303D !important;
}

body.dark .DiscussionListItem {
    background: #15202B !important;
}

body.dark .DiscussionListItem.active {
    backgorund: #21303D !important;
}

body.dark .DiscussionPage-list {
    border: 1px solid rgb(56, 68, 77) !important;
    background: #15202B !important;
}

body.dark .App-drawer {
    background: #21303D !important;
}

body.dark #header-secondary>ul>li.item-signUp>button[title=Kaydol] {
    color: #fff !important;
}

body.dark #header-secondary > ul > li.item-logIn > button[title="Giriş Yap"] {
    color: rgb(255, 255, 255) !important;
}

body.dark .TagLabel.colored .TagLabel-text {
    color: none !important;
}

body.dark .DiscussionHero .TagsLabel .TagLabel.colored {
    background: #21303D !important;
}

body.dark .Search-results {
    background: #21303D !important;
}

body.dark .TagCategory.SubCategory .TagCategory-content {
    background-color: #21303D !important;
}

body.dark .Hero-subtitle {color: #8899a6;}

body.dark .TagsPage-content .TagTiles>li.TagTile {
    
    background: transparent !important;
    border: 1px solid rgb(56, 68, 77) !important;
    color: #fff !important;
    box-shadow: 0 1px 10px 0 #15202b! important;}

body.dark .TagTile, .TagTile a {
    color: #939fae !important;
}

body.dark .UserDirectoryList .UserCard--directory {
    box-shadow: 0 1px 10px 0 #15202b! important;
    border: 1px solid rgb(56, 68, 77) !important;}

@media (max-width: 767px) {body.dark  .DiscussionListItem-content{

   border: 1px solid rgb(56, 68, 77) !important;
   background-color: transparent !important;
box-shadow: 0 1px 10px 0 #15202b! important;
    
}}

.social-settings>.fa-cog { border-left: 1px solid #1b2028 !important;}
.Badge--social { color:#4d698e !important;}

.item-like .Button:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 15px;
	content: '\f164';
	margin-right: 8px;
	vertical-align: -1px;
}
.item-reply .Button--link:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 15px;
	content: '\f3e5';
	margin-right: 8px;
	vertical-align: -1px;
}

@media (min-width: 768px){
.item-terminalPost {
    bottom: 16px !important;
    right: 190px !important;
    position: absolute !important;
}}
@media (max-width: 768px){ .Post--BestAnswer .BestAnswer--User{display: none !important}}


body {background:  #f7f9f9}
.Scrubber-handle{background: transparent !important;}

The above code will resolve the unread issue of the updated discussion topics while in night mode.

DeepGlue

mekici The above code will resolve the unread issue of the updated discussion topics while in night mode.

What exactly is this problem ?

findme

mekici Hello! Unfortunately, I do not see discussions like yours. I paste the code into - "Edit Custom CSS", but I get what is in the screenshot 🙁 https://i.ibb.co/j3btF4t/2019-09-12-15-05-34.png

espectrunk

mekici Hi! Thnx a lot of this incredible CSS. Do u have the same version but with the details fixed for Dark mode theme?

peopleinside

mekici Hi, thanks for the theme.
I like it but there is a small issue on mobile view.

Elements are cut near the label. Text risposto is showed badly.
photo-2020-06-12-12-12-15.jpg

Another small issue is when user goes on his avatar for edit profile picture image.
The pencil icon is dark and is very low visible. Should be white... but i understand why is black because theme is white so if this is white also the sentence on the white screen will be white so will be not visible. Not a big issue so if the pencil is dark... don't know if can be improved.

This can be solved with:

.icon.fas.fa-pencil-alt {
	color: Gray;
}

DeepGlue

This code goes into the CSS section in the administration part ?

mekici

DeepGlue Yes

DeepGlue

mekici

Thanks for sharing this theme.

mekici

DeepGlue If you use the reflar night mode plugin, it is not readable because a color is black when a title is updated. it makes the updated discussion title of the code orange color.

AmaniJoseph

Thank you very much for this, I really like it.. can you share your android and iOS source code, if ts not too much to ask i mean this https://play.google.com/store/apps/details?id=com.flarumtr.app&hl=en its the best I have seen.

mekici

AmaniJoseph Unfortunately, I can't share the source code. But for a small fee I can do the application for you. In the meantime I will update the application soon.

AmaniJoseph

mekici is it full native app, or webview

mekici

AmaniJoseph an advanced webview

AmaniJoseph

mekici oky so how much is it

mekici

AmaniJoseph contact me via discord: flarumtr#8240

AmaniJoseph

And in your theme how can you make a boxed layout like this

mekici

AmaniJoseph I don't know exactly what you mean by the box layout.

SKevo

mekici I think that by "boxed layout" he means the sections.

On the image, first section is Introduction, second one is Features, where there are 3 reasons why to choose the theme shown in the image and last section is Recent Work.

It could be possible by playing with width CSS attribute a little.

DeepGlue

The theme is great. But I don’t seem to get the discussion headings in black or bold on the front page. I see that flarumtr front page has the discussion headings in black or bold though so what is missing in the code.

mekici

DeepGlue I updated the code

mekici

findme ahh yes I decided to have a special look for my own site. Therefore, the above codes do not provide a flarumtr appearance.

mekici

findme

@media (min-width: 768px){.DiscussionListItem-content {
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 10px;
    border-radius: 8px;
    padding-bottom: 10px;
    border:1px solid #dbdfe6!important;
    -webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important;
    box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important;

    }
.IndexPage .DiscussionListItem-info>.item-tags, .UserPage .DiscussionListItem-info>.item-tags {
top: 23px !important;}

.DiscussionListItem {
    position: relative;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    border-radius: 8px;
    margin-top:15px;}}

In addition to the above codes, the following codes will provide customization for the home page.

findme

mekici
Damn Great, thank you very much!