Beautiful "OS-X Yosemite Mountain"-esque Style

doublethinker

This is not my styling, but I came across this while searching for a logo of Flarum to feature on my site. I'm so inspired by this 2 year old styling of Flaurm that I am probably going to work some elements of it into my own. Do take note that it may not work on the current iteration of the software. I have not tested the css.

alt text

Github

fbk

doublethinker

The theme works just fine even 2 years after this thread started. I just tested it.

jordanjay29

Nice find. Unfortunately, as you predicted, Flarum's styling has moved on and their custom CSS no longer works as written.

Razor

I made pretty similar styling. Didn't know for this one.
Demo: https://etforum.freeflarum.com/
So here is code:

body::-webkit-scrollbar {
    width: 0.3em;
}
 
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-color: purple;
  outline: 1px solid slategrey;
}
body{
background: url("http://www.technocrazed.com/wp-content/uploads/2015/12/HD-purple-wallpaper-image-to-use-as-background-14.jpg");
background-size:cover;
background-attachment:fixed;
background-position: center center;
background-repeat:no-repeat;

}
.Hero{
background-color: rgba(255, 255, 255, 0.35);
border-radius: 5px;
}

h3, a{
color:black !important;
}
.App-content {
background-color: rgba(255, 255, 255, 0.8);
max-width: 1200px;
margin: 20px auto;
border-radius: 5px;
  }
 .DiscussionPage-discussion > .container  {
    min-height: 530px;
  }
.App:before{
background-color: rgba(255, 255, 255, 0.9);
}
.UserPage{
border-radius: 5px;
}
.PostStream-item{
border-bottom:1px solid #e5aaff !important;
}
.DiscussionListItem:hover{
background-color:#e0beff;
}
.Scrubber-handle{
background:none;
}

For color themes i used: highlight color : RGB(77, 0, 96), and for second color: RGB(106, 10, 148)
I hope this will be helpful for someone ?.

Sanguine

Razor That is awesome! Mind if I include you in the FreeFlarum showcase gallery?

Pollux

Razor I made pretty similar styling. Didn't know for this one.
Demo: https://etforum.freeflarum.com/

One suggestion:

.Hero {
    background-color: rgba(255,255,255,0.35);
    border-radius: 5px;
}

This way, you preserve a little more background shining through. Also it's less greyish.

Meow

Razor The background is too outdated. The High Sierra one should be better.

Razor

Sanguine
Feel free to include me, and thank you ?

Razor

Thank you for suggestion. I appreciate that. I wanted hero to be separated from rest, so i added a grey tint, but it actually looks better with changes u said. So i will include that. If someone want to customize style, but do not know how, i will help (changing colors etc). I will be making few more styles, and will post them when they are done.
I want to ask Sanguine if it's ok to create a one, or two more forums using freeflarum, for testing purposes?

Sanguine

Razor absolutely, go ahead! Eventually it would be nice to have a theme gallery. So many wishes for the future ?

Razor

Meow
You are probably right, but i didn't put this bg because of mac os theme or whatever, but because it was the bg that was most fitting in my mind for this style. But, thank you for suggestion.

0E800

Modified for dark themes:

https://discuss.flarum.org/d/4655-dark-theme-custom-css

The issues I had with this custom CSS is that it does not look good on hi-res screens.

mingtian_ag

I like it very much!!Thanks!!