The CSS directory | A great collection of Style modifications for Flarum

Not a bad idea wally.

Fix Chrome issues:

:root{
  color-scheme: light dark;
}
* {
  image-rendering: -webkit-optimize-contrast;
}

Let's see what else...

.Post-body a, .Post-body a:hover, .Post-body a:focus{
  filter: hue-rotate(287deg);
}
.Post-body a:visited{
  color: #f92a2a;
}

Restoring visited/unvisited colours (YMMV this is based on my selection of primary colour).

Header logo:

.Header-logo {
  display: none;
}
.Header-title a {
  display: inline-block;
  width: 120px;
  height: 36px;
  background: url(/assets/logo-xxxxxxxx.png) top left/contain no-repeat;
}

Fix the dumb default width:

(edited - see next post)

Walys Add logo to mobile nav bar by 010101

Here's another way to do this that makes the icon part of the button with the icon on the left:

@media (max-width:767px) {
  .App-primaryControl > .Button--icon, .App-titleControl > .Button--icon, .App-backControl > .Button--icon {
    width: auto;
  }
  .Navigation.ButtonGroup.App-backControl > .Button:before {
    content: "";
    float: left;
    position: relative;
    top: -6px;
    width: 45px;
    height: 32px;
    background: url(https://i.postimg.cc/3Nz5rfXW/Flarum-32x32px.png) top left / contain no-repeat;
    display: inline-block;
  }
}

Screenshots in @010101's thread.

Interesting you like that. Here's my updated CSS to fix the "dumb default width":

.hasPane.panePinned .App-content .container, .hasPane.panePinned .App-footer .container {
  padding-left: 12px;
  padding-right: 12px;
  min-width: unset;
}
@media(min-width:1100px) {
 .container {
  width: unset;
  min-width: 1100px;
  padding: 0 calc(18vw - 191px) 0 calc(12.5vw - 38px);
 }
 .DiscussionPage .container {
  padding-left: calc(13vw - 134px);
 }
 #header .container {
  padding: 0 calc(15vw - 150px) 0 calc(13vw - 66px);
 }
 .Post {
  margin-right: 2vw;
 }
}
@media(min-width:768px) and (max-width:1099px) {
 .container {
  padding: 0 7px 0 99px;
  margin: 0;
  width: auto
 }
 .DiscussionPage .container {
  padding-left: 9px;
 }
 #header .container {
  padding: 0 0 0 77px;
 }
}
@media(min-width:768px) {
 .Hero .container {
  padding-top: 40px;
  padding-bottom: 30px;
 }
}

You should probably pair this with increasing the font size for readability:

.Post-body, .TextEditor .TextEditor-editor {
  font-size: .9rem;
}
@media (min-width: 1100px){
  .Post-body, .TextEditor .TextEditor-editor {
    font-size: 1rem;
  }
}
@media (min-width: 1700px){
  .Post-body, .TextEditor .TextEditor-editor {
    font-size: 1.1rem;
  }
}
@media (min-width: 2200px){
  .Post-body, .TextEditor .TextEditor-editor {
    font-size: 2rem;
  }
}
@media (min-width: 3400px){
  .Post-body, .TextEditor .TextEditor-editor {
    font-size: 2.2rem;
  }
}

When I say the defaults are "dumb" that's actually a bit of a joke because it's actually quite common with professional tools to have "dumb defaults". I'm sure there are some people that prefer having a forum with a skinny centre, but I'm not one of them (it looks very dated). Flarum doesn't play nice when adding custom CSS with calc() values so you have to add the above code either in-line using an extension like HTML Head Items or into a separate stylesheet.

@Walys I have one suggestion for you please follow some good kind of template in first post and don't make replies edit first post only here is the template example if you want.

// TEMPLATE

Mobile Logo

Add logo to mobile navigation bar.

CSS

@media (max-width: 767px) {
.Navigation.ButtonGroup.App-backControl::after {
background-image: url('/logo.png');
background-size: 35px 35px;
display: inline-block;
width: 35px; 
height: 35px;
margin-top: 5px;
content:"";
}
}

Credits

This css is written by @010101

Cut Large Links

Collapse large links just like YouTube.
Before:

https://discuss.flarum.org/d/859-flarum-community-guidelines

After:

https://discuss.flarum.org/d/859-...guidelines

CSS

.Post-body a {
    border-bottom: 1px solid var(--control-bg);
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

Credits

Thanks to Pollux for this snippet.

and here is the markdown code for post:
https://pastebin.mozilla.org/nCUtiHSA/raw

Nikol1 any screenshots or at least an explanation with words? I am not pasting some CSS just because... just because