Enable Javascript


Last Arduino/ESP8266 project (click to open)

User Rating: 0 / 5

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Article Index

Template aanpassen

Open het frond-end template (dus die je pagina's aan je bezoekers tonen) en plaats daar je eigen CSS- en JS-bestanden in, dat doe je ook met eventuele inline scripts (bv. statcounter of Fancybox).
Kies Menubar>Extensions>Template Manager en klik onder kopje Template op de naam van Default Site template (bv. Protostar).
Onder Template Master Files open je Edit main page template.

Als voorbeeld: Zoek dit op (in ieder geval onder <head> en eventuele <meta....> tags):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="&lt;?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
En voeg hier je eigen code in (dit heb ik onder het bovenstaande tussengevoegd).
  <!-- ##### MIJN CODE ##### -->
  <link href="/include/fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
  <link href="/include/editor.css" rel="stylesheet" type="text/css">
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script> ZIE BIJ Jquery: 
  <script src="/include/jquery.expander.min.js" type="text/javascript"></script>
  <script src="/include/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    var opts = {
      collapseTimer: 0, 
      expandEffect: 'fadeIn', 
      expandSpeed: 1000, 
      collapseEffect: 'fadeOut', 
      collapseSpeed: 1000, 
      userCollapse: true, 
      slicePoint: 50, 
      expandText: '&rArr;', 
      userCollapseText: '&lArr;', 
      widow: 2};
    $('dl.expander dd').slice(0).expander(opts);
    $('ul.expander li').expander({
      slicePoint: 50, 
      widow: 2, 
      expandSpeed: 0, 
      userCollapseText: '[^]'
  });
    $('div.expander').expander();
    $(".fancyBox").fancybox({
      beforeLoad: function() {this.title = $(this.element).attr('caption');}, 
      prevEffect: 'none', 
      nextEffect: 'none', 
      helpers: {title: {type: 'insite'}}});
      $(".fancyBox").fancybox({
        beforeLoad: function() {
          this.title = $(this.element).attr('caption');
        },
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers  : {
          title  : {
            type : 'insite'
          }
        }
      });
    });
  </script>  
<!-- ##### EINDE 'MIJN CODE' ##### -->

Zo voeg je dus zaken in die veelvuldig worden gebruikt. Voor ingebonden code kijk je bij de pagina Embedded CSS en Scripts.

LET OP:
Bij een Joomla update worden kopieën van standaard Joomla templates overschreven, dus ben je de aanvullingen weer kwijt. Dit kun je voorkomen door een kopie van de hele Default Site template-map naar je PC te verplaatsen. Als voorbeeld een kopie van /templates/protostar welke we op de PC omdopen in /templates/mijntemplate (kies zelf een naam voor mijntemplate).
Werkwijze:

  1. Wijzig in alle bestanden
    (gebruik zoek en vervangen in een (HTML) editor welke (sub)mappen doorzoekt of, wat omslachtiger, kladblok of wordpad)
    1. protostar in mijntemplate
    2. Protostar in Mijntemplate
    3. PROTOSTAR in MIJNTEMPLATE
  2. ZIP de map mijntemplate
  3. Upload en installeer mijntemplate.zip met Joomla's Extesion Manager

Jquery:
Joomla v3+ voegt zelf een jquery-script in maar, om de een of andere reden, ziet de browser dat niet. Indien je het er nog eens bij zet wordt het wel gezien. Merkwaardig is dat het bovenstaande jquery.min.js regel gewoon een kopie van die van Joomla is.
Bij vroegere oomla versies pas je de regel aan zodat ze naar de map wijst waar je zelf het bestand hebt opgeslagen.