244 lines
10 KiB
PHP
244 lines
10 KiB
PHP
@extends('template.'.config('settings.template').'.content.master')
|
|
@section('content')
|
|
|
|
|
|
<div class="container">
|
|
|
|
<section>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h1 class="mt-5 mb-4">Create your own Lumino Theme</h1>
|
|
|
|
<p class="fs-4 mt-4">
|
|
Here you find all the ressources you need to develop your own Lumino theme from scratch.
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h2 class="mt-4 mb-3">Get the minimal Demo Theme</h2>
|
|
<p class="fs-5">
|
|
This will help you getting started in no time. Use our boilerplate to start ajusting the theme to your needs.
|
|
<br>
|
|
Basic functionalities included.
|
|
</p>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-md-8 offset-md-2">
|
|
<a href="" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|
<img src="https://themes.getlumino.com/uploads/contents/neuschwanstein-theme.png" class="rounded mx-0">
|
|
</a>
|
|
<br>
|
|
|
|
<a class="btn d-block mt-4 btn-lg bg-blue4 text-white" data-bs-toggle="modal" data-bs-target="#install-theme">
|
|
|
|
<svg style="fill: currentColor; width: 24px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M543.7 200.1C539.7 142.1 491.4 96 432 96c-7.6 0-15.1.8-22.4 2.3C377.7 58.3 328.1 32 272 32c-84.6 0-155.5 59.7-172.3 139.8C39.9 196.1 0 254.4 0 320c0 88.4 71.6 160 160 160h336c79.5 0 144-64.5 144-144 0-61.8-39.2-115.8-96.3-135.9zM496 432H160c-61.9 0-112-50.1-112-112 0-56.4 41.7-103.1 96-110.9V208c0-70.7 57.3-128 128-128 53.5 0 99.3 32.8 118.4 79.4 11.2-9.6 25.7-15.4 41.6-15.4 35.3 0 64 28.7 64 64 0 11.8-3.2 22.9-8.8 32.4 2.9-.3 5.9-.4 8.8-.4 53 0 96 43 96 96s-43 96-96 96zM387 256h-67v-84c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5z"/></svg>
|
|
Install this Theme
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
<h2>Learn about the Lumino Key Concepts</h2>
|
|
<br>
|
|
<h4>Content</h4>
|
|
<p class="fs-5">
|
|
A <i>content</i> is every information that is published on the Website. Every content is defined by its content type and inherits all the atributes from it.
|
|
</p>
|
|
<br>
|
|
|
|
<h4>List</h4>
|
|
<p class="fs-5">
|
|
A <i>list</i> is a collection of contents or users. You can create unlimited lists with different includes and filters. For each list you can define its own list design.
|
|
|
|
</p>
|
|
<br>
|
|
|
|
<h4>Page</h4>
|
|
<p class="fs-5">
|
|
A page can be a static HTML page or display contents.
|
|
</p>
|
|
<br>
|
|
|
|
<h4>Content Typpe</h4>
|
|
<p class="fs-5">
|
|
A content type defines the fields a content consists of. This is made through Content Type Fields.
|
|
<br>
|
|
Example: A Content Car could consist of Content Type fields "Brand", "Color", "Fabrication date" and "Location"
|
|
</p>
|
|
<br>
|
|
|
|
<h4>Content Typpe Fields</h4>
|
|
<p class="fs-5">
|
|
A content type field is what defines a content type.
|
|
<br>
|
|
List of available content type fileds:
|
|
<br>
|
|
<ul>
|
|
<li>Text</li>
|
|
<li>Textfield</li>
|
|
<li>email</li>
|
|
<li>url</li>
|
|
<li>color</li>
|
|
<li>number</li>
|
|
<li>location</li>
|
|
<li>regex</li>
|
|
</ul>
|
|
</p>
|
|
<br>
|
|
|
|
<h4>User</h4>
|
|
<p class="fs-5">
|
|
A <i>user</i> is everyone that can log in to the system. Each user belongs to one usergrroup from where the user inherits its
|
|
permissions and custom fields.
|
|
</p>
|
|
<br>
|
|
|
|
|
|
<h4>Usergroup</h4>
|
|
<p class="fs-5">
|
|
A <i>usergroup</i> defines the users permissions and any additionl information about the user.
|
|
|
|
</p>
|
|
<br>
|
|
|
|
|
|
<h4>List Group</h4>
|
|
<p class="fs-5">
|
|
A <i>listgroup</i>is a "list of lists". That means that it consits of multiple lists that share the same or similar characteritics.
|
|
<br>
|
|
Example: The Lists "London", "Sydney", "Boston and "Rio de Janeiro" could be brought together in the List "Cities".
|
|
</p>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
|
|
<h2>Read the Lumino Theme Developer Documentation</h2>
|
|
<p class="fs-5">
|
|
For full reference please refer to the <a href="#">Lumino Developer Documentation</a>
|
|
<br>
|
|
Basic functionalities included.
|
|
</p>
|
|
<br>
|
|
<small>This site is still under construction.</small>
|
|
|
|
|
|
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="modal fade" id="install-theme" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content" style="background-color: #f7fafc">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Install new Lumino Theme</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="formType" enctype="multipart/form-data">
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-10 offset-1 mt-4">
|
|
<div class="form-group input-group-lg">
|
|
<input type="text" class="form-control" readonly value="git@code.areya.de:Areya/neuschwanstein-theme.git" id="cweb-directory" >
|
|
<label id="lweb-directory" for="cweb-directory" class="small mt-3 text-muted">Paste this Lumino Theme URL into your Lumino Theme Installation Dialog</label>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row" id="how-to-install">
|
|
<div class="col-10 offset-1">
|
|
<br>
|
|
<hr class="mt-4 mb-4">
|
|
<br>
|
|
</div>
|
|
<div class="col-10 offset-1">
|
|
<h4>How to install a new Lumino Theme</h4>
|
|
<br>
|
|
</div>
|
|
<div class="col-2 offset-1 mb-3">
|
|
<div style="background-color: #5842bc; height: 50px; width: 50px; color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
|
|
1.
|
|
</div>
|
|
</div>
|
|
<div class="col-9 mt-2">
|
|
Log in to your Lumino Admin and navigate to Configutations -> Theme
|
|
</div>
|
|
<div class="col-2 offset-1 mb-3">
|
|
<div style="background-color: #5842bc; height: 50px; width: 50px; color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
|
|
2.
|
|
</div>
|
|
</div>
|
|
<div class="col-9 mt-2">
|
|
Stelle sicher, dass das Theme deine Lumino Version <span class="fw-bold" style="color: #6c23d7; font-size: 15px;">3.6</span> unterstützt.
|
|
</div>
|
|
<div class="col-2 offset-1 mb-3">
|
|
<div style="background-color: #5842bc; height: 50px; width: 50px; color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
|
|
3.
|
|
</div>
|
|
</div>
|
|
<div class="col-9 mt-2">
|
|
Kopiere die Installations URL von der Seite und fühe es in die obere Maske ein.
|
|
</div>
|
|
<div class="col-2 offset-1 mb-3">
|
|
<div style="background-color: #5842bc; height: 50px; width: 50px; color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
|
|
4.
|
|
</div>
|
|
</div>
|
|
<div class="col-9 mt-2">
|
|
After Verification Theme can be installed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@stop
|
|
|
|
|
|
|