MyBB Community Forums

This tutorial will show you how to add support for LESS CSS to the MyBB. For this tutorial, we will be making edits to a core file. You can either do this manually or via the Patches plugin. Personally, I prefer the latter (just because it makes life easier once you have a few core edits in place) though i's up to eprsonal preference. For those wanting to use the patches plugin, simply download the patches file below and import it (NOTE: if you have a different name than /admin/ for your admin directory, you'll have to change the patch slightly to point to your admin directory).

No matter what method you're using though, you'll need to download the attached lessc.inc.php file and upload it to you /admin/inc/ directory.


Ok, so now to actually make the change. Open the /admin/inc/functions_themes.php file using your editor of choice (notepad++ for myself). Find the following line of code:

	$stylesheet = parse_theme_variables($stylesheet, $theme_vars);

Before this line, add the following:

	require_once 'lessc.inc.php';
	$less = new lessc();
	$stylesheet = $less->parse($stylesheet);

Simple. That's all there is to it! Now, time to test if your new edit works. head to the styles and templates area of the ACP and open up a theme's CSS file. Scroll down to the bottom of the file and add the following code:

@base: 24px;
@border-color: #B2B;

.underline { border-bottom: 1px solid green }

#header {
  color: black;
  border: 1px solid @border-color + #222222;

  .navigation {
    font-size: @base / 2;
    a {
    .underline;
    }
  }
  .logo {
    width: 300px;
    :hover { text-decoration: none }
  }
}

Save the CSS file and when you scroll back down to where you inserted the new LESS, there should be some translated CSS content that looks like this:

.underline { border-bottom:1px solid green; }
#header {
  color:black;
  border:1px solid #dd44dd;
}
#header .navigation { font-size:12px; }
#header .navigation a { border-bottom:1px solid green; }
#header .logo { width:300px; }
#header .logo:hover { text-decoration:none; }

Sorted. You can now write LESS right into your stylesheets. The only problem is in the way that the MyBB cache works. My original plan was to store pure LESS in the database, then convert it to CSS only within the cache file. However, MyBB watches fo changes to the cache file and updates the database style with that of the cache content. No matter - the outcome works as intended to an extent (though theme authors can't distribute LESS powered themes - which would have been cool). We could always go the whole way and basically rewrite a ton of the cache and get what we want, but things work as is, so let's leave it at that for now.

NOTE: If you don't fancy editing core files in any way, you can always use the LESS.js translator - though it slows down client-side page rendering slightly and I haven't tested if it'll work with mybb (as you'd have to rename .css files to .less...). If that doesn't matter to you though, I'd go for it - that way you can keep your LESS saved for easy editing

Very nice!

Thanks Please note the end part of the tutorial though - original LESS content isn't saved for distribution - which is a pity. It still helps speed up theme development though.

Its neat and useful =)

Doesn't work for me

Do you get any kind of error at all?

Pretty sure I replied to this thread regarding an issue with MyBB syncing back the compressed file back.

Weeks ago I wrote (Ripped) my own code (probably will try yours to compare compression levels and so).

Well, the issue was the resync_stylesheet(); function, just change this:

function resync_stylesheet($stylesheet)
{

To:

function resync_stylesheet($stylesheet)
{return false;

There you go, since you don't care about the compressed code being synced back with the ACP style sheet there should be no problems (AFAIK).

Yeah, that's always been an issue. I implemented pretty much the same as you did to sort it too