ModernBB: A new forum version for Forumotion forums

[The Godfather]

Dear users,

In order to improve our services, Forumotion is pleased to offer you a new forums version to ensure a better user experience. This new version, which we have called ModernBB, is added to the 4 Forumotion forums versions already available (phpBB2, phpBB3, punBB and inVision) to constitute the 5th version available for your forums

It's accessible from your administration panel > Display > Skins > Choose a theme > Version > ModernBB.



ModernBB brings to your forums a more refined and aerial design with new innovations : New design, full-width banner, sticky navigation bar, retractable sections, ... Etc.

Another novelty will also be available exclusively on this template. It's the possibility for the admin to choose the forum version which will appears on mobile browsers (Web version of the forum or it's mobile version).

This choice is available for forums who defined ModernBB as the base version of the forum in the administration panel > Display > Templates > Mobile Version> Mobile configuration :



Without saying too much, I let you discover all the potential that ModernBB offers to your forums by yourself ...

Hopefully this new Forumotion forums version will bring you full satisfaction!

The Forumotion team

Notes:

1. Note that the ModernBB version is still in BETA phase. Although it has already passed our tests, it's not a definitive production version. It may contain some visual or functional bugs. So please help us to highlight any residual bugs.
   
   
2. Note that the ModernBB version does not yet give you access to it's templates edition. Only mobile version templates remains accessible at the moment. This will allow us to optimize and correct the possible problems faster.

[Mimóza]

Woah! You got me curious!


Edit: Looking really sleek at first glance! Nice job, thanks! 

[Ape]

Nice work looking over it now and trying to make a new skin for it but one thing i Don't like is where you out the login and log out nav button it should be with the rest of them.


Also you have a online icons on your profiles but im sure its not that hard t add the offline icon also.

[The Godfather]

@APE It's the width of your forum logo that is the cause of the problem. It's too wide and pushes the menu on 2 lines. This is not a bug

[Ape]

Ok thank you

[DVAted]

This sounds exciting

However ...

@APE It's the width of your forum logo that is the cause of the problem. It's too wide and pushes the menu on 2 lines. This is not a bug

I normally have about 60-70 header banners in random rotation on top of my forum, and they're all 900x200. Is this new setup gonna make me give them all up? and if so, what is the appropriate size of the top banner?

[SarkZKalie]

@DVAted i believe CSS can help you to solve this issue :v or my favourite part - template modifying

[Ape]

This sounds exciting    

However ...

@APE It's the width of your forum logo that is the cause of the problem. It's too wide and pushes the menu on 2 lines. This is not a bug

I normally have about 60-70 header banners in random rotation on top of my forum, and they're all 900x200. Is this new setup gonna make me give them all up? and if so, what is the appropriate size of the top banner?

If you stay with the ones you have now and use this new system then you will have to make them smaller to fit the new system but remember this is in bata mode and also you don't have to change over it's just a new system we have made to bring your more choice

[Ange Tuteur]

This is quite a pleasant surprise ! I've been taking a look over the theme so far and it's lookin' good. Is it alright if I post any suggestions I have or bugs I find to this topic ?

Nice work looking over it now and trying to make a new skin for it but one thing i Don't like is where you out the login and log out nav button it should be with the rest of them.


Also you have a online icons on your profiles but im sure its not that hard t add the offline icon also.

That is indeed due to your banner size, however, it can be corrected with CSS. I'll post a few solutions below.

1. Width limit
This CSS snippet will restrict the forum banner to a certain size. ( 200px by default )

Code:

#logo img {
  max-width:200px;
}

2. Force banner onto its own line
If you don't want to restrict your banner width, the best solution would be to force it onto its own line. Use the snippet below to achieve this.

Code:

#logo {
  float:none;
  display:block;
  text-align:left;
}

#logo img {
  max-width:100%;
}

Change "left" to "center" or "right" in

Code: text-align:left;

to change the alignment of the banner. Note : I'm still forcing a 100% banner width limit, so your banner doesn't overflow the forum. I'd recommend keeping the banner height around 100 to 200px though, as it seems the header has a fixed height, in which case adding

Code: max-height:100px;

might be a good idea.

[DVAted]

oooh okay thank you everybody
from the ACP previews, I could only surmise that it's optimized for mobile viewing
because it basically tightens everything, and makes most parts taller

but hey, variety and freedom of choice is always welcomed

I think I may switch to Invision version in April, though. I've had phpBB2 for far too long now.

thanks, Ange
best regards

[Ape]

@Ange Tuteur Thank you for that code and yes it worked but it's moved the navbar from the top to under the logo / banner i liked it the way it was over the top of the banner

[SLGray]

I love the way the reputation option looks and works in posts.

I can not wait to see the final product.   I mean when it is out of beta.

Question: Why is the height of the headerbar so big (350px)?

[Paulostge]

My advice for better navigation and better planning:

1. Avatar in the name at the top, Alerts with avatar, recent topics, friends.









2. Quick access to friends (menu)



3. Notifications to enter time and date (menu)



4. Incoming messages (menu)



5. Neatly subsforums



6. It is important to enter the selection for more than one category of news the portal

7. The ability to enter widget with images of subjects from some category

8. The option to remove things from the menu without code (e.g /faq)

9. Also in "vogue" now are the elements of the page to be without borders (it is not necessary)

10. The widget appear only in forums and portal

11. Redundant symbols recent topics and categories (only in these points)



12. Slow loading toolbar in top (important)

https://help.forumotion.com/t120096-new-features-toolbar-notifications-and-more

13. Link for each post



I'll fill when open templates.

[petrosnik]

hello please help me the avatar in the toolbar it's too big.

If i use a smaller avatar it's ok but in this occation the left the avatar is being tarnished
what should i do to solve this problem?

[MattiaDes]

Here are some reports:

Spoiler:

[SLGray]

hello please help me the avatar in the toolbar it's too big.

If i use a smaller avatar it's ok but in this occation the left the avatar is being tarnished
what should i do to solve this problem?

Do you mean avatar or a button in the navigation menu?

[petrosnik]

I mean the avatar but the problem now is solved.
Thank you

[Charisma Clash]

Any dark themes of this available? 
Edit - I take that back since you can customize it to look however you want. I really like it, it's very sleek and well... modern.

Edit 2 - Seems like you cant change the color of the toolbar though, change never happens when you save it.

Edit 3 - Seems the toolbar was a caching issue despite F5ing it.

Ever consider adding NodeBB to the family? Would be another great software.

[Gwim_Weaper]

I have an issue with the header size of my forum, there is a blue rectangle that is far too deep (long). Is there any way I can reduce the size?

http://www.wigan-rejects.com/


Could do with making the forum itself a touch wider as well if it's possible. Tried AP > General > Forum - Configuration, but no matter what number I change the width to it changes nothing....Appreciate any advice.

[Jucarese]

Code:

.headerbar {
width:1320px;
margin-left:50px;}

Should stay focused with the forum
If you already have that css in your css editor then just add the 2 new modifiers

[Ape]

Any dark themes of this available? 
Edit - I take that back since you can customize it to look however you want. I really like it, it's very sleek and well... modern.

Edit 2 - Seems like you cant change the color of the toolbar though, change never happens when you save it.

Edit 3 - Seems the toolbar was a caching issue despite F5ing it.

Ever consider adding NodeBB to the family? Would be another great software.

As this is in beta mode we do not have any themes for this but you can make the change your self.

I am working on a theme that is dark right now but as hitskin is not setup to save them yet it can not be added to the system
but when i am done i will post it on the right part of the support forum but right now this is in BETA mode so it's still showing some bugs.

[Gwim_Weaper]

Code:

.headerbar {
width:1320px;
margin-left:50px;}

Should stay focused with the forum
If you already have that css in your css editor then just add the 2 new modifiers

Thanks, but that just narrows the width rather than the depth.

Need to be able to decrease the height if you will

[YoshiGM]

I really like this new version! Thanks for this
I hope the final version will be launched soon

[Charisma Clash]

Caught one bug, it doesn't allow you to change the color of the links to the subforum 

It stays the default blue even if you change around the colors.

[SLGray]

Caught another bug, text isn't visible when you try to insert things like images. 

Though overall my theme for ModernBB is dark, so that's probably why since the default is light.

You must have modified something if you are changing the theme.

[Charisma Clash]

Caught another bug, text isn't visible when you try to insert things like images. 

Though overall my theme for ModernBB is dark, so that's probably why since the default is light.

You must have modified something if you are changing the theme.

Yea that's on me. My theme was dark so naturally I put the text as white, but now I have it as a greyish color so people can see it. One thing I noticed is that sidebars or widgets don't show up on mobile for some reason.

[Gwim_Weaper]

Code:

.headerbar {
width:1320px;
margin-left:50px;}

Should stay focused with the forum
If you already have that css in your css editor then just add the 2 new modifiers

Thanks, but that just narrows the width rather than the depth.

Need to be able to decrease the height if you will

No one can assist?

[tillytiger99]

Im in the process of changing to this theme. Its exactly what I wanted! But The header section is black, and I want it white with a logo added. I cant seem to find where to change this. Ive changed just about everything in display, but still no change. Probably a really stupid question, but if you could point me in the right direction please?

[Gwim_Weaper]

ACP/Display/Colours.

[tillytiger99]

I know, ive changed just about everything there, but with no joy. Which section changes the header background colour?