Za lažje razumevanje bomo najprej ustvarili prazno predlogo in jo namestili v že inštalirano Joomlo. Predlogo bomo postopoma gradili.
Ustvarimo osnovno strukturo in kreiramo datoteke
Potrebujemo mapo css in images ter nekaj datotek.
/css/style.css
/images
/html
component.php
error.php
offline.php
favicon.ico
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Kaj določene datoteke počnejo?
style.css (lahko jo poimenujete tudi drugače) - tu je zapisana oblika spletne strani
index.php - glavna datoteka v kateri je vsa logika prikaza
templateDetails.xml - potrebna za instalacijo
template_preview.png - predogled v administraciji (ca 600x400px)
template_thumbnail.png - pomanjšana slika predogleda (ca 200x150px)
mapa images - vsebuje slike za ozadja, gumbe CTA elemente, ikone ...
mapa html - vsebuje vse preglasitve privzetih Joomla pogledov
favicon.ico - je ikona, prikazana v zavihku brskalnika. Za začetek jo lahko kopirate kar iz Protostar predloge.
Za uspešno instalacijo moramo najprej vpisati ustrezne podatke v templateDetails.xml. Odpremo datoteko v urejevalniku in kopiramo spodnjo kodo.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.5" type="template" client="site" method="upgrade">
<name>Sijoomla</name>
<creationDate>01 APR 2018</creationDate>
<author>SiJoomla</author>
<copyright>Copyright © sijoomla.com</copyright>
<authorEmail>Ta e-poštni naslov je zaščiten proti smetenju. Potrebujete Javascript za pogled.</authorEmail>
<authorUrl>https://www.sijoomla.com</authorUrl>
<version>Stable 1.2.4</version>
<description><![CDATA[
<h1>Bootstrap 3 for Joomla! 3.7.x</h1>
<p>A template to work from scratch, with all the advantages of Bootstrap v.3.3.7</p>
<p>Created by <a href="https://www.sijoomla.com" target="_blank">SiJoomla</a></p>
]]></description>
<files>
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>
<folder>jsx</folder>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.php</filename>
<filename>offline.php</filename>
<filename>favicon.ico</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>top</position>
<position>menu</position>
<position>fullwidth</position>
<position>showcase</position>
<position>feature</position>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>content-top</position>
<position>content-bottom</position>
<position>bottom</position>
<position>footer</position>
<position>copy</position>
<position>debug</position>
</positions>
</extension>Datoteko shranimo z xml končnico.
Na vrsti je index.php datoteka. Odpremo nov dokument v urejevalniku in kopiramo spodnjo kodo.
<?php
/*------------------------------------------------------------------------
# author SiJoomla
# Copyright © SiJoomla All rights reserved.
# @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Website http://www.sijoomla.com
-------------------------------------------------------------------------*/// no direct access
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
// Column widths
$leftcolgrid = ($this->countModules('left') == 0) ? 0 :
$this->params->get('leftColumnWidth', 3);
$rightcolgrid = ($this->countModules('right') == 0) ? 0 :
$this->params->get('rightColumnWidth', 3);
// Add js
$doc->addScript('templates/' . $this->template . '/jsx/bootstrap.min.js');
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<jdoc:include type="head" />
<!-- Styles for this template -->
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.min.css" type="text/css" />
<!-- Add pageclass to body -->
<?php
$app = JFactory::getApplication();
$menu = $app->getMenu()->getActive();
$pageclass = '';
if (is_object($menu))
$pageclass = $menu->params->get('pageclass_sfx');
?>
</head>
<body <?php if ($pageclass != '') echo 'class="'.htmlspecialchars($pageclass).'"';?>>
<!--Top-->
<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="top" style="none" />
</div>
</div>
</div>
<?php endif; ?>
<!--Top end-->
<div id="header">
<nav class="navbar navbar-default"> <!-- dodaš lahko navbar-fixed-top -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img class="logo-img" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/logo.png" alt="Logo">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<?php if ($this->countModules('menu')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="menu" style="none" />
</nav>
<?php endif; ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<!--fullwidth-->
<?php if($this->countModules('fullwidth')) : ?>
<div id="fullwidth">
<div class="row">
<jdoc:include type="modules" name="fullwidth" style="block"/>
</div>
</div>
<?php endif; ?>
<!--fullwidth end-->
<!--Feature-->
<?php if($this->countModules('feature')) : ?>
<div id="feature">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="feature" style="block" />
</div>
</div>
</div>
<?php endif; ?>
<!--Feature end-->
<div id="component">
<div class="container">
<!-- Content -->
<div class="row">
<?php if ($this->countModules('left')) : ?>
<div id="sidebarleft" class="col-md-<?php echo $leftcolgrid; ?>">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>
<div id="content" class="col-md-<?php echo (12-$leftcolgrid-$rightcolgrid); ?>">
<?php if($this->countModules('breadcrumbs')) : ?>
<div id="breadcrumbs">
<div class="row">
<jdoc:include type="modules" name="breadcrumbs" style="block" />
</div>
</div>
<?php endif; ?>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('right')) : ?>
<div id="sidebarright" class="col-md-<?php echo $rightcolgrid; ?>">
<jdoc:include type="modules" name="right" style="block" />
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Content end -->
<!-- bottom -->
<?php if($this->countModules('bottom')) : ?>
<div id="bottom">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="bottom" style="block" />
</div>
</div>
</div>
<?php endif; ?>
<!-- bottom end -->
<!-- footer -->
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="footer" style="block" />
</div>
</div>
</div>
<?php endif; ?>
<!-- footer end -->
<div id="copy">
<div class="container">
<div class="row">
<span class="copyright"> © <?php echo date('Y'); ?> Your Company. All Rights Reserved. Designed By <a target="_blank" href="http://www.sijoomla.com">SiJoomla</a></span>
</div>
</div>
</div>
</body>
</html>Datoteko shranimo s php končnico. Razlago kode bomo predelali kasneje.
Ustvarimo še style.css in jo zaenkrat shranimo kar prazno. Ustvarimo še vse potrebne mape in dodamo ostale datoteke, navedene zgoraj. Component.php, offline.php, error.php lahko skopirate iz instalacije vaše Joomle /templates/system mape. Favicon.ico pa dobite v /templates/protostar mapi.
Zdaj imamo dovolj za prvo namestitev predloge. Vse datoteke zapakiramo v sijoomla.zip in predlogo namestimo. Označite nameščeno predlogo kot privzeto in preverite kako izgleda na prvi strani. Zaenkrat ne preveč vzpodbudno.
V nadaljevanju - kreiranje vsebine
