Cambio icone base (new post, no new post, ecc.)

[berethor]

Oggi mi stavo apprestando a cambiare le icone del tema base con delle altre quando mi accorgo che esse non consistono in diverse immagini come in SMF, ma in una specie di immagine singola che le racchiude tutte in sé (per intenderci: non c'è solo una cartella grigia, una verde, ecc., ma sono tutte in sequenza all'interno di un rettangolo trasparente). Devo crearne una così anche io per forza o posso fare in modo che ElkArte cerchi un'immagine diversa per ogni comando?

[Flavio93Zena]

Si chiamano sprite, e sì sono un'unica immagine Cambiare questo richiederebbe numerose modifiche, per cui ti consiglio di tenere quelle che hai e modificarle (bada bene di non cambiare la dimensione).
Maggiori informazioni qui: https://www.w3schools.com/css/css_image_sprites.asp

[emanuele]

Dipende un po' da cosa ti va/vuoi fare.

Se tieni gli sprite e mantieni le stesse dimensioni delle immagini, basta che sostituisci i file e sei a posto.
Se vuoi usare immagini singole, o se vuoi usare immagini di dimensioni diverse, puoi farlo, ma a quel punto devi anche cambiare il CSS (adesso non ricordo di preciso cosa devi cambiare, il tema non è il mio forte... non lo era in italiano e non lo è nello sviluppo web! LOL).

[Flavio93Zena]

Dovrebbe cambiare il background e l'offset per ogni immagine, per cui non conviene E' meglio se tiene l'immagine singola e la modifica a piacimento.

[berethor]

Visto tutto e credo di poter gestire gli sprite (il condizionale è d'obbligo ), tuttavia ho un dubbio: riconosco tutte le icone tranne la seconda, ossia quella verde più trasparente. So che la prima è quella usata per indicare la presenza di nuovi post in sezione, mentre quella interamente trasparente corrisponde a quella usata quando la sezione non ha nuovi post.... ma non riesco proprio a capire la seconda a cosa serva

[emanuele]

La seconda è usata quando ci sono nuovi post solo in una sotto-sezione.

[berethor]

Ha funzionato alla perfezione. Vi ringrazio tanto

[berethor]

Ragazzi, ma il percorso è cambiato nella versione 1.1?

[emanuele]

Quel che è cambiato è che di default, alcune di queste icone sono state convertite ad immagini SVG.
Per le rimanenti, se non erro, funziona come ha sempre funzionato mettendo l'immagine via ftp e poi configurandola nel pannello di admin... in effetti questa area è un po' oscura anche a me perché non ne ho seguito lo sviluppo...

[Flavio93Zena]

L'icona di "nuovo", perlomeno, non è più un'immagine ma creata dal browser (finalmente) Le altre come ha detto ema mi paiono svg, non mi piacciono perchè i link per quelle cose sono un *inferno*, ma funzionano bene.

[emanuele]

Cosa vuoi direi Flavio con i "link"?

Ad ogni modo, Berethor, ti confermo che basta caricare le immagini png in themes/default/images/post/ e poi configurare dal pannello di admin (admin > forum > smiley e icone > modifica icone).
ElkArte già di default usa un approccio a metà: per tutte le immagini (nelle icone dei messaggi) che non sono smiley usa svg, per tutte quelle che sono smiley usa png.

[berethor]

Non quelle. Parlo di quelle che intende anche Flavio: "Nuovo", "Niente Nuovo" e "Redirezionamento", che prima le trovavo in "themes/default/images/_light" dove ci sono ancora quelle di ElkArte 1.0
Ma ti ringrazio perché in ogni caso avrei dovuto cambiare anche quelle prima o poi

E' la prima volta che sento di sprite create dal browser: come mi devo comportare per cambiarle?

[emanuele]

Ahhh! xD
Ok, mi confondo sempre fra le due. xD

Allora, quelle diciamo che il concetto è sempre lo stesso di prima... più o meno.
Il modo più facile è per te di prendere le immagini, metterle "da qualche parte" (ad esempio themes/default/images/_light/), poi crei un file custom_light.css e lo metti in themes/default/css/_light/.
A quel punto nel file custom_light.css ci metti:

Codice Seleziona Espandi

.i-board-off::before {
    content: ""; /* o forse è '' ? Non ricordo mai cosa vuole il css... va beh, o è singolo apice o è doppio */
    background-image: url('../../images/_light/mio_off.png');
}
.i-board-new::before {
    content: ""; /* o forse è '' ? Non ricordo mai cosa vuole il css... va beh, o è singolo apice o è doppio */
    background-image: url('../../images/_light/mio_on.png');
}
.i-board-sub::before {
    content: ""; /* o forse è '' ? Non ricordo mai cosa vuole il css... va beh, o è singolo apice o è doppio */
    background-image: url('../../images/_light/mio_sub.png');
}
.i-board-redirect::before {
    content: ""; /* o forse è '' ? Non ricordo mai cosa vuole il css... va beh, o è singolo apice o è doppio */
    background-image: url('../../images/_light/mio_redirect.png');
}
e poi usi le immagini che vuoi (tenendo conto delle dimensioni).

[berethor]

Se ho interpretato bene il codice, devo creare un file per ogni immagine invece di uno sprite, giusto?

[emanuele]

Se hai già lo sprite, puoi usare anche quello... io però non sono molto bravo con quei cosi, sorry. xD