Supporto volontario e collaborativo per Joomla!® in italiano

Categoria blog Parte 2 con Micro-Layout e override della lingua

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Abbiamo visto nell'articolo Categoria blog con testo introduttivo automatico e layout alternativo come cambiare l'aspetto della pagina Categoria blog di Joomla. In questo articolo aggiungeremo altre modifiche al layout andando ad agire sui dettagli dell'articolo.


Gli articoli del blog, oltre al testo introduttivo, consistono di altri elementi, come le immagini, il nome dell'autore, la categoria, ecc...
Modificando le proprietà di quesiti elementi possiamo ottenere un nuovo look e cambiare l'aspetto della pagina di tipo blog.
Vedremo come possiamo utilizzare gli override dei cosidetti micro-layouts per cambiare alcuni di questi elementi, insieme all'override della lingua.

Utilizziamo sempre il template standard di Joomla, Protostar, con l'override già creato seguendo il precedente articolo, ma faremo anche alcune modifiche per migliorare l'override.

A. Override dei Micro-Layout e della lingua

1. Nome dell'autore

Con l'override del layout aggiungiamo un'icona e con l'override della lingua eliminiamo il testo "Scritto da".

a. Copiamo il file:
    ../layouts/joomla/content/info_block/author.php

   in
   ..templates/protostar/html/layouts/joomla/content/info_block/author.php

   Apriamo il file e inseriamo dopo il codice
   <dd class="createdby" itemprop="author" itemscope itemtype="https://schema.org/Person">

   il seguente codice
   <span class="icon-user"></span>

b. In amministrazione, in Estensioni > Lingue > Override lingua clicchiamo su Nuovo, cerchiamo la costante lingua “COM_CONTENT_WRITTEN_BY” e nel parametro Testo scriviamo “%s”.

2. Nome della categoria:

a.  Copiamo il file ../layouts/joomla/content/info_block/category.php

  in
  ..templates/protostar/html//layouts/joomla/content/info_block/category.php

  Apriamo il file e inseriamo il codice
  <span class="icon-folder-open"></span>
  sempre dopo al tag dd

b. Creiamo un nuovo override della lingua per la costante “COM_CONTENT_CATEGORY”, testo “%s”

3. Data pubblicazione

a. Creiamo un nuovo override della lingua per la costante “COM_CONTENT_PUBLISHED_DATE_ON”, testo “%s”
b. Vedi il codice nelle modifiche al css più sotto

Questo il risultato:


4. Leggi tutto


a. Copiamo il file ../layouts/joomla/content/readmore.php
in
..templates/protostar/html//layouts/joomla/content/readmore.php

b. Apriamo il file, tagliamo la riga #18
<span class="icon-chevron-right"></span>
e la incolliamo alla linea #32 prima della chiusura del tag </a>

B. Modifiche al CSS

Inseriamo il seguente codice nel file ../templates/protostar/css/user.css che avevamo creato nel precedente articolo

/* .myautoblog is for specificity purposes so only in the blog page */
/* with this page class you will have the changes below */

/* margin from images */
.blog.myAutoBlog .pull-left.item-image {
margin: 0 0 10px 0;
}

/* remove the word "Details" above article details - I just do not like it there! */
.blog.myAutoBlog .article-info-term {
display: none;
}

/* Use of the flexbox to make items have same high */
.blog.myAutoBlog .items-row {
display:flex;
}

/* give some color to items and other ... */
.blog.myAutoBlog .items-row [class*="span"] {
background:#eee;
margin-bottom: 15px;
padding:0 0px 50px 0px;
position:relative;
}

/* a different color to leading item and other ... */
.blog.myAutoBlog .items-leading [class*="leading-"] {
background:#ddd;
margin-bottom: 15px;
padding:0px 0px 50px 0px;
position:relative;
}

/* force items read more button to be always at the bottom right */
.blog.myAutoBlog .readmore {
position: absolute;
right: 10px;
bottom: 0px;
}

/* minor changes, that you can change easy later */
.blog.myAutoBlog h2, .blog.myAutoBlog .page-header {
margin: 0 0 5px 0;
padding: 0 5px 3px;
}

.blog.myAutoBlog .page-header {
border-bottom: 0px solid #fff;
background: #0088CC;
}
.blog.myAutoBlog .page-header a{
color:#fff;
font-weight: normal;
}
.blog.myAutoBlog .icons {
padding: 0 10px;
}
.blog.myAutoBlog .myIntrotext {
padding: 0 10px;
}

@media (max-width: 767px) {
/* removes flex and allow items to stack on mobiles */
.blog.myAutoBlog .items-row {
display: block;
}
}
/*move published date over top left of image */
.blog.myAutoBlog .published {
position: absolute;
top: 40px;
background: #ff0000;
color: #fff;
padding: 5px;
right: -10px;

}
/* beautify of elements */
.blog.myAutoBlog .btn {
background-color: #fff;
border: 1px solid #0088CC;
background-image: none;
box-shadow: none;
border-radius: 0px;
text-shadow: none;
color: #0088CC;
}

.blog.myAutoBlog .icons .btn {
background-color: transparent;
border: 0px;
}
.blog.myAutoBlog .icons .caret {
border-top: 4px solid #0088CC;
}
.blog.myAutoBlog .article-info.muted a{
color:#999;
}
.blog.myAutoBlog .article-info.muted {
border-bottom: 1px solid #fff;
padding: 0 0 10px;
margin-bottom: 10px;
}

In questo modo viene formattato diversamente il Leggi tutto e la data appare ben in evidenza sulla destra, sopra all'immagine (ho modificato il codice rispetto all'articolo originale in modo che vada bene anche se non c'è l'immagine).
Questo è il risultato:


C. Miglioriamo il blog con il testo introduttivo automatico (opzionale)

Nel precedente articolo abbiamo inserito un parametro nel template per limitare il numero di caratteri, qui spostiamo il parametro nella voce di menu, così potrà essere cambiato per singola voce di menu e non ci saranno problemi di perdere le modifiche con l'aggiornamento del template.

1. Modifica ad autoblog.xml

Apriamo il file templateDetails.xml e tagliamo questa parte di codice che abbiamo inserito nel precedente tutorial:

<field name="charactersNumber"
label="Blog Introtext characters number"
description="Enter the max characters number that will be used from main text to introtext"
type="number"
default="200" />

Ora lo inseriamo in autoblog.xml dopo la linea #222 (dopo il campo “field name = "show_subcategory_content" )

2. Modifica ad autoblog_item.php

Dobbiamo anche cambiare la riga che crea il testo introduttivo, non richiamandola dal template ma da autoblog.xml:

Codice esistente:
<?php echo JHtml::_('string.truncate', strip_tags($this->item->introtext), $template->params->get('charactersNumber', 200));?>

Nuovo codice:
<?php echo JHtml::_('string.truncate', strip_tags($this->item->introtext), $params->get('charactersNumber', 200));?>


Ora il nuovo parametro lo troviamo nel tab Layout blog della voce di menu:





Traduzione articolo Blog Category (Part II) with Micro-Layout and Language Overrides


 

CommentaCommenta questo articolo sul forum

Calendario articoli

Novembre 2017
Lun Mar Mer Gio Ven Sab Dom
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3

Ultima versione di Joomla!®

downloadVer. 3.8.2 Stabile Italiana
Data di rilascio: 07 Novembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: