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. I campi obbligatori sono contrassegnati *

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

Most Recent

Come modificare l’autore di commit precedenti

Anzitutto apriamo questo articolo precisando che modificare i commit passati è un’operazione sulla commit history di un repository e tale operazione può essere rischiosa. Questa

Come eliminare un Git remote branch

Mentre in questo articolo abbiamo trattato come eliminare un Git local branch, qui di seguito trattiamo come eliminare un Git remote branch. Anche in questo caso,

Partners