J3.x

Difference between revisions of "Converting A Previous Joomla! Version Template"

From Joomla! Documentation

Line 23: Line 23:
 
| This will give you text but no icons
 
| This will give you text but no icons
 
|}
 
|}
 +
 +
===Index.php===
 +
Add this code before including the head.
 +
 +
<code>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<script src="../media/jui/js/jquery.js"></script>
 +
<script src="../media/jui/js/bootstrap.min.js"></script>
 +
<script src="../media/jui/js/chosen.jquery.min.js"></script>
 +
<script type="text/javascript">
 +
  jQuery.noConflict();
 +
</script>
 +
</code>
 +
 +
Add this code after including your template.css
 +
 +
<code>
 +
// If Right-to-Left
 +
if ($this->direction == 'rtl') :
 +
$doc->addStyleSheet('../media/jui/css/bootstrap-rtl.css');
 +
endif;
 +
 +
// Load specific language related CSS
 +
$file = 'language/' . $lang->getTag() . '/' . $lang->getTag() . '.css';
 +
if (JFile::exists($file)) :
 +
$doc->addStyleSheet($file);
 +
endif;
 +
 +
$doc->addStyleSheet('../media/jui/css/chosen.css');
 +
 +
</code>
  
 
===Editor views===
 
===Editor views===

Revision as of 08:33, 3 August 2012

This is a work in progress.

Converting your template to work with the Joomla 3 release involves a number of steps. Because Joomla 3 uses the Twitter Bootstrap framework many class and id names have changed. Also to take advantage of Bootstrap you will want to include certain files.


Class names[edit]

2.5 3 notes
menu nav
pagnav pager
actions dropdown-menu This will give you text but no icons

Index.php[edit]

Add this code before including the head.

<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../media/jui/js/jquery.js"></script> <script src="../media/jui/js/bootstrap.min.js"></script> <script src="../media/jui/js/chosen.jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script>

Add this code after including your template.css

// If Right-to-Left if ($this->direction == 'rtl') : $doc->addStyleSheet('../media/jui/css/bootstrap-rtl.css'); endif;

// Load specific language related CSS $file = 'language/' . $lang->getTag() . '/' . $lang->getTag() . '.css'; if (JFile::exists($file)) : $doc->addStyleSheet($file); endif;

$doc->addStyleSheet('../media/jui/css/chosen.css');

Editor views[edit]

The front end editor views use tabs to separate editing areas and options. If you don't wish to use these you will need to make an override that does not include this block: