Paste inside Appearance -> Custom CSS
Make sure Dark Mode is enabled.
@media (min-width: 768px) {
body {
background-image: url('http://i.imgur.com/KkC2kU3.png');
background-repeat: repeat;
}
#flarum-loading {
font-size: 24px;
}
#header {
background-color: rgba(14, 14, 14, 0.7);
height: 65px;
max-width: 1100px; margin: auto auto;
margin-top: 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.Hero {
margin-top: 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.App-content {
border-top: none;
background-color: rgba(14, 14, 14, 0.7);
max-width: 1100px;
margin: 40px auto;
border-radius: 4px;
}
.App:before {
display: none;
}
.hasPane.panePinned .App-content, .hasPane.panePinned .App-footer {
margin-left: 30%;
}
.UserCard {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.containerNarrow {
}
.DiscussionHero-title {
}
.Button-label .username {
font-size: 16px;
}
.TagLabel {
font-size: 100%;
font-weight: normal;
}
.TagCloud {
padding-bottom: 20px;
}
.sideNav .Dropdown--select .Dropdown-menu > li > a {
padding: 8px 0 10px 65px;
}
.App-header .container {
padding-top: 12px;
}
.App-header .Header-navigation {
margin-top: 10px;
}
.Scrubber-handle {
background: none;
}
@media (max-height: 820px) {
.App {
padding-bottom: 0 !important;
}
}
.DiscussionPage-discussion > .container {
min-height: 520px;
padding-bottom: 20px;
}
.DiscussionPage-list {
top: 75px;
width: 370px;
border-top: none;
background-color: rgba(14, 14, 14, 0.7);
}
.ReplyPlaceholder {
margin-left: 5px;
margin-top: 25px;
padding-left: 150px;
font-size: 18px;
}
.Avatar {
}
#admin-navigation {
top: 85px;
border-radius: 4px;
}
}
.PostsUserPage-discussion a {
font-style: normal;
}
Preview:
Modified from: https://github.com/jsthon/flarum-custom-css-style
Todo:
Optimize for retina displays.
