Flarum Çin Topluluğu tarafından hazırlanmış bu temaya göz atmak isteyebilirsiniz. Flarum temelinde düz (flat) tasarım anlayışını benimsese de gradient tasarımlar günümüzde oldukça popüler. Bu bağlamda siz de Flarum’unuzda gradient öğeler kullanmak isteyebilirsiniz. Ben kendi Flarum sitemde kullandığımda görünüme artı katmıştı açıkçası.
Hazırlayanlar: Yannis, FlarumCN ve CodingNet
Kurulum
İlk olarak Flarum Yönetim Paneline gidin ve Görünüm > Özel Üstbilgi kısmına istediğiniz tema şablonunu yapıştırın.
Varsayılan renk düzeni:
<link rel="stylesheet" type="text/css" href="https://css.yannis.cn/flarumcn.css">
Canlı turuncu renk düzeni
<link rel="stylesheet" type="text/css" href="https://css.yannis.cn/flarumcn_orange.css">
Eğer Özel CSS seçeneği ile kurmak isterseniz;
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#4D698E} //@config-primary-color
::-webkit-scrollbar-track{background:#e8ecf3}
.App{overflow-x:visible!important}
.Avatar{border-radius:20%!important}
.App-header .Button.active,.App-header .Button.focus,.App-header .Button:active,.App-header .Button:focus,.App-header .Button:hover,.App-header .open>.Dropdown-toggle.Button,.ButtonGroup>.Dropdown-toggle:hover,.open>.Button.Dropdown-toggle{border-radius:10%!important}
.DiscussionList-loadMore .Button,.UserDirectoryList-loadMore .Button{background:#e0e0e0;color:#828282}
i.icon.fas.fa-check.Button-icon{color:#4D698E} //@config-primary-color
.TagDiscussionModal-form i.icon.fas.fa-check.Button-icon{color:#b8c3d2!important}
@media (min-width:769px){
body{background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);background-repeat:no-repeat;background:#ebebeb}
.IndexPage h3.DiscussionListItem-title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.DiscussionHero .TagsLabel .TagLabel{color:#4d698e;font-size:16px!important}
h3.DiscussionListItem-title{padding-bottom:3px}
.UserCard.Hero.UserHero{background:#7ca6e1!important}
.DiscussionListItem{margin-top:10px}
.DiscussionListItem-info{color:#888}
.EventPost-icon{text-align:center;margin-left:-19px;width:64px;font-size:22px}
.DiscussionListItem:hover{background:#f7f7f7}
.DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title{color:#1b2028}
.DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text{color:inherit!important;font-size:16px}
.Scrubber-handle{background-color:transparent!important}
.kuoxo{py:yannis!important}
.Hero{background:#fff!important;margin-bottom:15px}
.Hero h2{font-size:2em;font-weight:bolder;color:#191919}
.Hero-subtitle{color:#000;font-size:15px;margin:8px 0 0;line-height:1.5em}
.App-header .Button,.App-header .Button:hover{color:#fff}
.UserPage .Hero h2{color:#fff}
.Post-body{font-size:14px;line-height:1.7;position:relative;overflow:auto;overflow-wrap:break-word;border-radius:5px;margin-top:0;border:1px solid #d6d6d6;box-shadow:0 3px 9px 1px rgba(0,0,0,.1)!important;background:#fff;padding:20px;min-height:80px}
.Post-body pre{font-size:80%;border-radius:0;border-left-color:#959ea9;border-left-width:5px;border-left-style:solid}
.Post-body>:first-child,.Post-preview>:first-child{margin-top:0!important}
.Post-actions{margin-top:5px}
.Post-footer{margin-top:10px;margin-bottom:0}
.Post-header{margin-bottom:10px;color:grey}
.PostStream-item{border: 0!important}
.PostStream-timeGap{padding-top:0;padding-bottom:0}
.Select-caret{margin-left:5px}
.Post{padding-bottom:10px}
.PostStream-timeGap span{margin-top:-10px;position:absolute}
.UserPage .Post-body{box-shadow:none!important}
.tooltip.right{margin-left:-29px;margin-top:-18px;padding:0}
}.Post-body blockquote { color: #2c3e50; background-color: #f3f5f7; border-radius: 0; border: 0; border-left-color: #42b983; border-left-width: 5px; border-left-style: solid; padding: 0 15px; margin: 1rem 0; }
.new .NotificationsDropdown-unread{background:#fff;position:absolute;z-index:3}
#4D698E vurgu rengidir, #4D698E ise arkaplan rengi içindir.
Eğer Canlı turuncu seçeneğini kullanmak isterseniz aşağıdaki değişiklikleri uygulayın;
body{background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);background-repeat:no-repeat;background:#ebebeb}
.Hero{background:#fff!important;margin-bottom:15px}
Bu kodları bulun ve aşağıdakiler ile değiştirin:
body{background:#f6f6f6 url(https://css.yannis.cn/img/flarumcn_orange/new_bodybg.png) 10px fixed}
.Hero{background:#63584f0d!important;margin-bottom:15px}
Ve aşağıdaki kodu en alta ekleyin:
.App:before{background: linear-gradient(to right,#fb9b47,#f48663,#ee757a)}
@media (min-width:769px) {
.DiscussionPage-discussion{background:url(https://css.yannis.cn/img/flarumcn_orange/topright_bodybg.png) no-repeat right -275px}
.touch i.icon.fas.fa-check.Button-icon{color:#facfc0 !important}
}
FoF Gece Modu uzantısı ile birlikte kullanabilirsiniz:
body when (@config-dark-mode = true) {
a{border:none}
p{color:#fff}
h3.DiscussionListItem-title{color:#ab9681!important}
h2.DiscussionHero-title{color:#ad957e}
li.item-bestAnswerPost{background:0 0}
span.BestAnswer--User .username{color:#fff}
.PostStream-timeGap{padding:0 0 15px 0}
.PostStream-timeGap span{margin-top:-20px;border-bottom:2px solid #f38761}
.Hero-subtitle,body.dark h2.Hero-title{color:#93806c}
.Post-body{border:0;box-shadow:none!important;background:none}
}
Canlı turuncu temasının önizlemesini görüntülemek için Flarum Çin Topluluğunu ziyaret edin. Varsayılan için ise Flarum Pro'ya göz atın.
