88 lines
3.0 KiB
Markdown
88 lines
3.0 KiB
Markdown
# Themes
|
|
|
|
In this section we'll teach you how to create a new theme, reference a theme view, and add theme options for your particular theme.
|
|
|
|
- [Create a Theme](#create-theme)
|
|
- [Theme Views](#theme-views)
|
|
- [Theme Options](#theme-options)
|
|
- [Theme Assets](#theme-assets)
|
|
|
|
---
|
|
|
|
<a name="create-theme"></a>
|
|
## Create a Theme
|
|
|
|
In order to create a theme, you will need to create a new folder inside of `resources/views/themes`. Let's call this folder `sample-theme`. Then inside of this folder we need a matching filename called `sample-theme.json`:
|
|
|
|
```json
|
|
{
|
|
"name": "Sample Theme",
|
|
"version": "1.0"
|
|
}
|
|
```
|
|
|
|
Now, if you visit `/admin/themes`, you'll see this new theme available to activate.
|
|
|
|
> You may see a broken image in the admin if you do not have an image for that theme. Inside of your theme folder you will need a `.jpg` file with the same name as the folder `sample-theme.jpg` (recommended 800x500px)
|
|
|
|
<a name="theme-views"></a>
|
|
## Theme Views
|
|
|
|
After activating a theme you can render any view `file.blade.php` or `file.php` by calling `theme::file`.
|
|
|
|
For instance, if we created a new file inside our sample theme at `resources/views/themes/sample-theme/home.blade.php` we could then return the view in a controller like so:
|
|
|
|
```php
|
|
public function home(){
|
|
return view('theme::home');
|
|
}
|
|
```
|
|
|
|
Or, you could do this inside of your route file:
|
|
|
|
```php
|
|
Route::view('/', 'theme::home');
|
|
```
|
|
|
|
<a name="theme-options"></a>
|
|
## Theme Options
|
|
|
|
Every theme can include options such as logo, color scheme, etc... You can choose to program any amount of options into your theme.
|
|
|
|
In order to create an *options* page for your theme you need to create a new file inside your theme folder called `options.blade.php`. As an example take a look at the Tailwind theme options located at `resources/views/themes/tailwind/options.blade.php`, you will see a snippet similar to:
|
|
|
|
```php
|
|
<div id="branding" class="tab-pane fade in active">
|
|
|
|
{!! theme_field('image', 'logo', 'Site Logo') !!}
|
|
|
|
{!! theme_field('image', 'footer_logo', 'Footer Logo') !!}
|
|
|
|
</div>
|
|
```
|
|
|
|
This will allow us to create some dynamic theme fields. This is powered by the [DevDojo Themes Package](https://github.com/thedevdojo/themes). You can easily create input fields for your theme options.
|
|
|
|
For more information about the different type of fields be sure to visit the themes package located at [https://github.com/thedevdojo/themes](https://github.com/thedevdojo/themes)
|
|
|
|
<a name="theme-assets"></a>
|
|
## Theme Assets
|
|
|
|
The current themes use Webpack to mix their assets. In order to run the assets for each theme you will need to go into the theme folder and run:
|
|
|
|
```javascript
|
|
npm run watch
|
|
```
|
|
|
|
Additionally, to compile the assets and make them production ready, you'll need to use:
|
|
|
|
```javascript
|
|
npm run production
|
|
```
|
|
|
|
> Before compiling assets in each theme you may need to include the asset dependencies by running `npm install` inside of the theme folder.
|
|
|
|
---
|
|
|
|
Now, you can quickly and easily create configurable themes for your application 🎉
|