Clean & Modern style

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.

SteveSmith

Razor Ok, let me first get back home from work where my iPad is. ?

SteveSmith

Here you go. This should do it!

https://www.dropbox.com/s/o1o8t83idueqgtd/File%202018-02-19%2018%2047%2019.png?dl=0

Frink

@Razor any ideas on how to fix this? I would love to use this theme on my forum, but if it doesn't work with that extension, I can't really use it.....

Razor

Frink
I am going to update the code tomorrow probably, with fixes and added features. I am thinking of placing links at the top-center, but will see where is the best position for them to be placed.
For now, if u want to use a style, i suggest to disable that extension temporary. If u have any more suggestions let me know.

Frink

Razor Ok, thanks for this. I will try it out tomorrow!

Razor

Code is updated.
Changed:
Bottom black bar(border) between discussions are changed to light gray. Which i believe is more visually appealing.
Better use of space on lower screen resolution(width bellow ~1030px).
Header (.hero) is now displayed at the top edge of screen, instead of few px bellow(width bellow ~1030px).
About the problem @Frink pointed out, unfortunately i couldn't solve that as the extension are using same classes as other elements in navigation bar. Which lead to breaking everything. But, i provided solution by adding a links to a custom header and placing them in sidebar, which will provide similar functionality as a extension. @Frink if u need help with changing links and adding more, let me know, and i will explain it in detail how u should do that.
Added:
Button, which will collapse a sidebar, and everything that is displayed in it. Keep in mind, that after pressing back button in browser(not the button created by me)page will reload, which will prevent from any bugs to occur.
Fixed:
Minor bugs fixed.

Frink

Razor Ok, thanks!

Frink

Razor Here is another error that I found
alternatemessage
Is there a way that you can send that element to the back of the page?

Frink

Razor It is also scrunching the links, see image below
alternatemessage
For a real-time view, visit http://beta.zaptech.ca/

Razor

Frink
As i do not have in the moment acess to pc, i will tell u how to fix that bugs, and in few days i am gonna make changes to code. It's really strange that u got that bugs, beacuse i tested code, before posting, on resolutions from 1024x768 up to 2k, and the button should be displayed somewhere on vertical middle of page, rather than where it is displayed for u. Maybe u made some changes in code, but here is fix.
In custom header find .hideb class. Under that class there is top: attribute. From 45% change that to for example 50%, which i believe will resolve ur issue, if not try 55% etc.
For second problem with links in custom header find .customlinks class and change width attribute to, 70px or 80px. Than go to css and find .Dropdown-menu--right and change left attribute from 180px to 200 or 210px.
Let me know if it resolved issue for u.

Frink

Razor Ok, I will give this a try. Thanks!

Frink

Razor Ok, I tested it, and it is better, but not perfect...
alternatemessage
Also, in the admin panel, this also looks a bit funny:

As you can see, the title isn't centered. Any idea how to fix that?

Frink

Razor I don't mean to seem like a pain, but here is another issue I found:
alternate
The sidebar overlaps the confirmation email message

« Previous Page Next Page »