Themes
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.
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
.
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
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') }}">
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
.
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.