DEMO: https://style.freeflarum.com/
Go to Administration>Basics>Welcome Banner and in second field paste following code:
<div class="cheader">
<div class="cheaderbox">
<div class="chimg">
<img src="https://images2.imgbox.com/09/af/rHFyhavx_o.jpg" alt="...">
</div>
<div class=chtext>
<a href="#">Text 1</a>
</div>
</div>
<div class="cheaderbox2">
<div class="chimg">
<img src="https://images2.imgbox.com/61/18/GoO8qkun_o.jpg" alt="...">
</div>
<div class=chtext>
<a href="#">Text 2</a>
</div>
</div>
<div class="cheaderbox3">
<div class="chimg">
<img src="https://images2.imgbox.com/3a/d1/PxasWdke_o.jpg" alt="...">
</div>
<div class=chtext>
<a href="#">Text 3</a>
</div>
</div>
<div class="cheaderbox4">
<div class="chimg">
<img src="https://images2.imgbox.com/81/87/84Iw6E4S_o.jpg" alt="...">
</div>
<div class=chtext>
<a href="#">Text 4</a>
</div>
</div>
</div>
<style>
.cheader{
margin:20px auto;
background-color: rgba(0, 0, 0, 0.5);
}
.cheaderbox,
.cheaderbox2,
.cheaderbox3,
.cheaderbox4{
display:inline-block;
margin-right:10px;
}
.chtext{
background-color: rgba(0, 0, 0, 0.8);
}
</style>
Go to Administration>Appearance and enable dark mode.
For colors themes used: RGB(219, 115, 0), RGB(0, 0, 0)
Administration>Appearance>Custom Header>Edit Custom Header
<body>
<div class="social">
<a href="#"><img class="social-img" src="https://images2.imgbox.com/7a/c8/T8CKLnh6_o.png" alt="..."></a>
<a href="#"<img class="social-img" src="https://images2.imgbox.com/9b/f2/hu3u6wO2_o.png" alt="..."></a>
<br>
<a href="#"><img class="social-img" src="https://images2.imgbox.com/83/d7/8pggBvK2_o.png" alt="..."></a>
<br>
<a href="#"><img class="social-img" src="https://images2.imgbox.com/2a/72/wOrX16cw_o.png" alt="..."></a>
<br>
<a href="#"><img class="social-img" src="https://images2.imgbox.com/df/5d/fEQ59AM9_o.png" alt="..."></a>
<br>
<a href="#"><img class="social-img" src="https://images2.imgbox.com/0d/01/s7PQG47g_o.png" alt="..."></a>
</div>
<style>
.social{
display:block;
float:right;
margin-top:17%;
}
.social-img{
margin-bottom:15px;
}
.social-img:hover{
opacity:0.7;
}
@media screen and (max-width: 768px) {
.social{
display:none;
}
}
</style>
</body>
Administration>Appearance>Custom Styles>Edit Custom CSS
body::-webkit-scrollbar {
width: 0.4em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #414142;
}
body::-webkit-scrollbar-thumb {
border-radius:20px;
background-color: darkorange;
outline: 1px solid slategrey;
}
body{
background: url("https://images2.imgbox.com/76/03/5HMvJqxG_o.png");
background-size:cover;
background-attachment:fixed;
background-position: center center;
background-repeat:no-repeat;
}
@media screen and (min-width: 768px) {
.App:before, .App-header{
background-color: black;
width:95px;
height:100vh;
}
}
.App-content{
margin:auto;
max-width:1200px;
border:1px solid darkorange;
background-color:rgba(0, 0, 0, 0.5);
}
.DiscussionPage-discussion > .container {
min-height: 700px;
}
.Scrubber-handle{
background:none;
}
.Hero{
background-color:black;
color:white !important;
border-top:1px solid darkorange;
}
.admin-navigation{
border-right:1px solid darkorange;
}
.Header-controls, .Header-controls>li{
display:block;
margin-bottom:20px;
}
.Header-secondary{
float:left;
margin-top:10vh;
margin-left:-20px;
position:absolute;
}
.Search-input input{
width:12px;
}
.Search.focused{
width:450px;
margin-right:-900px;
margin-left:0px;
}
.Header-title{
font-size:15px;
margin-left:-30px;
}
.Dropdown-menu--right{
left:20px;
}
Screenshots:
If someone need help with customization, changing links, adding or removing something, feel free to ask.
I hope that this will be helpful for someone and i would like to hear your thoughts about this style.
