PureLand Flarum Theme

本来是想制作一份卡通的蓝天主题,
但是,需要和首页的blog相搭配起来,
就制作了这份比较注重阅读、交流与记录的主题,
取名为极乐净土,译为PureLand,多么希望,我们能一直纯洁童真!


HOT TO INSTALLATION | 如何使用该风格

copy this code to your Appearance >> Custom Styles
复制这些片段的代码至你的后台管理中的外观>>样式

Demo Link: https://bbs.kuoxo.com/ | https://bbs.kuoxo.com/d/337-pureland-flarum-theme
声明: 如果您对 !important 介意,请不要使用此主题,请自己码,谢谢!


UPDATING | 内容更新

Welcome to give me some inspiration or a bug, I will do it all day.
谢谢你能给我一些建议或者BUG,我会仔细check的!Great?😅

  • Apr. 8, 2020 第一版发布
    边栏右置,移除头像,注重阅读交流与记录
  • Apr. 9, 2020
    增加POST页面的小头像,增加辨别度
    修复了一些BUG
  • Apr. 10, 2020
    修复了讨论的CLASS Hero BUG
  • Apr. 17, 2020
    增加 引用美化效果 ,代码在OTHERS | 其他搭配
  • Apr. 19, 2020
    修复自适分辨率BUG,以及适配 reflar/level-ranks 等级插件

CONTRIBUTING | 贡献

Yannisme - Just me 😀
这就是我 😀


SUGGESTIONS | 建议

💡 可开启黑夜模式,但需要微调 board 颜色

Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements.
颜色搭配,第一种作为突出显示颜色,第二种作为背景元素样式。
Colors #444 , #222


CONTENT | 主题代码内容

Apr. 8, 2020 🌟

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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
.IndexPage .DiscussionListItem-info>.item-tags, .UserPage .DiscussionListItem-info>.item-tags{
position:inherit!important;
-webkit-mask-image: none!important;
padding-right:10px;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}

::-webkit-scrollbar-thumb {
background: @config-primary-color;
}

::-webkit-scrollbar-track {
background: #EDEDED;
}

.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: #0000000f;
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
}

body {
font-family: 'Microsoft YaHei',"Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.6;
}

@media (min-width: 1120px) {
.containerNarrow {
max-width: 100%;
}

.Post-header {
text-align: right;
border-bottom: 1px solid #ededed;
}

.PostUser-badges {
display: none;
}

.DiscussionPage-stream {
margin-left: -85px;
}

.Hero .container {
padding-top: 15px;
padding-bottom: 15px;
}

.PostUser-avatar {
vertical-align: middle;
position: relative;
left: -7px;
top: -2px;
width: 1.5em;
height: 1.5em;
font-size: 1em;
line-height: 1.5em;
}

.UserPage .Post {
padding-left: 18px;
}

.DiscussionListItem-author .Avatar,.IndexPage .DiscussionListItem-author .Avatar {
display: none;
}

.DiscussionListItem-badges {
width: 0;
}

.containerNarrow {
float: left;
text-align: left;
}

.DiscussionHero--colored, .DiscussionHero--colored a {
text-align: left;
}

.Post--BestAnswer {
text-align: center;
left: 0!important;
width: 25%;
z-index: 999;
}

.Post-body a {
border: 1px solid #e0e0e0 !important;
padding: 1px;
padding-top: 0;
}

.DiscussionListItem-badges {
margin-left: -42px;
margin-top: 20px;
}

.Badge, .Badge .Badge-icon {
vertical-align: middle;
}

.EventPost-icon {
margin-top: 2px;
margin-left: 0;
padding-right: 10px;
width: auto;
font-size: 1.5em;
}

.sideNav, .sideNav>ul {
width: 190px;
right: 0;
position: absolute;
}

.sideNavOffset {
max-width: 800px;
}

nav.IndexPage-nav.sideNav {
width: 190px;
margin-right: 0;
position: relative;
float: right;
}

.sideNavContainer {
display: block;
}

.TagsPage nav.IndexPage-nav.sideNav {
overflow: hidden;
margin-right: -99999px;
}

.TagsPage .sideNavOffset {
max-width: 1200px;
}

.Post a.inline-image-link {
margin-top: 15px;
}

.Post-likedBy {
position: absolute;
top: 17px;
}

.item-edited .ButtonGroup>.Button {
padding: 0;
}

.DiscussionHero-items {
text-align: left;
}
.PostUser-level {
float: right!important;
position: inherit!important;
margin: 0!important;
}
.PostUser-bar {
border-radius: .1px !important;
margin-top: 7px;
height: 6px !important;
top: 24px!important;
}

.PostUser-text {
position: absolute;
right: 55px;
top: 24px;
width: 77px;
font-size: 12px;
}

}

.topbutton i {
padding: 5px;
}

.topbutton a {
color: #fff;
text-decoration: unset;
}

.IndexPage-nav .item-newDiscussion .Button {
width: auto;
}

.Flagrow-Ads-fake-poststream-item {
border: 0!important;
}

.PostStream-item:not(:last-child) {
border: 0;
}


@media (max-width: 1024px) and (min-width: 768px) {
.sideNavOffset {
max-width: 700px;
}
nav.IndexPage-nav.sideNav {
width: 100%;
position: initial!important;
white-space: nowrap;
overflow: auto;
}

.Post-body, .TextEditor textarea, .ComposerBody-header h3, .ComposerBody-header h3 input, .ComposerBody-header h3 a {
font-size: 1rem;
}

.PostsUserPage-discussion a {
font-style: normal;
}

.item-bestAnswerPost .Post-header,.UserPage .Post-header {
border-bottom: 0;
}

SCREENSHOTS | 效果截图

image.png

image.png

image.png

image.png

image.png

image.png

image.png

OTHERS | 其他搭配:

欢迎横幅处添加小图标
1
2
3
4
5
6
<div class="topbutton">
<a href="#"><i class="icon fas fa-project-diagram Button-icon" style="color: rgb(255, 141, 70);"></i></a>
<a href="#"><i class="icon fas fa-wrench Button-icon" style="color: rgb(75, 147, 209);"></i></a>
<a href="https://kuoxo.com"><i class="icon fas fa-globe Button-icon" style="color: rgb(181, 158, 140);"></i></a>
<a href="#"><i class="icon fas fa-puzzle-piece Button-icon" style="color: rgb(253, 207, 88);"></i></a>
</div>
美化引用效果

image.png

后3个效果需配合 BBCODE 文本效果

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
.Post-body pre {
font-size: 12px;
padding: 0 10px;
border-left: 4px solid #929292;
border-radius: 0;
}
.Post-body blockquote {
background: #f7f7f7;
color: #444;
font-size: 14px;
padding: 10px;
border: 0;
border-left: 4px solid #46a4b2;
border-radius: 0;
}
.aaalert.aaerror .aainner,.aaalert.aasuccess .aainner,.aaalert.aainfo .aainner {
font-size: 14px;
text-align: left;
width: 80%;
margin-left: -8px;
padding: 5px 10px;
border: 0;
border-radius: 0;
}
.aaalert.aaerror .aainner {
border-left: 4px solid #ff5c5c!important;
}
.aaalert.aasuccess .aainner{
border-left: 4px solid #58a400!important;
}
.aaalert.aainfo .aainner{
border-left: 4px solid #569ff7!important;
}