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 ridurre la dimensione di un boltdb

Questo post parte da questa risposta ad una domanda posta sul repository ufficiale di boltdb. Nella domanda si chiede come ridurre la dimensione di un database

Come installare uno script Go su Ubuntu

Go è un linguaggio di programmazione nato in Google dalle mani di Robert Griesemer, Rob Pike e Ken Thompson. Sintatticamente è molto simile al C

Come trasferire chiamate tra interni su FreePBX

Molti telefoni hardware hanno già incorporato un pulsante che può essere utilizzato per il trasferimento delle chiamate tra interni, altri invece ne sono sprovvisti. Cosa