Skip to content

Customizing AdminLTE

Jump to bottom
Michael Hulse edited this page Dec 29, 2016 · 3 revisions

Download latest release from the AdminLTE GitHub releases page.

Move those files into your project’s repo (e.g. myproject).

Next, normalize file permissions:

$ find myproject/ -type f -exec chmod 0664 {} \;
$ find myproject/ -type d -exec chmod 0775 {} \;

… and remove any extended attributes:

$ xattr -rc myproject/

Clean up repo

Add to README.md:

# For more information, check out [this repo’s Wiki](../../wiki).

Change package.json to look like:

{
  "name": "animovil-theme",
  "version": "0.1.0",
  "main": "dist/js/app.min.js",
  "repository": {
    "type": "git",
    "url": "git://bitbucket.org/ieq/animovil-theme.git"
  },
  "scripts": {
    "start": "grunt"
  },
  "devDependencies": {
    "grunt-bootlint": "^0.9.1",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-csslint": "^0.5.0",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-less": "^0.12.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt": "~0.4.5"
  }
}

Update the Gruntfile.js to look something like this:

module.exports = function(grunt) {
	'use strict';
	grunt.initConfig({
		connect: {
			server: {
				options: {
					livereload: true
				}
			}
		},
		watch: {
			files: [
				'build/less/*.less',
				'build/less/skins/*.less',
				'dist/js/app.js'
			],
			tasks: [
				'less',
				'uglify'
			]
		},
		less: {
			development: {
				options: {
					compress: false
				},
				files: {
					'dist/css/AdminLTE.css': 'build/less/AdminLTE.less',
					'dist/css/skins/skin-blue.css': 'build/less/skins/skin-blue.less',
					'dist/css/skins/skin-black.css': 'build/less/skins/skin-black.less',
					'dist/css/skins/skin-yellow.css': 'build/less/skins/skin-yellow.less',
					'dist/css/skins/skin-green.css': 'build/less/skins/skin-green.less',
					'dist/css/skins/skin-red.css': 'build/less/skins/skin-red.less',
					'dist/css/skins/skin-purple.css': 'build/less/skins/skin-purple.less',
					'dist/css/skins/skin-blue-light.css': 'build/less/skins/skin-blue-light.less',
					'dist/css/skins/skin-black-light.css': 'build/less/skins/skin-black-light.less',
					'dist/css/skins/skin-yellow-light.css': 'build/less/skins/skin-yellow-light.less',
					'dist/css/skins/skin-green-light.css': 'build/less/skins/skin-green-light.less',
					'dist/css/skins/skin-red-light.css': 'build/less/skins/skin-red-light.less',
					'dist/css/skins/skin-purple-light.css': 'build/less/skins/skin-purple-light.less',
					'dist/css/skins/_all-skins.css': 'build/less/skins/_all-skins.less'
				}
			},
			production: {
				options: {
					compress: true
				},
				files: {
					'dist/css/AdminLTE.min.css': 'build/less/AdminLTE.less',
					'dist/css/skins/skin-blue.min.css': 'build/less/skins/skin-blue.less',
					'dist/css/skins/skin-black.min.css': 'build/less/skins/skin-black.less',
					'dist/css/skins/skin-yellow.min.css': 'build/less/skins/skin-yellow.less',
					'dist/css/skins/skin-green.min.css': 'build/less/skins/skin-green.less',
					'dist/css/skins/skin-red.min.css': 'build/less/skins/skin-red.less',
					'dist/css/skins/skin-purple.min.css': 'build/less/skins/skin-purple.less',
					'dist/css/skins/skin-blue-light.min.css': 'build/less/skins/skin-blue-light.less',
					'dist/css/skins/skin-black-light.min.css': 'build/less/skins/skin-black-light.less',
					'dist/css/skins/skin-yellow-light.min.css': 'build/less/skins/skin-yellow-light.less',
					'dist/css/skins/skin-green-light.min.css': 'build/less/skins/skin-green-light.less',
					'dist/css/skins/skin-red-light.min.css': 'build/less/skins/skin-red-light.less',
					'dist/css/skins/skin-purple-light.min.css': 'build/less/skins/skin-purple-light.less',
					'dist/css/skins/_all-skins.min.css': 'build/less/skins/_all-skins.less'
				}
			}
		},
		uglify: {
			options: {
				mangle: true,
				preserveComments: 'some'
			},
			my_target: {
				files: {
					'dist/js/app.min.js': ['dist/js/app.js']
				}
			}
		},
		jshint: {
			options: {
				jshintrc: '.jshintrc'
			},
			core: {
				src: 'dist/js/app.js'
			},
			demo: {
				src: 'dist/js/demo.js'
			},
			pages: {
				src: 'dist/js/pages/*.js'
			}
		},
		csslint: {
			options: {
				csslintrc: 'build/less/.csslintrc'
			},
			dist: [
				'dist/css/AdminLTE.css'
			]
		},
		bootlint: {
			options: {
				relaxerror: [
					'W005'
				]
			},
			files: [
				'pages/**/*.html',
				'*.html'
			]
		}
	});
	grunt.loadNpmTasks('grunt-bootlint');
	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-csslint');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-less');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask(
		'lint', [
			'jshint',
			'csslint',
			'bootlint'
		]
	);
	grunt.registerTask(
		'default', [
			'lint',
			'connect',
			'watch'
		]
	);
};

Replace the contents of .gitignore with this file and add this to end:

# PROJECT-SPECIFIC #
####################

node_modules/

Add these .gitattributes file and .editorconfig files.

Final directory structure should look like:

Install dependencies:

$ cd myproject/
$ npm install

Add the Grunt.js CLI:

$ npm install grunt-cli --save-dev

Now that our build tool is setup, run run the app:

$ npm start

Open http://localhost:8000 in your browser.

Next, navigate to the build/less folder; we will customize variables.less and AdminLTE.less.

Look at build/less/AdminLTE.less, if there’s anything not needed, feel free to comment it out.

Open build/less/variables.less and modify the variables to achieve the desired end look/feel.

Links

Clone this wiki locally