A COAT,U CAN TAKE IT OFF ANYTIME , BECAUSE IT’S JUST A PIECE OF CSS, ISN’T IT?
这是一件衣服,你可以随时穿上或者脱下来,因为它只是一段代码,很方便对吧!?
HOT TO INSTALLATION | 如何使用该风格
copy this code to your Appearance
>> Custom Header
or Custom Footer
复制这些片段的代码至你的后台管理中的外观
>>自定义页眉/页脚
why not Custom Styles
, because I CANNOT write it (“@media (xxx){xxx}”) here !!
为什么不放在自定义样式中,因为无法将@media写在其中
Demo Link: https://bbs.kuoxo.com/ | https://bbs.kuoxo.com/d/301-oxo-flarum-themes
Link: https://discuss.flarum.org/d/22245-oxo-flarum-themes-by-yannisme
UPDATING | 内容更新
Welcome to give me some inspiration or a bug, I will do it all day.
谢谢你能给我一些建议或者BUG,我会仔细check的!Great?😅
- Dec. 12, 2019 第一版发布
- Jan. 15, 2020 进行细节优化,更至第二版
[AINFO] 主题暂未适配边栏友情链接,后续会优化不同分辨率下的适配问题,包含手机端。
@media可以写在自定义样式里面了,会对其优化、整理,请耐心等待…[/AINFO]
CONTRIBUTING | 贡献
Flarum - Without you, nothing exist
没有你,就没有这个主题的存在
Yannisme - Just me 😀
这就是我 😀
SUGGESTIONS | 建议
Colors #b59e8c
, #444
颜色搭配,第一种作为突出显示颜色,第二种作为背景元素样式。
✅ Colored Header
✅ 勾选 彩色页眉
I suggest use the following fonts
同时,建议使用以下网页字体,有利于阅读和缓解视觉疲劳
1 2 3
| 1. font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 2. font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 3. font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
|
CONTENT | 主题代码内容
Dec. 12, 2019
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
| body { font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif; background:-moz-linear-gradient(to bottom,#f2f2f2,#ebebeb) } .Search-input:before { display:inline-block; font-size:inherit; text-rendering:auto; content:"\f002"; float:left; margin-right:-36px; width:36px; font-size:14px; text-align:center; position:relative; padding:7px 0; line-height:1.5; pointer-events:none; background:rgba(0,0,0,.11); color:#fff; border-radius:4px 0 0 4px } .Search-input input { float:left; width:225px; padding-left:50px; padding-right:32px; -webkit-transition:all .4s; -o-transition:all .4s; transition:all .4s; box-sizing:inherit!important } .Post-body table { box-shadow:0 -1px 5px -2px #515151!important } @media (min-width:768px) { .DiscussionListItem { position:relative; margin:0; padding:0; border-radius:5px; margin-top:18px; } .UserPage .sideNavOffset,.sideNav .Dropdown--select { display:block; background:#fff; padding:15px; padding-top:5px; padding-bottom:5px; box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; border-radius:6px } .DiscussionListItem-count { margin-top:5px } body { background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb); background-repeat:no-repeat } .IndexPage-results sideNavOffset .Post.CommentPost { background-color:#fff!important; border-radius:5px; margin-top:20px; -webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important } .Scrubber-handle { background-color:transparent!important } bbs.kuoxo.com { author:yannisme } .DiscussionHero .TagsLabel .TagLabel.colored { margin-right:5px; background:#fff!important; color:#667c99 } .DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text { color:inherit!important } .Hero { box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; background-color:#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 } .DiscussionHero .TagsLabel .TagLabel { color:#4d698e; font-size:18px!important } .App-header .Button,.App-header .Button:hover { color:#fff } .IndexPage-results .DiscussionListItem-content { padding-left:80px; padding-right:80px; padding-top:10px; border-radius:5px; padding-bottom:10px; background-color:#fff!important; -webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important } .UserPage .DiscussionListItem-content { padding-left:80px; padding-right:80px; padding-top:10px; padding-bottom:10px; background-color:#fff!important; border-bottom:1px solid #ebebeb } .UserPage .Hero h2 { color:#fff } .DiscussionPage .CommentPost { border-radius:5px; margin-top:20px; box-shadow:0 4px 30px 0 rgba(0,0,0,.1)!important; background:#fff } }
|
[ASUCCESS]Jan. 15, 2020 🌟 推荐 [/ASUCCESS]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196
| body { font-family:"Arial","Microsoft YaHei","黑体","宋体",sans-serif; background:-moz-linear-gradient(to bottom,#f2f2f2,#ebebeb); } .Search-input:before { display:inline-block; font-size:inherit; text-rendering:auto; content:"\f002"; float:left; margin-right:-36px; width:36px; font-size:14px; text-align:center; position:relative; padding:7px 0; line-height:1.5; pointer-events:none; background:rgba(0,0,0,0.11); color:#fff; border-radius:4px 0 0 4px; } .Search-input input { float:left; width:225px; padding-left:50px; padding-right:32px; -webkit-transition:all .4s; -o-transition:all .4s; transition:all .4s; box-sizing:inherit !important; } .Post-body table { box-shadow:0px -1px 5px -2px #515151!important; } @media (max-width:767px) { #yqlj { display:none; }} @media (min-width:768px) { body { background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb); background-repeat:no-repeat; } .DiscussionListItem { position:relative; margin:0; padding:0; border-radius:5px; margin-top:18px; } .IndexPage .DiscussionListItem-info>.item-tags { margin-right:0; position:absolute; left:80px; top:38px; max-width:150px; white-space:nowrap; overflow:inherit; transition:max-width .2s ease-in-out,-webkit-mask-image .2s; -webkit-mask-image:none; font-size:12px; } .IndexPage .DiscussionListItem-controls { right:32px; top:38px; } .IndexPage .DiscussionListItem-title { margin-right:155px; padding-bottom:30px; } .IndexPage .DiscussionListItem-author .Avatar { width:48px; height:48px; position:absolute; left:17px; border-radius:48px; top:20px; } .UserPage .DiscussionListItem-content { padding-left:80px; padding-right:80px; padding-top:10px; padding-bottom:10px; background-color:#fff!important; border-bottom:1px solid #ebebeb; } .IndexPage-results .DiscussionListItem-content { padding-left:80px; padding-right:80px; padding-top:0; border-radius:5px; background-color:#fff!important; -webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; } .sideNav .Dropdown--select,.UserPage .sideNavOffset { display:block; background:#fff; padding-left:15px; padding-right:15px; padding-top:5px; padding-bottom:5px; box-shadow:0 1px 5px 0 rgba(151,158,181,.28)!important; border-radius:6px; } .Scrubber-handle { background-color:transparent!important; } bbs.kuoxo.com { author:yannisme; } .DiscussionHero .TagsLabel .TagLabel.colored { margin-right:5px; background:#fff!important; color:#667c99; } .DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text { color:inherit!important; } .DiscussionHero .TagsLabel .TagLabel { color:#4d698e; font-size:18px!important; } .Hero { box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important; background-color:#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:#ffffff; } .UserPage .Hero h2 { color:#ffffff; } .Post-body { font-size:14px; line-height:1.7; position:relative; overflow:auto; overflow-wrap:break-word; border-radius:5px; margin-top:0; box-shadow:0 8px 9px 0 rgba(0,0,0,0.1) !important; background:#fff; padding:20px; min-height:80px; } .Post-body>*:first-child,.Post-preview>*:first-child { margin-top:0 !important; margin-bottom:0; } .Post-actions { margin-top:5px; } .Post-footer { margin-top:10px; margin-bottom:0; } .Post-header { margin-bottom:10px; color:#808080; } .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; }}
|
SCREENSHOTS | 效果截图
Dec. 12, 2019

Jan. 15, 2020

倘若你没有耐心和信任, 就请收起你所谓的喜欢和爱.!