J3.1:Converting A Previous Joomla! Version Template
m (Improved formatting.) |
m (Version template, incomplete template, category added) |
||
| Line 1: | Line 1: | ||
| − | + | {{Version|3.0}} | |
| + | {{incomplete}} | ||
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. | 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. | ||
| Line 72: | Line 73: | ||
</ul> | </ul> | ||
</source> | </source> | ||
| + | <noinclude>[[Category:Template Development]]</noinclude> | ||
Revision as of 09:50, 16 November 2012
Please note that the content on this page is currently incomplete. Please treat it as a work in progress.
- This article was last edited by Hutchy68 (talk| contribs) 5 months ago. (Purge)
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.
This is not going to give you the results you would get by fully incorporating JUI into a template, but it will do as a work around and give some time to transition or fully go in a different direction if you prefer not to incorporate it at all.
In some cases where you have heavily styled a layout or relied on MooTools features you may want to use overrides with the 2.5 layouts as a temporary bridge.
Class names
| 2.5 | 3 | notes |
|---|---|---|
| menu | nav | |
| pagnav | pager | |
| actions | dropdown-menu | This will give you text but no icons |
Index.php
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
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:
<ul class="nav nav-tabs"> <li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('JEDITOR') ?></a></li> <?php if ($params->get('show_urls_images_frontend')) : ?> <li><a href="#images" data-toggle="tab"><?php echo JText::_('COM_CONTENT_IMAGES_AND_URLS') ?></a></li> <?php endif; ?> <li><a href="#publishing" data-toggle="tab"><?php echo JText::_('COM_CONTENT_PUBLISHING') ?></a></li> <li><a href="#language" data-toggle="tab"><?php echo JText::_('JFIELD_LANGUAGE_LABEL') ?></a></li> <li><a href="#metadata" data-toggle="tab"><?php echo JText::_('COM_CONTENT_METADATA') ?></a></li> </ul>
