• Mar
  • 2012
  • 29
  • Stampa
  • Categoria: Joomla
  • Scritto da Andrea Rossi

Modificare la visualizzazione della data, con Joomla è facile: basta un piccolo lavoro di 10-15 minuti e potremo ottenere la visualizzazione della data, come quella di un blog. Semplice, meno spartana e decisamente intrigante!

Override template: modifiche data

Funziona sujoomla 2.5

La potenza dei template di joomla, risiede nell'override (qui per maggiori informazioni). Questa tecnica, permette di personalizzare COMPLETAMENTE l'aspetto del sito, senza toccare minimamente la struttura dati, ne le impostazioni originali. Grazie a questa caratteristica, gli script che seguono sono estremamente facili sia da applicare che da comprendere.

Prima ti mostrerò la struttura "fisica", poi lo stile css, il risultato ed infine dove applicare le modifiche per ottener cosa.

Struttura HTML

  1. <ul class="data-article">
  2.  <li class="month">
  3.  <?php echo JHtml::_('date', $this->item->publish_up, JText::_('M')); ?>
  4.  </li>
  5.     <li class="year">
  6.  <?php echo JHtml::_('date', $this->item->publish_up, JText::_('Y')); ?>
  7.  </li>
  8.     <li class="day">
  9.  <?php echo JHtml::_('date', $this->item->publish_up, JText::_('d')); ?>
  10.  </li>
  11. </ul>
Io utilizzerò una semplice lista ed utilizzerò la data di inizio pubblicazione. Come codice è molto banale: se non capite nulla di php non preoccupatevi: copiate ed incollate (questo stesso frammento lo utilizzo qui, sul mio portale!)

Effetto Css

  1. .data-article{
  2.     float:left;
  3.     display:inline;
  4.     margin:2px;
  5.     border:2px solid  #44C;
  6.     background:#BBC;
  7.     padding:1px 0px;
  8.     border-radius:5px;
  9.     list-style:none;
  10.     font-size:9px;
  11.     width:50px;
  12. }
  13. .data-article .month{
  14.     float:left;
  15.     padding:1px;
  16.     margin-top:-1px;
  17. }
  18. .data-article .year{
  19.     float:right;
  20.     border-left:2px solid  #44C;
  21.     padding:1px;
  22.     padding-left:3px;
  23.     margin-top:-1px;
  24. }
  25. .data-article .day{
  26.     clear:both;
  27.     background:#FFF;
  28.     text-align:center;
  29.     font-size:20px;
  30.     margin:0px;
  31.     margin-bottom:-1px;
  32.     padding:0px;
  33.     border-top:2px solid  #44C;
  34.     border-bottom-left-radius:3px;
  35.     border-bottom-right-radius:3px;
  36.     line-height: 30px;
  37.     }
Colori a parte, ho semplicemente dato un piccolo effetto arrotondato, sistemato le dimensioni del font e degli spazi. Piccola nota: per una migliore gestione di questo frammento, ho creato un file article.css e l'ho aggiunto alla cartella css del mio template.  Mi pare stupido fare "copia-incolla" in ogni pagina.

Risultato

  • Mar
  • 2012
  • 29

Semplice e molto meno rude della versione standard. Ovviamente, per modificare la data, visualizza il file della lingua: troverai tutte le variabili utilizzate per mostrare la data.

Altre informazioni

Per ottenere questo risultato, ho applicato la tecnica dell'override: ciò comporta la modifica di alcuni file. Io ho deciso di visualizzare in questo formato,  solo per:

  1. Articoli in Rilievo (feature)
  2. Visualizzazione articoli in modalità blog

Questa è la lista dei file da integrare nel vostro template, da scaricare root/component/com_content/views/ e da aggiungere a root/templates/vostro-template/html/ (senza considerare views);  rispettate l'ordine delle cartelle, altrimenti non funzionerà correttamente.

  • com_content/
    • archive/
      • default_items.php
    • article/
      • default.php
    • category/
      • blog_item.php
    • featured/
      • default_item.php

  • Dettagli

  • Condividi