Clean & Modern style

Razor

Felli
I updated the code, and made a few changes in admin panel. Let me know your thoughts.
Thanks for pointing that out ?

Felli

Razor Much cleaner look, although should think of making the sidebar style collapsible by default on both web & mobile could fix the issue with tags being the default view. ?

Razor

Sorry for not replying, i had some problems with pc, which hopefully will be resolved in next few days.
About, Felli i was thinking about creating button which will collapse sidebar, and sidebar is not visible in mobile view already, but i think it's better for it to be displayed always. About tag as default view, well, actually after looking, to me, tags looks normal. Like on default style, just with this sidebar. Maybe there is problem on some lower resolutions, i will take look on that when i fix my pc and if there is that kind of problem i will solve that
Ralkage
I will consider that, but problem is, if i for example make it to be positioned absolute, the button that is visible when a sidebar appear will overlap with logo/text. Which i believe is more visual dankness than that. But, i will make it more visual appealing by making it move for few px instead to edge. Thank you for advice.
And thanks for feedback.

Ralkage

@Razor you may also want to take into account of the behavior of the sidebar option that becomes visible when you're in a discussion, it will off-put the logo section with your theme leading to unwanted visual dankness.

Dank Theme

Razor

Code is updated.
Fixed:
Tags as primary are working now as they are supposed to work. Sidenav is also looking as it should.
On resolutions bellow ~1025px width, tags are displayed similar to mobile view.
About Ralkage advice, i couldn't find a way to move logo for just a few px instead of how it is now displayed when using sidebar.

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.

« Previous Page Next Page »