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?
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
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).
Dovrebbe cambiare il background e l'offset per ogni immagine, per cui non conviene ;D E' meglio se tiene l'immagine singola e la modifica a piacimento.
Visto tutto e credo di poter gestire gli sprite (il condizionale è d'obbligo ;D), 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 ???
La seconda è usata quando ci sono nuovi post solo in una sotto-sezione.
Ha funzionato alla perfezione. Vi ringrazio tanto 8)
Ragazzi, ma il percorso è cambiato nella versione 1.1?
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... :-[
L'icona di "nuovo", perlomeno, non è più un'immagine ma creata dal browser (finalmente) :P Le altre come ha detto ema mi paiono svg, non mi piacciono perchè i link per quelle cose sono un *inferno*, ma funzionano bene.
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.
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 >:D
E' la prima volta che sento di sprite create dal browser: come mi devo comportare per cambiarle?
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:
.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).
Se ho interpretato bene il codice, devo creare un file per ogni immagine invece di uno sprite, giusto?
Se hai già lo sprite, puoi usare anche quello... io però non sono molto bravo con quei cosi, sorry. xD
Ho provato, ma non funziona: le immagini non si vedono (stesse dimensioni di quelle base) e rimane uno sfondo bianco.
Prova a lasciare il file per vedere cosa si vede, magari è solo un minimo di posizionamento o di dimensioni.
Non ho capito, scusa. Che intendi con "lasciare il file"?
Le moficihe al css.
Forse mi sono confuso. Andando all'indirizzo url dove si trova l'immagine di default (la cartella grigia) vedo che l'immagine è 1920x719: sono queste le dimensioni che dovrei usare?
???
La cartella grigia in Elk 1.1 è una stringa in un file css, non esiste più come immagine "fisica", quindi quello che vedi è probabilmente un rimasuglio di qualcosa?
Provo a rispiegare con più dettagli ;D
Quello che vedo con l'aggiunta e modifica del file "custom_light.css" è questo in allegato, mentre l'immagine che vorrei al posto della cartella grigia è il pennuto, la cui dimensione è 39x39, decisa dopo aver usato "Analizza elemento" sulla cartella grigia.
La cartella grigia in dimensione 1920x719 l'ho vista digitando questo nella barra degli indirizzi:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aeaeae' viewBox='0 0 32 32'%3E%3Cpath d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E
Ok, vediamo se riesco a farmi capire: vorresti riapplicare le modifiche a custom_light.css e lasciarle on-line per un po' in modo che possa vedere?
Altrimenti siamo qui a girare in giro al problema con me che ti chiedo una cosa e tu che mi rispondi tutt'altro ed andiamo avanti così per tre o quattro pagine.
Rispondo tutt'altro perchè, abbi pazienza, ma fino all'ultimo post non sei stato sufficientemente chiaro.
Ho fatto come hai detto, comunque, lascio il file con le modifiche.
Aggiungilo:
.i-board-off:before,
.i-board-new:before,
.i-board-sub:before,
.i-board-redirect:before {
width: 39px;
height: 39px;
display: block;
}
Ci siamo quasi: l'unico problema ora è che anche le icone della legenda in fondo al forum misurano 39x39 e andrebbero miniaturizzate.
E quelle avranno una dimensione diversa basata su un selector diverso:
#posting_icons .icon:before {
background-size: 20px;
width: 20px;
height: 20px;
}
#posting_icons .icon {
margin-right: 10px; /* questo è per spostare un po' la scritta della legenda che altrimenti tende a sovrapporsi all'immagine */
}
Perfetto. Ti ringrazio molto.