4.x Icone differenti per ogni tema

[Max]

Ciao ragazzi, ci sarebbe la possibilità ci di mettere delle icone personalizzate nelle varie sezioni del forum in base al tema utilizzato? Se si come?

Intanto provo a vedere se trovo la soluzione ma se nel frattempo qualcuno avesse un consiglio sul come fare sarebbe molto apprezzato.

Grazie

[L'AltroWeb]

Questo il css del mio forum.css

/* custom font awesome in forum categories */
/* Feedback e Informazioni */
[data-forumid="24"] .fa::before {content:"\f0eb";} /* Feedback e idee */
[data-forumid="25"] .fa::before {content:"\f1dd";} /* Messaggi di prova e bozze */
/* Assistenza informatica  */
[data-forumid="11"] .fa::before {content:"\f109";} /* Assistenza hardware */
[data-forumid="23"] .fa::before {content:"\f17a";} /* Assistenza software */
[data-forumid="10"] .fa::before {content:"\f11b";} /* Giochi (PC e Console) */
[data-forumid="4"] .fa::before {content:"\f282";} /* Internet, social network e ADSL */
/* Angolo Webmaster */
[data-forumid="15"] .fa::before {content:"\f13b";} /* Css, html, xhtml e JavaScript */
[data-forumid="13"] .fa::before {content:"\f121";} /* Php, .htaccess e mysql(i) */
[data-forumid="16"] .fa::before {content:"\f19a";} /* Supporto Script e CMS */
[data-forumid="17"] .fa::before {content:"\f233";} /* Supporto hosting */
/* Piazza Centrale */
[data-forumid="21"] .fa::before {content:"\f0c0";} /* Byte in libertà... */
[data-forumid="22"] .fa::before {content:"\f209";} /* Pubblicità e collaborazione */
[data-forumid="2"] .fa::before {content:"\f118";} /* Presentatevi qui!!! */

 

ho file simili anche per i database (citazioni, directory, homepage) ... tutti in css separati, ma solo forum nel file del template originale. gli altri in file creati appositamente e aggiunti alle pagine tramite l'apposita funzione di ipb - così facendo ho evitato inutile css quando non necessario (eg: homepage.css è solo in homepage e quando sono in forum, citazioni ecc non verrà caricato quel css. se avessi messo tutto in custom.css sarebbe stato più semplice, ma tanto css inutile per i visitatori)!

 

detto ciò, se a te interessa solo forum può andar bene forum.css

quindi uno diverso ogni template ed ecco che hai icone diverse in base al template

 

https://laltroweb.it/forums/ ad esempio, il css sopra indicato. ma sul tema di default (invision) non è applicato e quindi ci sono le icone standard)

 

spero di esserti stato utile!

saluti...

[Max]

Ciao, intanto grazie per il tuo intervento ma non ho capito dove mettere quelle stringhe di codice, nel custom.css?

[L'AltroWeb]

se le metti nel custom.css andranno globalmente, mentre a te servono soltanto per il forum.

quindi ti consiglierei di metterle nel forum.css

ps: quelle sono da esempio, ovviamente.

forumid="ID" devi personalizzarlo per l'id del tuo forum, così come "\f***" è il font-awesome che desideri usare per quello specifico forum (scusa, magari lo sai meglio di me, ma meglio dirlo)

Modificato 13 Giugno 2016 da L'AltroWeb

[Max]

Ok grazie...appena ho un momento provo e ti faccio sapere 

[Max]

mmmm....è da un pò che ci sto sbattendo la testa ma non capisco perchè non si visualizza la mia icona, qual'è il percorso per far visualizzare l'icona personalizzata, ho tutto all'interno della cartella forum e la cartella delle icone personalizzate l'ho chiamata icons quindi se io volessi richiamare la mia immagine il percorso sarebbe il seguente:

forum/icons/1.png la quale andrebbe nella prima sezione con id 2.

In sostanza dovrebbe essere così:

[data-forumid="2"] .fa::before {content:"\qui la mia icona.png";} /* presentazioni Nuovi Utenti */

[L'AltroWeb]

no!

fa ecc è fontawesome.

non devi mettere immagini png, ma i codici forniti da fontawesome: http://fontawesome.io/icons/

ne scegli una, clicchi su, qu9indi prendi il codice come da immagine:

 

e concludi con, in questo caso:

[data-forumid="2"] .fa::before {content:"\f293";} /* presentazioni Nuovi Utenti */

 

saluti...

[Max]

Forse non ci siamo capiti, a me di font awesome non me ne frega na cippa  io vorrei mettere una mia icona personalizzata differente per ogni tema, se ho 5 temi alla stessa sezione vorrei avere la possibilità di mettere 5 icone differenti 

[L'AltroWeb]

 

[data-forumid="ID"] .ipsItemStatus.ipsItemStatus_large {
	background: rgba(0, 0, 0, 0) url("https://invisionita.com/uploads/profile/photo-1757.jpg") repeat scroll center center /cover;
}
/* così tutte le icone "awesome" verranno nascoste */
.cForumIcon_normal > .fa.fa-comments { /* oppure: [data-forumid="ID"] ... */
    display: none;
}

Modificato 15 Giugno 2016 da L'AltroWeb

[Max]

[data-forumid="2"] .ipsItemStatus.ipsItemStatus_large {
    background: rgba(0, 0, 0, 0) url("http://invisiongame.it/forum/images/lcd1.png") repeat scroll center center /cover;
}
/* così tutte le icone "awesome" verranno nascoste */
.cForumIcon_normal > .fa.fa-comments { /* oppure: [data-forumid="ID"] ... */
    display: none;
}

Inserito in forum.css ma l'icona non si visualizza.

[L'AltroWeb]

ho provato sia in questo forum (liveedit su forum.css) che sul mio in dev, e funziona:

 

prova a fornire il link del tuo forum così vediamo se la modifica è presente e corretta...

[Max]

Link: http://invisiongame.it metti il tema di default

[L'AltroWeb]

non hai fontawesome, ma hai già delle icone in png, quindi quanto detto sin'ora non si applica.

questo sembra andare, ma non posso testarlo sulla mia installazione.

ho provato solo in live editor.

li[data-forumid="92"] > div.ipsDataItem_icon {
    background: rgba(0, 0, 0, 0) url("http://invisiongame.it/forum/uploads/monthly_2016_06/Nephadne.gif.b0feafba2b8fbde43a77d3b90f9edced.thumb.gif.21e60e184eb75f959c5cefc4fae91051.gif") repeat scroll 0 0 / cover !important;
    min-width: 90px;
}
li[data-forumid="92"] img.ipsItemStatus_custom {
    display: none;
}

 

una soluzione più pulita potrebbe essere quella di sostituire, via jquery, il contenuto del tag img con l'url della nuova immagine.

jQuery("li[data-forumid="92"] img.ipsItemStatus_custom").attr("src", "urlnuova.png")

Modificato 15 Giugno 2016 da L'AltroWeb

[Max]

2 ore fa, L'AltroWeb ha scritto:

non hai fontawesome, ma hai già delle icone in png, quindi quanto detto sin'ora non si applica.

questo sembra andare, ma non posso testarlo sulla mia installazione.

ho provato solo in live editor.

li[data-forumid="92"] > div.ipsDataItem_icon {
    background: rgba(0, 0, 0, 0) url("http://invisiongame.it/forum/uploads/monthly_2016_06/Nephadne.gif.b0feafba2b8fbde43a77d3b90f9edced.thumb.gif.21e60e184eb75f959c5cefc4fae91051.gif") repeat scroll 0 0 / cover !important;
    min-width: 90px;
}
li[data-forumid="92"] img.ipsItemStatus_custom {
    display: none;
}

Per funzionare funziona e si visualizza, l'unico problema è che si visualizza come se ci fosse un post da leggere ma in realtà da leggere non c'è nulla.

[BomAle]

dovresti aggiungere un'ulteriore classe nella regola css:

li[data-forumid="92"] > .ipsItemStatus_custom.ipsItemStatus_read {
    background: rgba(0, 0, 0, 0) url("https://invisionita.com/uploads/profile/photo-2209.png") repeat scroll 0 0 / cover !important;
    height: 0;
    padding-left: 48px;
    padding-top: 48px;
}
li[data-forumid="92"] > .ipsItemStatus_custom:not(.ipsItemStatus_read) {
    /*Lasciamo quella che carichi dall'amincp*/
}

 

[Max]

Grazie, appena riesco provo 

[Max]

Ma quindi la soluzione è la seguente?

li[data-forumid="92"] > div.ipsDataItem_icon {
    background: rgba(0, 0, 0, 0) url("http://invisiongame.it/forum/uploads/monthly_2016_06/Nephadne.gif.b0feafba2b8fbde43a77d3b90f9edced.thumb.gif.21e60e184eb75f959c5cefc4fae91051.gif") repeat scroll 0 0 / cover !important;
    min-width: 90px;
}
li[data-forumid="92"] img.ipsItemStatus_custom {
    display: none;
}

li[data-forumid="92"] > .ipsItemStatus_custom.ipsItemStatus_read {
    background: rgba(0, 0, 0, 0) url("https://invisionita.com/uploads/profile/photo-2209.png") repeat scroll 0 0 / cover !important;
    height: 0;
    padding-left: 48px;
    padding-top: 48px;
}
li[data-forumid="92"] > .ipsItemStatus_custom:not(.ipsItemStatus_read) {
    /*Lasciamo quella che carichi dall'amincp*/
}

è corretto?