1.6 Compatible: Adding LESS CSS support to MyBB
#1
This tutorial requires a Core Modification. Follow this at your own risk.

Unfortunately, due to how MyBB works (in particular the recache_stylesheet() function), once you save a stylesheet with this code in place, you will lose the LESS code and only the compiled CSS will be stored. There is not much I can do about this and sometimes it doesn't happen at all.

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 personal 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:
@base24px;
@
border-color#B2B;

.underline border-bottom1px solid green }

#header {
  
colorblack;
  
border1px solid @border-color #222222;

  
.navigation {
    
font-size: @base 2;
    
{
    .
underline;
    }
  }
  .
logo {
    
width300px;
    :
hover text-decorationnone }
  }


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; } 


Attached Files
.xml   patches-LESSCSSparse (1).xml (Size: 1.37 KB / Downloads: 1)
.php   lessc.inc.php (Size: 31.94 KB / Downloads: 0)
Reply
#2
The title is confusing Toungue
Reply
#3
Haha, true Sama. Didn't think of that when I wrote it Wink
Reply