You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
Themes consist of basic **css** located in **www/html/_assets/themes**. The css folder names represent the themes.
|
|
Each folder should have the following files :
|
|
<div class="border border-round" style="display:grid; grid-template-columns:auto auto; gap:4px; width:96%; text-transform:capitalize">
|
|
<div class="bold border-bottom" style="background-color:#f3f3f3; padding:4px;">Files (.css extensions)</div><div class="border-bottom bold" style="background-color:#f3f3f3; padding:4px;">Description</div>
|
|
<div>borders</div><div> styling of borders (top,bottom,right,left,round)</div>
|
|
<div>footer</div><div>styling the footer</div>
|
|
<div>header</div><div>styling the footer</div>
|
|
<div>layout</div><div>The general layout for a site and how to organize different panes</div>
|
|
<div>menu</div><div>styling the menu</div>
|
|
<div>pane</div><div>styling secondary pane, it's position and visibility depends on the theme</div>
|
|
</div>
|
|
|
|
### Setup themes
|
|
|
|
**QCMS** CLI interface allows to query the backend to determine available themes, in three simple phases described below
|
|
|
|
<div class="source-code">
|
|
#1. Listing available themes<br>
|
|
$ qcms list-themes
|
|
</div>
|
|
|
|
<div class="source-code">#2. Selecting and applying theme<br>
|
|
$ qcms set-theme magazine</div>
|
|
|
|
<div class="source-code"># Verifying themes set<br>$ ls www/html/_assets/themes </div>
|
|
|
|
|
|
### Custom Themes
|
|
|
|
**QCMS** supports custom themes or user-defined themes. Build custom theme manually in three simple steps:
|
|
|
|
<div class="source-code">
|
|
# 1. copy default theme to new folder (www/html/_assets/theme/mytheme)<br>
|
|
$ cp -r www/html/_assets/themes/default www/html/_assets/themes/mytheme
|
|
</div>
|
|
|
|
<div class="source-code">
|
|
# 2. update configuration file to enable configuration<br>
|
|
{
|
|
"system":{
|
|
"theme":"mytheme"
|
|
...
|
|
}
|
|
}</div>
|
|
|
|
<div class="source-code">
|
|
# 3. set the theme and reload the your app (from the app folder)<br>
|
|
$ qcms set-theme magazine
|
|
</div> |