Themes (new)

Introduced in v1.3.0

A theme is a collection of files that works together to create the design and add functionality to your site.

Benefits of Junker themes

  • It separates the styles and templates from the system files so the site will upgrade without drastic changes to the visual presentation of the site.
  • Allows customizing the look and feel of the website.
  • Allows to quickly change from theme to theme.

Theme’s Namespaces

Themes are based on namespaces, it’s just a fancy word to describe “sections” of your website. Junker has 3 theme namespaces so far:

Namespace Description
frontend The main public area of the website.
administration The administration area of the website.
email Email templates.

Each namespace has their own set of template files.

Base themes

Base themes are the default themes that comes with every Junker installation.

Namespace Theme
frontend junker
administration adminlte
email junkeremail

These base themes includes all the required template files required for the namespace.

Overview of theme files

Junker themes uses two locations:

resources/themes
For all the theme’s templates/view files.
public/assets/themes
For all the theme’s assets (CSS, JavaScript, Images, etc).

For example, a theme named “test” would reside in the directory resource/themes/test/ and if the theme have assets, those assets would reside in public/assets/themes/test/.

Important

If you’re using a custom public path other than “public” (i.e.: “public_html”), you’ll need to manually move the theme’s assets directory to the correct location.

Note

Junker use the name of the enclosing folder of the theme as the internal theme name.

The theme.php file

All themes, no matter the namespace it belongs, must have a theme.php file. This file is used as an “entry-point” to the application.

Example file

The following example shows the Junker theme.php file for the Junker Default theme:

<?php

return [
    'name' => 'Junker Default',
    'description' => 'Designed exclusively for Junker, created with <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>.',
    'author' => 'Gerardo Báez',
    'version' => 'v1.0.0',
    'previewImage' => 'images/preview.png',
    'namespace' => 'frontend',
];

Possible theme configurations and their definition

Key Description Required?
name Name of the theme, can be any string. YES
description A brief description of the theme, can include HTML (like links, etc). YES
author The author of the theme NO
version Version of the theme (e.g.: v1.0.0) NO
previewImage Theme thumbnail (screenshot, etc) (Path relative to the theme’s directory. NO, but recommended
namespace Namespace which the theme belongs to (frontend, administration, email) YES
extends Theme to extends (must be installed, value is the internal name of the theme) YES

Child themes

The simplest theme possible is a child theme which includes only a CSS file, plus any images. Of course, you can extend a theme and override any file you want (including theme’s JavaScript files and template files).

Template files

The template files are PHP source files used to generate pages requested by the visitors. Themes uses Laravel’s Blade Template Engine.

Creating/Extending a theme

First, determine what namespace you want to modify.

Once you know what namespace you want to change, locate and duplicate the base theme for that particular section.

Open the theme.php file of the cloned theme and update all the necessary information.

If you are extending another theme, add the following:

'extends' => 'enter-the-theme-internal-name-here'

To enable your new theme, in your administration panel, go to Settings > Appearance > Themes, and select the theme you just created.