J3.x

Converting A Previous Joomla! Version Template: Difference between revisions

From Joomla! Documentation

← Older edit
MATsxm (talk | contribs)
Email Confirmed, JDOC Contributors, Translator
34,129 edits
Marked this version for translation
Wilsonge (talk | contribs)
Abuse Filter Admins, Bureaucrats, Joomla Leadership, Administrators
4,871 edits
Remove needs review. Page largely not relevant anymore
 
(7 intermediate revisions by 2 users not shown)
Line 2: Line 2:


{{Version/tutor|3.x}}
{{Version/tutor|3.x}}
{{incomplete}}
 
''If you any tips for users based on your experience please feel free to edit this page and add them to the list''


<translate>
<translate>
Line 43: Line 44:
This will give you text but no icons</translate>
This will give you text but no icons</translate>
|}
|}


<translate>
<translate>
===Index.php=== <!--T:7-->
===Index.php=== <!--T:14-->
Add this code before including the head.
Add this code before including the head to load Bootstrap.
</translate>
</translate>


<source lang="html4strict">
<source lang="php">
<head>
JHtml:: ('bootstrap.framework');
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
JHtml:: ('bootstrap.loadCss', true, $this->direction); ?>
    <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>
</source>
</source>


<translate>
<translate>
<!--T:8-->
===Editor views=== <!--T:15-->
Add this code after including your template.css
</translate>
</translate>
<source lang="php">
// 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');
</source>


<translate>
<translate>
===Editor views=== <!--T:9-->
<!--T:16-->
 
<!--T:10-->
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:
</translate>
</translate>
Line 99: Line 77:
</source>
</source>


<noinclude><translate>
<noinclude>
<!--T:11-->
<translate>
<!--T:17-->
[[Category:Template Development]]
[[Category:Template Development]]
[[Category:Tutorials]]
[[Category:Tutorials]]
</translate></noinclude>
</translate>
</noinclude>

Latest revision as of 11:44, 30 March 2020

Other languages:


This tutorial is for Joomla! CMS Version(s) Joomla 3.x

If you any tips for users based on your experience please feel free to edit this page and add them to the list

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.

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 to load Bootstrap. 

JHtml:: ('bootstrap.framework');
JHtml:: ('bootstrap.loadCss', true, $this->direction); ?>

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>
Retrieved from "https://docs.sandbox.joomla.org/index.php?title=J3.x:Converting_A_Previous_Joomla!_Version_Template&oldid=652075"