Il mio scopo è quello di creare un template personale.
Partendo dal template Atomic ho editato i seguenti files:
templateDetails.xml nel seguente modo:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension
version="0.1"
type="template"
client="site">
<name>News Site Template</name>
<creationDate>27/04/13</creationDate>
<author>Andrea Rocco Lotronto</author>
<authorEmail>andrealotronto@gmail.com</authorEmail>
<authorUrl>http://www.fratellonero.org/AndreaRoccoLotronto/</authorUrl>
<copyright>Copyright (C) 2013 Andrea Rocco Lotronto All rights reserved.</copyright>
<license></license>
<version>2.5.0</version>
<description>Template basilare per un giornale web</description>
<files>
<folder>html</folder>
<folder>css</folder>
<folder>images</folder>
<folder>language</folder>
<folder>js</folder>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>component.php</filename>
<filename>error.php</filename>
</files>
<positions>
<position>NST-header-menu</position>
<position>NST-header-left</position>
<position>NST-header-right</position>
<position>NST-header-footer</position>
<position>NST-breadcrumb</position>
<position>NST-navigation-menu</position>
<position>NST-content-left</position>
<position>NST-content-right</position>
<position>NST-footer</position>
</positions>
<!-- For core templates, we also install/uninstall the language files in the core language folders.
-->
</extension>
index.php nel seguente modo:
<?php
/**
* @package Joomla.Site
* @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
/* The following line loads the MooTools JavaScript Library */
JHtml::_('behavior.framework', true);
/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
<jdoc:include type="head" />
<!-- The following line loads the template CSS file located in the template folder. -->
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!-- The following line loads the template JavaScript file located in the template folder. It's blank by default. -->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_menu">
<h1><?php echo htmlspecialchars($app->getCfg('sitename')); ?></h1>
<jdoc:include type="modules" name="NST-header-menu"/>
</div>
<div class="header_left">
<jdoc:include type="modules" name="NST-header-left"/>
</div>
<div class="header_right">
<jdoc:include type="modules" name="NST-header-right"/>
</div>
<div class="header_footer">
<jdoc:include type="modules" name="NST-header-footer"/>
</div>
</div>
<div class="breadcrumb">
<jdoc:include type="modules" name="NST-breadcrumb"/>
</div>
<div class="navigation">
<jdoc:include type="modules" name="NST-navigation-menu"/>
</div>
<div id="content">
<div id="left_column">
<jdoc:include type="modules" name="NST-content-left"/>
</div>
<div id="right_column">
<jdoc:include type="modules" name="NST-content-right"/>
</div>
</div>
<div class="footer">
<jdoc:include type="modules" name="NST-footer"/>
©<?php echo date('Y'); ?> <?php echo htmlspecialchars($app->getCfg('sitename')); ?>
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
e in css il file template.css nel seguente modo:
@charset "UTF-8";
html,body {
margin: 0;
padding: 0;
}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
}
div#container{
width: 90%;
max-width: 1200px;
min-width: 900px;
padding: 10px;
margin: 0 auto;
text-align: left;
/*border-left: 2px solid #36c;
border-right: 2px solid #36c;*/
}
/*stile per header */
div#header{
background-color:#fff;
color:#000;
height: 250px;
margin-bottom:20px;
border: 1px solid #dedede;
box-shadow: 10px 10px 5px #dedede;
}
div#header_menu{
/*float: top;*/
width: 100%;
height: 20px;
border: 1px solid #f00;
}
div#header_left{
float:left;
margin:5px;
border: 1px solid #dedede;
/*box-shadow: 10px 10px 5px #dedede;*/
}
div#header_right{
float:right;
margin:5px;
border: 1px solid #dedede;
/*box-shadow: 10px 10px 5px #dedede;*/
}
div#header_footer{
clear:both;
width: 100%;
height: 20px;
border: 1px solid #f00;
}
div#breadcrumb{
margin:5px;
width: 100%;
height: 20px;
border: 1px solid #f00;
}
/*Stile per il menù di navigazione*/
div#navigation{
font-size: 20px;
text-align: center;
line-height: 40px;
/*background-color: #dedede;*/
width: 100%;
/*border: 1px solid #dedede;*/
height: 50px;
padding: 5px;
}
div#navigation > #navigation_voce{
/*background-color: rgba(0,0,0,0.4);*/
float:left;
display: inline; /*nota display: inline trasforma l'elemento da elenco ad inline*/
margin-right: 5px;
min-width: 120px;
height: 100%;
/*text-shadow: 0px 1px 0px #000;*/
border: 2px solid #000;
border-radius:5px;
box-shadow: 10px 10px 5px #dedede;
}
div#navigation a{
color:#000;
/*font: normal bold 1.2em/2.5em arial,sans-serif;*/
text-decoration: none;
}
div#navigation a:hover{
color: #fff;
text-decoration: none;
cursor: default;
}
div#navigation a#activelink{
color: #033;
text-decoration: none;
}
/*Stile creazione colonna sinistra,destra e content*/
div#content{
padding: 0;
}
div#left_column{
/*background-color: #fff;*/
float: left;
width: 65%;
}
div#right_column{
float: right;
width: 35%;
}
/*stili per il footer*/
div#footer{
clear:both;
margin-top: 30px;
text-align:center;
padding: 10px;
background-color: #69c;
color: #000
}
div#footer a{
color:#fff;
font-weight: bold;
text-decoration: underline;
}
/*--------------------------------*/
Pur eseendo in fase di sviluppo mi sarei aspettato che il sito visualizzasse almeno il contenuto statico del template come i bordi e l'header, ma non visualizza niente come se il css non venisse considerato.
Sono in una fase di stallo quindi ogni suggerimento sarebbe ben gradito.
Nel caso volesse vedere online il risultato l'ho messo su in fratellonero.altervista.org
