OXO Flarum Themes By Yannis

yannis

A COAT，U CAN TAKE IT OFF ANYTIME , BECAUSE IT'S JUST A PIECE OF CSS, ISN'T IT?

HOT TO INSTALLATION

copy this code to your Appearance >> Custom Header or Custom Footer

why not Custom Styles, because I CANNOT write it ("@media (xxx){xxx}") here !!

Demo Link: https://bbs.kuoxo.com/ | https://bbs.kuoxo.com/d/301-oxo-flarum-themes

UPDATING

Welcome to give me some inspiration or a bug, I will do it all day.
Do not require any pictures，It doesn't fail.
Great？😅

CONTRIBUTING

Flarum - Without you, nothing exist
Yannisme - Just me 😀

SUGGESTIONS

Colors #b59e8c , #444

✅ Colored Header

I suggest use the following fonts

1. font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
2. font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
3. font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

CONTENT

Dec. 12, 2019

body{font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif;background:-moz-linear-gradient(to bottom,#f2f2f2,#ebebeb)}.Search-input:before{display:inline-block;font-size:inherit;text-rendering:auto;content:"\f002";float:left;margin-right:-36px;width:36px;font-size:14px;text-align:center;position:relative;padding:7px 0;line-height:1.5;pointer-events:none;background:rgba(0,0,0,.11);color:#fff;border-radius:4px 0 0 4px}.Search-input input{float:left;width:225px;padding-left:50px;padding-right:32px;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s;box-sizing:inherit!important}.Post-body table{box-shadow:0 -1px 5px -2px #515151!important}@media (min-width:768px){.DiscussionListItem{position:relative;margin:0;padding:0;border-radius:5px;margin-top:18px;}.UserPage .sideNavOffset,.sideNav .Dropdown--select{display:block;background:#fff;padding-left:15px;padding-right:15px;padding-top:5px;padding-bottom:5px;box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;border-radius:6px}.DiscussionListItem-count{margin-top:5px}body{background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);background-repeat:no-repeat}.IndexPage-results sideNavOffset .Post.CommentPost{background-color:#fff!important;border-radius:5px;margin-top:20px;-webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important}.Scrubber-handle{background-color:transparent!important}bbs.kuoxo.com{author:yannisme}.DiscussionHero .TagsLabel .TagLabel.colored{margin-right:5px;background:#fff!important;color:#667c99}.DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text{color:inherit!important}.Hero{box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;background-color:#fff!important;margin-bottom:15px}.Hero h2 {font-size: 2em; font-weight: bolder; color: #191919;}.Hero-subtitle{color:#000;font-size:15px;margin:8px 0 0;line-height:1.5em}.DiscussionHero .TagsLabel .TagLabel{color:#4d698e;font-size:18px!important}.App-header .Button,.App-header .Button:hover{color:#fff}.IndexPage-results .DiscussionListItem-content{padding-left:80px;padding-right:80px;padding-top:10px;border-radius:5px;padding-bottom:10px;background-color:#fff!important;-webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important}.UserPage .DiscussionListItem-content{padding-left:80px;padding-right:80px;padding-top:10px;padding-bottom:10px;background-color:#fff!important;border-bottom:1px solid #ebebeb}.UserPage .Hero h2{color:#fff}.DiscussionPage .CommentPost{border-radius:5px;margin-top:20px;box-shadow:0 4px 30px 0 rgba(0,0,0,.1)!important;background:#fff}}

Jan. 15, 2020

body{font-family:"Arial","Microsoft YaHei","黑体","宋体",sans-serif;background:-moz-linear-gradient(to bottom,#f2f2f2,#ebebeb);}.Search-input:before{display:inline-block;font-size:inherit;text-rendering:auto;content:"\f002";float:left;margin-right:-36px;width:36px;font-size:14px;text-align:center;position:relative;padding:7px 0;line-height:1.5;pointer-events:none;background:rgba(0,0,0,0.11);color:#fff;border-radius:4px 0 0 4px;}.Search-input input{float:left;width:225px;padding-left:50px;padding-right:32px;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s;box-sizing:inherit !important;}.Post-body table{box-shadow:0px -1px 5px -2px #515151!important;}@media (max-width:767px){#yqlj{display:none;}}@media (min-width:768px){body{background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);background-repeat:no-repeat;}.DiscussionListItem{position:relative;margin:0;padding:0;border-radius:5px;margin-top:18px;}.DiscussionListItem-count{}.IndexPage .DiscussionListItem-info>.item-tags{margin-right:0;position:absolute;left:80px;top:38px;max-width:150px;white-space:nowrap;overflow:inherit;transition:max-width .2s ease-in-out,-webkit-mask-image .2s;-webkit-mask-image:none;font-size:12px;}.IndexPage .DiscussionListItem-controls{right:32px;top:38px;}.IndexPage .DiscussionListItem-title{margin-right:155px;padding-bottom:30px;}.IndexPage .DiscussionListItem-author .Avatar{width:48px;height:48px;position:absolute;left:17px;border-radius:48px;top:20px;}.UserPage .DiscussionListItem-content{padding-left:80px;padding-right:80px;padding-top:10px;padding-bottom:10px;background-color:#fff!important;border-bottom:1px solid #ebebeb;}.IndexPage-results .DiscussionListItem-content{padding-left:80px;padding-right:80px;padding-top:0;border-radius:5px;background-color:#fff!important;-webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;}.sideNav .Dropdown--select,.UserPage .sideNavOffset{display:block;background:#fff;padding-left:15px;padding-right:15px;padding-top:5px;padding-bottom:5px;box-shadow:0 1px 5px 0 rgba(151,158,181,.28)!important;border-radius:6px;}.Scrubber-handle{background-color:transparent!important;}bbs.kuoxo.com{author:yannisme;}.DiscussionHero .TagsLabel .TagLabel.colored{margin-right:5px;background:#fff!important;color:#667c99;}.DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text{color:inherit!important;}.DiscussionHero .TagsLabel .TagLabel{color:#4d698e;font-size:18px!important;}.Hero{box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;background-color:#fff!important;margin-bottom:15px;}.Hero h2{font-size: 2em; font-weight: bolder; color: #191919;}.Hero-subtitle{color:#000;font-size:15px;margin:8px 0 0;line-height:1.5em;}.App-header .Button,.App-header .Button:hover{color:#ffffff;}.UserPage .Hero h2{color:#ffffff;}.Post-body{font-size:14px;line-height:1.7;position:relative;overflow:auto;overflow-wrap:break-word;border-radius:5px;margin-top:0;box-shadow:0 8px 9px 0 rgba(0,0,0,0.1) !important;background:#fff;padding:20px;min-height:80px;}.Post-body>*:first-child,.Post-preview>*:first-child{margin-top:0 !important;margin-bottom:0;}.Post-actions{margin-top:5px;}.Post-footer{margin-top:10px;margin-bottom:0;}.Post-header{margin-bottom:10px;color:#808080;}.PostStream-timeGap{padding-top:0;padding-bottom:0;}.Select-caret{margin-left:5px;}.Post{padding-bottom:10px;}.PostStream-timeGap span{margin-top:-10px;position:absolute;}.UserPage .Post-body{box-shadow:none!important;}.tooltip.right{margin-left:-29px;margin-top:-18px;padding:0;}}

SCREENSHOTS

Dec. 12, 2019

Jan. 15, 2020

yannis

update Jan. 15, 2020

tolgaaaltas

Some parts very similar to FlarumTR's design. 🤔

Anyway, thank you for sharing.

yannis

tolgaaaltas Sorry, but I didn’t know it 😊,
I will pay attention to it 😉， thank you for your reminder！

customer50

tolgaaaltas FlarumTR theme is killer. Is it free or posted somewhere by chance? Would love to use it myself on my flarum install.

tankerkiller125

Custom CSS does support the @media query, even better since it compiles less you can use the built in media query breakpoints as well. I don't have time at the moment to convert a snippet of your theme to less as the moment, but I'll give it a go later tonight to show an example of the media query in less (and how it can actually help make the code even easier to maintain)

yannis

tankerkiller125 OK,Thx 😆 I'll optimize it later.
That code was less style before , but the typesetting of the article was too long and bloated

tolgaaaltas

customer50 It's completely free. You can get it from their own site. Type "Teşekkürler" and get access their CSS codes.

zyronix

@tankerkiller125 on the subject of CSS efficiency, what are your thoughts on these unofficial flarum 'themes' using !important tags on almost every property (sometimes overriding multiple other important tagged properties only by context of their parsed location)
less can be incredibly useful for structuring and writing CSS but will it help with this? or should themes use different classes entirely and not rely on the end of stacked !important selectors?

tankerkiller125

zyronix it is my opinion that !important should only be used when there is no other choice. If your CSS is loaded properly for the most part you should not need !important except in some rare instances. With that said I don't often work with CSS or less so my personal preference may not be the correct or professional way of doing things.

As far as using custom classes it should overall be unneeded except in very rare instances. Generally speaking themeing Flarum should be 100% possible using the "Custom Styles" option with the current way everything operates in Flarum.

As a final note when using the "Custom Styles" in the Flarum dashboard those styles will be placed correctly to override the defaults without !important for the most part.

zyronix

tankerkiller125 will css styles in Custom Styles correctly override a style that flarum has already tagged as !important?
what about other extensions that use the !important selector ?

i think there's some level of ambiguity that could be mentioned, but i only use Custom Styles for small adjustments to my large changes made otherwise. i dont know if it should be used to override most the default selectors, but it works (as did myspace profiles)

flarum loads Custom Styles after other assets, but this doesn't justify the shotty CSS of some of these themes that use !important (or even not using important) - browser still defaults to the last selector property of the same name. (is this efficient?)

tankerkiller125

zyronix If it's already tagged as important than it probably won't override correctly. This is just the nature of CSS/LESS, themeing using existing selectors is probably as efficient as it gets, writing a theme with custom selectors would basically be rewriting the entire front end almost and serves no real purpose. Generally speaking when talking CSS efficiency I don't think anyone has ever gotten it correct and I don't think anyone ever will because it's a subjective thing and everyone has differing opinions.