Modern theme for Flarum

mekici · Aug 21, 2019

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.

DDeepGlue · Aug 21, 2019

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

mekici · Aug 21, 2019

DeepGlue Yes

DDeepGlue · Aug 21, 2019

mekici

Thanks for sharing this theme.

DDeepGlue · Aug 21, 2019

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

What exactly is this problem ?

mekici · Aug 21, 2019

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 · Aug 23, 2019

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 · Aug 23, 2019

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 · Aug 23, 2019

mekici is it full native app, or webview

mekici · Aug 23, 2019

AmaniJoseph an advanced webview

AmaniJoseph · Aug 23, 2019

mekici oky so how much is it

AmaniJoseph · Aug 23, 2019

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

mekici · Aug 23, 2019

AmaniJoseph contact me via discord: flarumtr#8240

mekici · Aug 23, 2019

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

SKevo · Aug 24, 2019

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.

DDeepGlue · Aug 30, 2019

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 · Aug 30, 2019

DeepGlue I updated the code

Ffindme · Sep 12, 2019

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

mekici · Sep 12, 2019

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 · Sep 12, 2019

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.