How can I change / customize less/css files for admin pages?


#1

Hello all. I just started with Preside. How can I change / customize less/css files for admin pages?


#2

Welcome - and good question :slightly_smiling_face:. A couple of ways:

  1. override /layouts/admin.cfm and create a completely new layout that includes whatever different CSS you want. Copy from original layout in preside core. Downside - you don’t get any upstream layout changes in preside automatically when you upgrade

  2. Preferred: Hook into core Coldbox preLayoutRender interception point. in your interceptor add your custom overrides css /js:

    component extends="coldbox.system.Interceptor" {
    
    // PUBLIC
        public void function configure() {}
    
        public void function preLayoutRender( required any event ) {
            if ( event.isAdminRequest() ) {
                // these include IDs must be defined in your /assets/StickerBundle.cfc
                event.include( "/css/admin/myapp-core-preside-overrides/" )
                     .include( "/js/admin/myapp-core-preside-overrides/" );
            }
        }
    }
    
    

You would need to define your overrides in a StickerBundle.cfc in your /assets folder (see http://sticker.readthedocs.io/en/latest/ for sticker docs)

Hint, all the sticker api methods are available in coldbox event object:

event.include(...)
event.includeData(...)
event.renderIncludes( ... )

To register the interceptor in option 2 (preferred), create that CFC in my example above in /yourapp/application/interceptors/AdminLayoutInterceptor.cfc (this location could be anything, but we like to put them there as a convention). Then, in /yourapp/application/config/Config.cfc$configure() add this:

// ...
interceptors.append( { 
      class      = "app.interceptors.AdminLayoutInterceptor"
    , properties = {} 
} );
// ...

That registers your interceptor so that it will listen for the preLayoutRender() announcement and execute its code.


#3

So my css are appended to admin pages, but how to use Less?


#4

We don’t attempt to do any asset pre-compiling as part of either Preside or Sticker. There are better developed tools out there for the job (Grunt, Gulp, or whatever you wish). Sticker simply maps your compiled assets to IDs that can be referenced in the code.

In our processes, we use Grunt to compile our assets and add a cachebuster (hash of file contents) to the actual file names of produced min.css / min.js files. Then sticker maps those files using a pattern match to make consistent non changing asset IDs to use in the application with event.include(), etc.

Make sense?