Cambiare stile al widget Categorie di Elementor

I widget nativi di WordPress messi a disposizione nel visual builder Elementor sono solitamente molto scarni dal punto di vista grafico e le possibilità di uso dell’editor visuale per impostare uno stile non sono previste. Non resta quindi che gestire il tutto con un po’ di JavaScript e CSS.

Rimuovere le parentesi con JavaScript

Con questo script rimuoviamo le parentesi dal contatore degli articoli che appartengono ad ogni categoria.

				
					<script>
    /* Recuperiamo tutte le voci di categoria dal DOM della pagina */
    let list = document.getElementsByClassName("cat-item");

    /* Per ogni elemento categoria creiamo un nuovo tag <a> che abbia lo stesso attributo href e contemporaneamente rimuoviamo le parentesi dal contatore degli articoli */
    for(var i=0; i<list.length; i++) {
        var liElement = list[i];
        var str = liElement.innerText;
        
        var oldA = list[i].firstChild;
        var newA = document.createElement("a");
        liElement.innerText = "";
        liElement.appendChild(newA);
        newA.href = oldA.href;
        newA.innerText = str.substring(0, str.length-3).replace(/\n/g, '');
        liElement.innerHTML += " " + str.substring(str.length-2, str.length-1);
    }
</script>
				
			

Aggiungere un nuovo stile alle categorie

Ora non resta che aggiungere un po’ di stile con del CSS.

				
					#category-block > div > h5 {
    text-transform: uppercase;
    font-weight: bold;
    color: #454D64;
    font-size: 1.4em;
    margin-bottom: 0.4em;
    margin-top: 0;
}

#category-block > div > ul {
    padding-left: 0;
}

.cat-item {
    display: flex;
    justify-content: space-between;
    padding: 1% 0;
    color: #505050;
    font-weight: 500;
}

.cat-item > a {
    color: #505050;
    font-weight: 500;
}

@media screen and (max-device-width:480px) {
    #category-block > div > h5 {
        text-align: center;
    }
}
				
			

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Most Recent

Come estrarre informazioni hardware su Ubuntu

Per estrarre informazioni relative all’hardware su cui è in esecuzione il nostro sistema operativo Ubuntu possiamo utilizzare il comando dmidecode il quale si occupa di

Come esportare i crontab su Ubuntu

La migrazione del contenuto di una macchina Ubuntu ad un’altra può includere anche il backup e il restore dei crontab. Qui di seguito vediamo il