Using and developing themes

Themes

---

• Folder structure
• Commands
• Linking to theme assets
• Display a theme page
• Elixer publish helper

In this section we will go over on how to create and manage themes. You can view a demo frontend, Flatly theme and demo backend theme for your inspiration.

Folder structure

A theme has to have a theme.json file which will contain the theme name, its description and type (frontend | backend). All your views will be located in the views directory. Those views will use assets that are located in the assets folder. This asset folder will be published in the public directory. I'd recommend placing your less, sass, coffeescript files inside a resources folder which thanks to gulp will be published to the assets folder.

You can create a theme by creating a folder inside the Themes folder.

This would be a typical type structure:

.
Themes/
├── Demo
│   ├── assets
│   |   └── js
│   |   ├── css
│   |   ├── fonts
│   |   ├── img
│   ├── resources
│   |   └── less
│   |   ├── coffee
│   ├── views
│   ├── bower.json
│   ├── composer.json
│   ├── gulpfile
│   ├── theme.json
│   ├── package.json

A theme.json file looks like this:

{
  "name": "AdminLTE",
  "description": "This is an administration theme",
  "type": "backend"
}

The theme.json file has to have a type key. This has to be either backend or frontend.

The primary difference between both, beyond the obvious reason, is that the backend theme won't show up in the settings module in the theme dropdown.

To set a backend theme, you need to edit the config/asgard.core.core.php config file and set the admin-theme option. The has to correspond with the name key in module.json.

Commands

As you can see the assets live in the Themes folder in the root directory. To publish the assets to the public directory and make the accessible to the webserver, you have to use a publish command:

php artisan asgard:publish:theme

Linking to theme assets

To link to a theme asset you can use the following helpers:

{!! Theme::style('css/vendor/bootstrap.min.css') !!}

{!! Theme::script('js/vendor/jquery.min.js') !!}

These will directly output the <style> and <script> tags.

If you want to directly get a URL of a resource you can use the following helper:

<link rel="shortcut icon" href="{{ Theme::url('favicon.ico') }}">

Display a theme page

To display a page from a theme, or using its layout, there is nothing new; use the View::make as normal.

For instance if you have set the active theme to Demo, when you use View::make('index'), it'll check for the page inside your Demo theme folder Themes/demo/index.blade.php.

Elixir publish helper

Since all assets need to be published to the public/ folder you can use the following custom mix for Laravel Elixir.

Place this at the top of your Gulpfile:

var gulp = require("gulp");
var shell = require('gulp-shell');
var elixir = require('laravel-elixir');
var themeInfo = require('./theme.json');

var Task = elixir.Task;

elixir.extend('stylistPublish', function() {
    new Task('stylistPublish', function() {
        return gulp.src("").pipe(shell("php ../../artisan stylist:publish " + themeInfo.name));
    });
});

With this defined, in your Gulpfile you can now do the following:

mix
    .less([
       "main.less"
    ])
   .stylistPublish();

Elixir will now compile main.less, and publish the compiled css to the public/ folder.