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:
PHP Code:
$stylesheet = parse_theme_variables($stylesheet, $theme_vars);
Before this line, add the following:
PHP Code:
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:
PHP 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:
PHP Code:
.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
DOWNLOAD
