Actions

J3.x

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

From Joomla! Documentation

 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
This is a work in progress.
+
{{Version/tutor|3.x}}
 +
{{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 [http://twitter.github.com/bootstrap/ 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.
 
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.
 
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.
 +
 +
== HTML ==
  
 
===Class names===
 
===Class names===
  
{| border="1" cellspacing="0" cellpadding="5" align="center"
+
{| class="wikitable"
! 2.5
+
! Joomla! 2.5
! 3
+
! Joomla! 3.x
 
! notes
 
! notes
 
|-  
 
|-  
Line 30: Line 33:
 
Add this code before including the head.
 
Add this code before including the head.
  
<code>
+
<source lang="html4strict">
 
<head>
 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../media/jui/js/jquery.js"></script>
+
    <script src="../media/jui/js/jquery.js"></script>
<script src="../media/jui/js/bootstrap.min.js"></script>
+
    <script src="../media/jui/js/bootstrap.min.js"></script>
<script src="../media/jui/js/chosen.jquery.min.js"></script>
+
    <script src="../media/jui/js/chosen.jquery.min.js"></script>
<script type="text/javascript">
+
    <script type="text/javascript">
  jQuery.noConflict();
+
      jQuery.noConflict();
</script>
+
    </script>
</code>
+
</source>
  
 
Add this code after including your template.css
 
Add this code after including your template.css
  
<code>
+
<source lang="php">
 
// If Right-to-Left
 
// If Right-to-Left
 
if ($this->direction == 'rtl') :
 
if ($this->direction == 'rtl') :
$doc->addStyleSheet('../media/jui/css/bootstrap-rtl.css');
+
    $doc->addStyleSheet('../media/jui/css/bootstrap-rtl.css');
 
endif;
 
endif;
  
Line 52: Line 55:
 
$file = 'language/' . $lang->getTag() . '/' . $lang->getTag() . '.css';
 
$file = 'language/' . $lang->getTag() . '/' . $lang->getTag() . '.css';
 
if (JFile::exists($file)) :
 
if (JFile::exists($file)) :
$doc->addStyleSheet($file);
+
    $doc->addStyleSheet($file);
 
endif;
 
endif;
  
 
$doc->addStyleSheet('../media/jui/css/chosen.css');
 
$doc->addStyleSheet('../media/jui/css/chosen.css');
 
+
</source>
</code>
+
  
 
===Editor views===
 
===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:
 
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:
<code>
+
<source lang="html4strict">
<ul class="nav nav-tabs">
+
<ul class="nav nav-tabs">
<li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('JEDITOR') ?></a></li>
+
    <li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('JEDITOR') ?></a></li>
<?php if ($params->get('show_urls_images_frontend') ): ?>
+
    <?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>
+
    <li><a href="#images" data-toggle="tab"><?php echo JText::_('COM_CONTENT_IMAGES_AND_URLS') ?></a></li>
<?php endif; ?>
+
    <?php endif; ?>
<li><a href="#publishing" data-toggle="tab"><?php echo JText::_('COM_CONTENT_PUBLISHING') ?></a></li>
+
    <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="#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>
+
    <li><a href="#metadata" data-toggle="tab"><?php echo JText::_('COM_CONTENT_METADATA') ?></a></li>
</ul>
+
</ul>
</code>
+
</source>
 +
<noinclude>[[Category:Template Development]][[Category:Tutorials]]</noinclude>

Latest revision as of 11:27, 25 March 2014

Quill icon.png
Content is Incomplete

This article or section is incomplete, which means it may be lacking information. You are welcome to assist in its completion by editing it as well. If this article or section has not been edited in several days, please consider helping complete the content.
This article was last edited by HGH (talk| contribs) 7 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.

Contents

HTML

Class names

Joomla! 2.5 Joomla! 3.x 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>