As I started to make a responsive design for my own site I soon realized MyBB's current templates just aren't going to work for me and that they need a complete rewrite. The problem is that there are 594 templates in MyBB which is a LOT to deal with. Going through all of them isn't something one can do in one sitting and since the HTML in the templates is quite bad by modern standards you really want to change a lot.
So... since this is a lot of effort and it doesn't make sense to do it only for my own use (and as it does make sense to isolate things) I ended up taking the current default theme of 1.6 and going nuts. What I ended up doing was to install a local copy of MyBB and doing direct search and replace in the database. The current progress is quite nice as now in just a few hours I have removed most of what I don't want to see in HTML such as deprecated attributes, style attributes that are not related to JavaScript and cases where CSS smalltext classes were inside smalltext classes (which makes no sense).
Another big change I have done is the change to em based sizes in fonts. I have cloned the end result so it is as if I had done nothing, but ems are quite important part in creating a "proper" responsive design that works right in every case you throw at it.
Finally, I added some classes to many locations like mybb_template_name. These are automated so there is a lot to fix, but as they are now they make it much easier to locate the template I need to be working with when doing changes.
TODO of sorts:
- Remove deprecated HTML attributes (cellpadding, cellspacing, align, valing...) ~99% done
- Remove style attributes when not related to JavaScript (vertical-align, white-space...) ~99% done
- Use em instead of px ~90% done
- Remove images from CSS if they make no sense (gradient) ~10% done
- Add better defined CSS classes ~5% done
- Replace tables with other elements ~0% done
- Remove original CSS classes, replace with the better defined classes ~0% done
- Re-organize CSS so that there is a base style that gives a good starting point for all visual styles ~0% done
- Create responsive styles for print, mobile, tablet, desktop, high resolution desktop... ~0% done
I can upload the current progress if requested. I'm really trying to find ways to save time with this so any kind of mass editing ideas are welcome. This far I've relied to what some simple SQL replace can offer, but it can't help with everything.
You can remind me about this project if I seem to be inactive with it. It's not my only one so it varies a lot what I'm working with, but I also do return to projects even after a long hiatus. You can find me on IRC at Freenode (same nickname as in this post) or you can throw me a PM or simply reply here as I do get notified of those.
I'm working on something like that for over a year.
Went through like 10 rewrites until the semantics were perfect (at least I hope so
)
It will be completely open source.
Soon I'm done.
Good luck to you, I wish more people would put some effort into making something special.
Would you be interested in chatting sometimes on Skype, I feel kinda alone with this stuff...
On Skype I'm merri.piittinen
I don't wonder if you feel alone with frontend stuff when MyBB is the case, it feels almost like talking to a stone wall right now. Of course the starting point for doing any frontend work with MyBB is hardly ideal in the first place, but these days there really aren't truly good open source forum software that gets the frontend right. phpBB 3.1 sounds better than anything MyBB is offering anytime soon, but I don't want to go through yet another forum conversion route.
Here is my current templating W-T-F list:
- 132 full page templates! (ie. <html>...stuff here...</html>)
- And 594 templates in total is just insane.
- And still you have limited power in some cases.
- The same syntax/structure is repeated over and over again...
- ... but indentation and/or order of elements varies so simple search and replace is pain.
- A lot of the syntax is worthless: stuff that is achieved with a single line of CSS is repeated over and over again.
- Placement of form elements is often incorrect (too high in DOM tree on some pages).
- Templates in database! Why not in filesystem whyyyyyy! It makes me feel like I'm wasting my life doing something I shouldn't be wasting my time on in the first place, only because of the added layer of getting things changed.
I guess my next step is to write import/export of the raw template files from and back to database so I waste less time working with direct database manipulation. I'd rather spend my time rewriting the HTML instead of fighting with the tools.
In general I guess people have noticed by now that forum activity on all forums have gone down the past three or four years by now. Facebook eats activity, but I think another reason is that forums as a medium haven't evolved well enough with the times.
(2013-10-20, 09:09 PM)Merri Wrote: [ -> ]Templates in database! Why not in filesystem whyyyyyy! It makes me feel like I'm wasting my life doing something I shouldn't be wasting my time on in the first place, only because of the added layer of getting things changed.
If you use Sublime Text this might ease the pain a little:
http://community.mybb.com/thread-144390.html
Thanks, it does ease it. Although it took me a while to get it working as I initially downloaded version 2 and not the required 3.
Progress:
- Have reindented a few files.
- DOCTYPE html
- A few link lists changed to ul li
- Lots of BEM CSS classes added
- Lots of CSS changes (removing old now-unused stuff and unnecessary backwards browser support)
The visual end result remains nearly identical with 1.6 default theme. I've let myself do some minor margin and padding changes that I've considered visually better.
Most of re-writing header HTML is complete:
<!-- start: header -->
<div class="mybb">
<div class="mybb-header">
<div class="mybb-header__logo">
<a class="mybb-header__logo-link" href="http://localhost/MyBB_16/index.php">
<img class="mybb-header__logo-image" src="http://localhost/MyBB_16/images/logo.gif" alt="Forums" title="Forums" />
</a>
</div>
<ul class="mybb-header__menu">
<li class="mybb-header__menu-item">
<a class="mybb-header__menu-link mybb-header__menu-link--search" href="http://localhost/MyBB_16/search.php">
Search
</a>
</li>
<li class="mybb-header__menu-item">
<a class="mybb-header__menu-link mybb-header__menu-link--memberlist" href="http://localhost/MyBB_16/memberlist.php">
Member List
</a>
</li>
<li class="mybb-header__menu-item">
<a class="mybb-header__menu-link mybb-header__menu-link--calendar" href="http://localhost/MyBB_16/calendar.php">
Calendar
</a>
</li>
<li class="mybb-header__menu-item">
<a class="mybb-header__menu-link mybb-header__menu-link--help" href="http://localhost/MyBB_16/misc.php?action=help">
Help
</a>
</li>
</ul>
<div class="mybb-header__panel">
<!-- start: header_welcomeblock_member -->
<div class="mybb-quick-login mybb-header__panel-user mybb-header__panel-user--guest">
<span class="mybb-header__panel-user-welcome"><strong>Welcome back, <a href="http://localhost/MyBB_16/member.php?action=profile&uid=1">Merri</a></strong>. You last visited: Today, 18:20</span>
<ul class="mybb-header__panel-user-menu">
<li class="mybb-header__panel-user-menu-item mybb-header__panel-user-menu-item--user-cp">
<a class="mybb-header__panel-user-menu-link" href="http://localhost/MyBB_16/usercp.php">User CP</a>
</li>
<li class="mybb-header__panel-user-menu-item mybb-header__panel-user-menu-item--buddy-list">
<a class="mybb-header__panel-user-menu-link" href="http://localhost/MyBB_16/misc.php?action=buddypopup">Open Buddy List</a>
</li>
<!-- start: header_welcomeblock_member_moderator -->
<li class="mybb-header__panel-user-menu-item mybb-header__panel-user-menu-item--mod-cp">
<a class="mybb-header__panel-user-menu-link" href="http://localhost/MyBB_16/modcp.php">Mod CP</a>
</li>
<!-- end: header_welcomeblock_member_moderator -->
<!-- start: header_welcomeblock_member_admin -->
<li class="mybb-header__panel-user-menu-item mybb-header__panel-user-menu-item--admin-cp">
<a class="mybb-header__panel-user-menu-link" href="http://localhost/MyBB_16/admin/index.php">Admin CP</a>
</li>
<!-- end: header_welcomeblock_member_admin -->
<li class="mybb-header__panel-user-menu-item mybb-header__panel-user-menu-item--logout">
<a class="mybb-header__panel-user-menu-link" href="http://localhost/MyBB_16/member.php?action=logout&logoutkey=6dd835d3705e76b1e2c08a66f7d93f2b">Log Out</a>
</li>
</ul>
<ul class="mybb-header__panel-user-msg-menu">
<li class="mybb-header__panel-user-msg-menu-item mybb-header__panel-user-msg-menu-item--new-posts">
<a href="http://localhost/MyBB_16/search.php?action=getnew">View New Posts</a>
</li>
<li class="mybb-header__panel-user-msg-menu-item mybb-header__panel-user-msg-menu-item--todays-posts">
<a href="http://localhost/MyBB_16/search.php?action=getdaily">View Today's Posts</a>
</li>
<li class="mybb-header__panel-user-msg-menu-item mybb-header__panel-user-msg-menu-item--private">
<a href="http://localhost/MyBB_16/private.php">Private Messages</a> (Unread 0, Total 0)
</li>
</ul>
</div>
<div class="mybb-current-time mybb-header__panel-current-time"><strong>Current time:</strong> 22.10.2013, 18:36</div>
<!-- end: header_welcomeblock_member -->
</div>
</div>
<div id="mybb-content" class="mybb-content">
Style is identical to the original despite being in strict standards mode, moving menu images to CSS and using list elements for link lists. Some functionality (buddy as popup, quick login form) has been removed because JavaScript has to be rewritten to make things work.
The classes here are in BEM CSS style. While lengthy they also give many advantages, which I'll omit here unless someone asks for it.
Minor detail but as it does matter a little: yes, the code is perfectly indented. Much easier to follow code blocks
It's nice to see someone using BEM in MyBB. For those not familiar, this is a great article on the matter:
http://csswizardry.com/2013/01/mindbemdi...em-syntax/
Any reason why you're not using the HTML5 semantic tags? <header> and <nav> in this case? There's also a new <main> tag, which makes perfect sense alongside <header> and <footer>.
To put it short'n'sweet: IE8 and initial thought of not adding any new files. IE8 needs html5shiv so that elements get style. IE8 is still common enough that is must be supported for a few months, maybe until end of next year. Depends how quickly it goes well below 1% in market share after XP support ends.
However last night I did add AngularJS and wrote support to open Buddy List as a popup on page, and if I stay on that line and keep it then it is all the same to add more files.
And if using these is fine then I probably end up adding normalize.css as well.
The problem with these efforts (which, don't get me wrong, are great in themselves) is maintainability. Both plugins and future updates will break templates and it just causes headaches. For the average user of MyBB, this is entirely undesirable as half barely know how to install a plugin, never mind resolve template conflicts.
I can as well say MyBB's template system is entirely undesirable, unmaintainable, unfit for plugins and is the main cause for headaches.
I attempt to do something great here despite the above statement. My goal is to make it so good MyBB wants to make it THE template, however utopist that may be. Or so good that most users want to choose it as THE template and thus generate user demand on plugin makers to add support for it. Only then maintainability becomes a true issue.
You achieve nothing by negativity. I don't want to switch forum software (or spend the time going through the project again) so if I have to spend time to do a template properly for my own use I will do it with high quality, make it fit for general use and I will share it. Anything after that is a bonus.