2020 Dark Blue - New and simple dark theme in LESS / CSS

dllister

Before copying the LESS and CSS I recommend activating the night mode in Appearance> Dark mode
All the less and css codes are in the github repository just leave them the link.

Paste Less - Appearance> Custom Styles
Link - https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/less/style.less

Paste HTML for Footer - Appearance> Custom Footer
Link - https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/footer.html

The area of the footer can put the links they want, simply change their name and paste their url as well as the icons.

The CSS for Footer won't work Custom styles so you have to paste the code - Appearance> Custom Header
Link - https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/css/bloques.css

I hope you like it ...

kris88

dllister This is good. Would you be able to give the code just for the footer? I like your theme but I can't use a dark theme overall. Your footer layout is pretty good. Just want to get that working for my flarum forum.

Amarok

dllister The CSS for Footer won't work Custom styles so you have to paste the code - Appearance> Custom Header

don't forget to add <style></style> to work 🙂

carrabelloy

dllister I would like to adjust that on my side. How can you get that from you and what do you have to pay attention to?

hadpro

I Also Have A Similar Website https://vn2s.net Using Sai Beta 14 Dark Mode

dllister

hadpro if it's something similar except that from this template I add a footer to it.

010101

I love this. I’m not sure if I’ll use it or not but I love it. One day, Friends of Flarum maybe could make the day/night mode extension so that you can choose from turning things mostly black, to maybe a dark grey, and then also a dark blue as options. For example, I love Twitter’s dark blue-ish night mode.

[deleted]

kris88 Hey - the footer is here https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/footer.html

ctml

Any screenshots available?

kris88

thanks @[deleted], I have tried that along with the header and CSS part but somehow the columns in the footer don't work. All the stuff in footer comes up on one column. The only way I got columns is by using an example like the one here
https://codepen.io/scanfcode/pen/MEZPNd which had script in the header calling for google api's and with that the links extension breaks - the drop down menus don't work. I've taken off footer from my site until I can find some working footer code with columns.

[deleted]

kris88 have you tried display: inline; in the CSS ? I haven't tested this of course, but in the screenshot the divs are floated in columns

kris88

@[deleted] , @Amarok Thanks guys. It was indeed the lack of <style></style> tags that troubled me and it was silly to think of!

jhgxcjg

i pasted the codes as in description
header is messed up like this
and footer is messed up like this
what do i do to fix this please help ??

wolfshards

You should build this theme into a extension, sound great idea over there.