Content: 40 html website templates, Install another CMS, Simple menu, News, HTTP security headers, HTML5 audio and video playlist.
40 html website templates
Some responsive W3.CSS website templates.
Install another CMS
Before installing another CMS verify you have installed PHP and Sqlite3 extension. On Debian server it would be like apt-get install php-fpm php-sqlite3 php-gd.
- Download and unzip the archive
- Upload the CMS files to the desired location on your web server
- Run the setup script from web browser http://domain/setup/index.php
- Once configuration is successfully finished remove the setup folder
Simple menu
In case you need to display on page one particular level of menu create template first.
1. Go to Home -> Modules -> File Manager. Open the file /templates/menu_top.tpl in text editor, put the code and save:
<div class="w3-bar w3-teal w3-card w3-medium">
{section name=custom loop=$menu_tree}
{if $menu_tree[custom].active>0 and $menu_tree[custom].level==1 and $menu_tree[custom].content_type ne 'folder'}
<a href="{$menu_tree[custom].name}" class="w3-bar-item w3-button w3-padding-medium">{$menu_tree[custom].title}</a>
{/if}
{/section}
</div>
2. Then go to Home -> Modules -> Web Pages
3. and assign new template to menu items
4. Open the page in web browser and verify result
News
If the website is updated regularly, a news area makes sense. First create a template.
1. Go to Home -> Modules -> File Manager Open the file /templates/content_news.tpl in text editor, put the code and save:
{section name=custom loop=$news_list}
<div class="w3-row-padding w3-padding-8 w3-container w3-white">
<div class="w3-content">
{$news_list[custom].message}
<hr />{$news_list[custom].modifytime|date_format:"%d.%m.%Y %H:%M"}
</div>
</div>
{/section}
2. Then go to Home -> Modules -> Web Pages
3. and assign new template to menu items
4. Finally create news under Home -> Modules -> News Feed and assign them to webpages
Hardening HTTP security headers
Important security headers are preconfigured in another CMS.
Open the file .htaccess in root folder of Apache web server, here you find
# Security headers
Header always set X-Powered-By "Me"
Header always set X-Frame-Options "SAMEORIGIN"
Header always set Referrer-Policy "strict-origin"
Header always set X-Content-Type-Options "nosniff"
In case of lighttpd web server find the configuration in /etc/lighttpd/lighttpd.conf
# https headers
$HTTP["scheme"] == "https" {
setenv.add-response-header = ( "Strict-Transport-Security" => "max-age=31536000; includeSubDomains" )
setenv.add-response-header += ( "X-Frame-Options" => "SAMEORIGIN")
setenv.add-response-header += ( "X-Powered-By" => "Me")
setenv.add-response-header += ( "X-Content-Type-Options" => "nosniff")
setenv.add-response-header += ( "Referrer-Policy" => "strict-origin")
}
HTML5 audio and video playlist
First create containers for audio and video players on the HTML page
<audio id="audio_kids" preload="none" controls="controls">
<source src="/content/audio/96kbs_muz_shkatulka_lalilu.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio>
<div id="playlist_kids"> </div>
<hr />
<video id="video_kids" style="display: block; margin-left: auto; margin-right: auto;" controls="controls" width="384" height="192">
<source src="/content/video/faschingskonzert_ismaning_20200217.mp4" type="video/mp4" /></video>
<div id="playlist_kids_vid"> </div>
Then create functions in javascript to handle the playback recording and the playlists themselves
<script>
function playMediaNow(media_id, source) {
var player = document.getElementById(media_id);
if (player) {
player.pause();
player.setAttribute('src', source);
player.play();
}
}
function createListTable (playlist, media_path, media_id) {
var playlist_out = '<table class="w3-table w3-striped">';
var playlist_len = playlist.length;
var playlist_i = 0;
while (playlist_len > 0) {
playlist_out += '<tr><td>' + playlist[playlist_i][0] + '</td>';
playlist_out += '<td><a class="w3-" href="javascript:playMediaNow(\'' + media_id + '\',\'' + media_path + playlist[playlist_i][2] + '\')">' + playlist[playlist_i][1] + '</a></td>';
playlist_out += '<td>' + playlist[playlist_i][3] + '</td>';
playlist_out += '</tr>';
playlist_len --;
playlist_i ++;
}
playlist_out += '</table>';
return(playlist_out);
}
/* Playlists */
var audio_path = '/content/audio/';
var video_path = '/content/video/';
var pl_kids =
[
['Spieluhr 1', 'Melodie 1', '96kbs_muz_shkatulka_lalilu.mp3', '00:20' ],
['Spieluhr 2', 'Melodie 2', '96kbs_muz_shkatulka_hapybirdhtday.mp3', '00:18' ]
];
document.getElementById('playlist_kids').innerHTML = createListTable(pl_kids, audio_path, 'audio_kids');
var vid_kids =
[
['Musikschule Ismaning', 'Faschingskonzert 2020', 'faschingskonzert_ismaning_20200217.mp4', '00:20' ],
['Musikschule Ismaning 1', 'Faschingskonzert 2020 1', 'faschingskonzert_ismaning_20200217_1.mp4', '01:28' ]
];
document.getElementById('playlist_kids_vid').innerHTML = createListTable(vid_kids, video_path, 'video_kids');
</script>
Ready.