Clean & Modern style

Razor

DEMO: https://style2.freeflarum.com/
Screenshots:

Administration>Appearance>Edit custom CSS
Paste following code:

div#admin-navigation::-webkit-scrollbar {
width: 0.5em;
}
div#admin-navigation::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #1D2731;
}
 
div#admin-navigation::-webkit-scrollbar-thumb {
border-radius:10px;
background-color: white;
outline: 1px solid slategrey;
}


body::-webkit-scrollbar {
width: 0.5em;
}
 
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: white;
}
 
body::-webkit-scrollbar-thumb {
border-radius:10px;
background-color: #1D2731;
outline: 1px solid slategrey;
}

@media screen and (min-width: 768px) {
.IndexPage{
margin-left:-200px;
}
header.Hero.TagHero.TagHero--colored {
position: relative;
left: 135px;
}
}
@media screen and (min-width: 768px) and (max-width: 1030px) {
.App-content{
margin-left:210px;
margin-top:-51px;
border:none;
}
.App-header{
width:210px;
height:100vh;
z-index:10;
background-color:#1D2731;
}
.App:before{
display:none;
}
header.Hero.TagHero.TagHero--colored {
left: 0px;
}
}
@media screen and (min-width: 1031px) {
.App-content{
margin-left:200px;
margin-top:-45px;
border:none;
}
}

@media screen and (min-width: 1030px) {
.App-header{
width:250px;
height:100vh;
z-index:10;
background-color:#1D2731;
}
.App:before{
display:none;
}
}
.Hero{
max-width:1100px;
margin:0 auto;
}
@media screen and (min-width: 767px) {
.Header-controls, .Header-controls>li{
display:block;
margin-bottom:20px;
}
.Header-secondary{
float:left;
margin-top:80px;
margin-left:-20px;
position:absolute;
}
.Search-input input{
width:190px;
}
.Search.focused input, .Search.focused{
width:200px;
}

.Search.focused{
width:450px;
margin-right:-900px;
margin-left:0px;
}
}
header.Hero.WelcomeHero{
display:none;
}
@media screen and (min-width: 768px) {
nav.IndexPage-nav.sideNav, nav.sideNav.UserPage-nav {
position:fixed;
z-index:50;
left:10px;
top:305px;
white-space:normal;
}
}
.DiscussionListItem{
border-bottom:1px solid lightgray;
border-radius:0px;
}
.Dropdown-menu--right{
left:180px;
margin-top:-145px;
}

a#home-link{
color:white;
}

.Header-title{
margin-left:20px;
}
.sideNavOffset.UserPage-content{
margin-left:50px;
}

div#admin-navigation{
margin-top:-52px;
border:none;
background-color:#1D2731;
}
@media screen and (min-width: 1030px){
div#admin-navigation{
margin-left:10px;
}
}
@media screen and (min-width: 768px) and (max-width:992px){
.IndexPage{
margin-left:auto;
margin-top:auto;
}
.DiscussionListItem{
max-width:550px;
}
nav.IndexPage-nav.sideNav, nav.sideNav.UserPage-nav {
position:relative;
max-width:500px;
white-space:nowrap;
top:0px;
}
div#admin-navigation{
background-color:white;
margin-left:0px;
margin-top:auto;
max-width:520px;
}
.TagTiles>li, .TagCloud{
max-width:490px;
}
}
@media screen and (min-width: 768px) and (max-width:1025px){
.TagTiles>li{
width:100%;
}
}
@media screen and (min-width: 1000px) and (max-width:1025px){
.TagTiles>li, .TagCloud{
max-width:745px;
}
}
@media screen and (min-width: 1000px) and (max-width:1400px){
nav.IndexPage-nav.sideNav{
top:290px;
}
}
@media screen and (min-width: 1200px) and (max-width:1400px){
.TagTiles{
margin-left:40px;
}
}
.TagCloud{
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
padding-top: 5px;
padding-bottom: 2px;
}
.DiscussionPage-list {
z-index: 100;
}
ul.Dropdown-menu.Search-results {
left: 200px;
top: -30px;
}
.Alert{
max-width:1100px;
margin:auto;
}

In Administration>Appearance>Custom header

<div class="customlinks">
<a href"#">Link</a>
<a href"#">Link</a>
<a href"#">Link</a>
<a href"#">Link</a>
<a href"#">Link</a>
<a href"#">Link</a>
<a href"#">Link</a>
<a href"#">Link</a>
</div>

<button class="hideb"><</button>
<style>
.customlinks::-webkit-scrollbar {
width: 0.2em;
}
.customlinks::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #1D2731;
}
 
.customlinks::-webkit-scrollbar-thumb {
border-radius:10px;
background-color: white;
outline: 1px solid slategrey;
}
.customlinks>a{
color:gray !important;
}
.customlinks {
position: fixed;
z-index: 100;
overflow: scroll;
width: 50px;
height: 134px;
top: 145px;
left: 130px;
overflow-x: hidden;
line-height: 25px;
font-size: 14px;
}
.hideb{
width:30px;
height:70px;
position:fixed;
top:45%;
left:250px;
z-index:1000;
border:none;
outline: none;
font-size:18px;
border-radius:4px;
}
@media screen  and (max-width: 1030px) {
.hideb{
display:none;
}
}
@media screen  and (max-width: 767px) {
.customlinks{
display:none;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".hideb").click(function(){
        $("nav.IndexPage-nav.sideNav, .App-header, .customlinks").toggle();
        var x = $('.IndexPage').css("margin-left");
        if (x=="-200px"){
          $('.IndexPage').css("margin-left", "-280px");
        }
        else{
         $('.IndexPage').css("margin-left", "-200px");
        }
        var y = $('.App-content').css("margin-left");
        if (y=="200px"){
          $('.App-content').css("margin-left", "auto");
        }
        else{
         $('.App-content').css("margin-left", "200px");
        }
        var z = $('.hideb').css("left");
        if (z=="250px"){
          $('.hideb').css("left", "0");
        }
        else{
         $('.hideb').css("left", "250px");
        }
        var xy = $('nav.sideNav.UserPage-nav').css("left");
        if (xy=="10px"){
        $('nav.sideNav.UserPage-nav').css("left", "35px");
        }
        else{
         $('nav.sideNav.UserPage-nav').css("left", "10px");
        }
        var $this = $(this);
        $this.toggleClass('.hideb');
        if($this.hasClass('.hideb')){
            $this.text('>');         

        } else {
            $this.text('<');
        }
});
});
</script>
<script>
jQuery( document ).ready(function( $ ) {
   $(window).on('popstate', function() {
      location.reload(true);
   });
});
</script>

</script>

Color themes:
RGB(116, 116, 116), RGB(255, 255, 255)

As always, if someone need help with customization, feel free to ask.
I hope this will be helpful for someone, and i would appreciate to hear your thoughts.

0E800

@Ralkage I apologize if its too personal of a question, but... which eye was it? Left eye? ?

Razor

Best to review:
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

Also, using if you using Chrome or Firefox or Edge, the F12 console and selecting mobile, will give you hints to as how the css affects other devices with different resolution/screen sizes.

0E800

Interesting. Think I prefer having a static upper header vs a static left side bar.

Thanks for sharing.

simon511000

On iPad :
screen

Razor

Thanks for feedback, i appreciate that a lot.
simon511000
I fixed issue with content displaying incorrectly on display which resolution is below ~1030px. Thanks for pointing that out.
0E800
Thanks for advice. I already know about rem and em, as u can see, i already used EM for scrollbar. But, i just prefer, in terms of calculating etc, px, i know it's not the best solution, but for what i want to achieve, it works ?. For console, thanks, it's very useful, it's way better than constantly resizing window, to see how it looks on lower resolutions.
@Felli
I didn't even know that tags can be used as default display, shame on me ?. I will try to make it look better. But only thing that i don't seem to find is a way how to force sidenav (following, tags, etc) to show one bellow another, and not inline, while showing tags as primary. About backend, if u can explain what exactly didn't look good for u.

Again, thanks everyone for feedback and thoughts, i appreciate that a lot.

Ralkage

My eye feel funny.

jordanjay29

0E800 third eye.

Felli

Sad to say doesn't look good with tags as default display, also backend doesn't look too good either, but an interesting idea! ?

Felli

Razor About backend, if u can explain what exactly didn't look good for u.

I believe this should help a lot more than just explaining it. ?

simon511000

Genial, it works:

Razor

Felli
I updated the code, and made a few changes in admin panel. Let me know your thoughts.
Thanks for pointing that out ?

Felli

Razor Much cleaner look, although should think of making the sidebar style collapsible by default on both web & mobile could fix the issue with tags being the default view. ?

Razor

Sorry for not replying, i had some problems with pc, which hopefully will be resolved in next few days.
About, Felli i was thinking about creating button which will collapse sidebar, and sidebar is not visible in mobile view already, but i think it's better for it to be displayed always. About tag as default view, well, actually after looking, to me, tags looks normal. Like on default style, just with this sidebar. Maybe there is problem on some lower resolutions, i will take look on that when i fix my pc and if there is that kind of problem i will solve that
Ralkage
I will consider that, but problem is, if i for example make it to be positioned absolute, the button that is visible when a sidebar appear will overlap with logo/text. Which i believe is more visual dankness than that. But, i will make it more visual appealing by making it move for few px instead to edge. Thank you for advice.
And thanks for feedback.

Ralkage

@Razor you may also want to take into account of the behavior of the sidebar option that becomes visible when you're in a discussion, it will off-put the logo section with your theme leading to unwanted visual dankness.

Dank Theme

Razor

Code is updated.
Fixed:
Tags as primary are working now as they are supposed to work. Sidenav is also looking as it should.
On resolutions bellow ~1025px width, tags are displayed similar to mobile view.
About Ralkage advice, i couldn't find a way to move logo for just a few px instead of how it is now displayed when using sidebar.

Frink

Razor This theme does not work with @sijad flarum-ext-links. The links pop off the sidebar, and everything goes crazy....

Razor

Thanks for feedback and pointing out bugs.
Frink
Is that a extension? Can u provide a ss? I think that i know what are u talking about, but just to be sure. I will think of some reasonable way to implement that, without breaking anything.
SteveSmith
What do u mean with header do not touching the top of screen?
Are u reffering to sidebar or? Because i tested it on resolutions from 1024x768 up to 2k and everything worked as excepted.
About collapsible sidenav, as it is suggested few times, if custom headers allows using of a javascript than i will implement that feature.
Topics are using default values for margins, so i think they are already centered. To be more precise, after moving a .app-content to right for 200px, i added a -200px value for .indexpage which i believe reverted it where it was already displayed.
For scrollbar, if u want to display a default scrollbar than from css code delete everything that begins with
body::-webkit-scrollbar.
About black bar, thanks for reminding me. Actually i wanted bars to be colored in some shade of gray. But for testing purposes i made it black and later forgot to change it.
Again, thanks for feedback.
I will update the code, and post here when it's done.
If u find any other bug, let me know.

SteveSmith

I like it, but it needs to be fixed. The header is not touching the top of the screen.

Anyway, here's what I'd like to see. Make the left side menu column collapsable. Once you have that, make the posts more centered. Once you have that, add the scrolling bar like the original Flarum has. But remove any login buttons above it. Just make sure the thin bar for scrolling is there.

Also, remove the black horizontal bars between the topics. Or at least make them less visible. Set opacity to 25% or something.

Felli

SteveSmith Set opacity to 25% or something

I would say about 15% or even 20% would be slightly better, but 25% shouldn't hurt too much. ?

SteveSmith

Razor I'm on an iPad. How do you insert a photo, because I took a screenshot to show you?

Frink

Razor alternatemessage

It makes everything go screwy....

Razor

SteveSmith
Upload image to any image hosting site, than copy and paste link here.