Customizing AdminLTE - mhulse/mhulse.github.io GitHub Wiki
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.