Screenshots:
Demo:https://style.freeflarum.com/
Administration>Appearance>Custom Header
<div class="emptydiv">
<p></p>
</div>
<div class="pageinfo">
<div class="guestinfo">
<p>Welcome, guest</p>
<br>
<p>Please <b>sign up</b> or <b>log in</b></p>
</div>
<div class="navinfo">
<div class="headw">
<p>Welcome, </p>
<p id="welc"></p>
</div>
<p style="font-size:28px" id="posts"></p>
<p>Posts</p>
<p style="font-size:28px" id="diss"></p>
<p>Discussions</p>
<p style="font-size:28px" id="notifi"></p>
<p>Notifications</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
setInterval(function() {
if(window.location.href.indexOf("/d/") > -1){
$(".pageinfo").hide();
}
else{
$(".pageinfo").show();
}
}, 500);
document.addEventListener("DOMContentLoaded", function() {
if(app.session.user == undefined){
$(".navinfo").hide();
$(".guestinfo").show();
}
document.getElementById("posts").innerHTML = app.session.user.data.attributes.commentsCount;
document.getElementById("diss").innerHTML = app.session.user.data.attributes.discussionsCount;
document.getElementById("notifi").innerHTML = app.session.user.data.attributes.unreadNotificationsCount;
document.getElementById("welc").innerHTML = app.session.user.data.attributes.username;
});
</script>
<style>
.navinfo, .guestinfo{
display:inline-block;
width:100%;
height:300px;
text-align:center;
}
.navinfo>p{
margin-top:200px;
display:inline-block;
color:white;
font-size:18px;
margin-right:10px;
}
.navinfo>.headw>p, .guestinfo>p{
position:relative;
top:120px;
display:inline-block;
color:white;
font-size:18px;
}
.guestinfo{
display:none;
}
@media screen and (max-width:768px){
.navinfo, .guestinfo{
display:inline-block;
width:100%;
height:100px;
}
.navinfo>p, .navinfo>.headw>p, .guestinfo>p{
font-size:12px;
}
.navinfo>.headw>p, .guestinfo>p{
top:20px;
}
.navinfo>p{
margin-top:40px;
}
.guestinfo{
display:none;
}
.emptydiv{
width:100%;
height:1px;
}
</style>
Admin>Appearance>Custom Styles
body::-webkit-scrollbar {
width: 0.6em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: white;
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(#CC527A, #2a2d8c );
outline: 1px solid slategrey;
}
body{
background: linear-gradient(#2a2d8c, #CC527A);
}
@media screen and (min-width:768px){
.App-content{
max-width:1110px;
background:white;
margin:23px auto;
padding-bottom:15px;
min-height:630px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}
.App:before, .App-header{
max-width:1110px;
background:white;
margin:auto;
height:75px;
padding:20px;
border:none;
-webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
}
div#admin-navigation{
top:75px;
}
.DiscussionPage-list {
top: 75px;
}
.DiscussionPage-discussion {
padding-bottom: 20px;
}
.Scrubber-scrollbar{
min-height:285px;
}
.DiscussionListItem:hover {
background: linear-gradient(to right, transparent, pink);
}
}
Looking forward for feedback.
