Personalizza l'etichetta annunci e avvisi

Promemoria primo messaggio :

Da pannello amministrativo c'è questa possibilità di personalizzare le etichette, ma non ho ben chiaro il meccanismo, non c'è nessun tipo di aiuto. Posso inserire link? codice html? o altro ancora?
Come non detto, è solo testuale... Si può personalizzare con css?

Sempre riguardo le etichette, volevo sapere se c'è la possibilità di inserire delle etichette a specifici argomenti, ad esempio in questo forum ho visto una etichetta rossa con su scritto "importante" volevo sapere se si possono creare personalizzate e inserirle solo dove si sceglie di metterle, sempre da amministrazione ovviamente. Ad esempio se uno crea degli argomnenti di tipo guida, una etichetta con questo nome su questi argomenti, se fosse di cucina, per dire, un'altra etichetta di cucina....
Si può fare?

jessy ha scritto:no non ci devi arrivare devi chiedere il codice per i prefissi.Io non posso darti i codici perche' ho ereditato il forum da mio fratello e non so neanche dove l'ha messi e quali sono.Io ti faccio gli esempi perche non sono sicura di quello che chiedi.

Però questa cosa dei prefissi è una cosa del tutto nuova, a meno che non mi sono persa qualcosa.
Questo argomento nasceva per la necessità di evidenziare i testi: annuncio, avviso e annuncio globale, come da immagine da te allegata e che rimetto sotto, nel tuo forum appare come "importante" e Annuncio_globale" rispettivamente evidenziati in viola e rosso. In pratica è un background color, che però io non so dove posizionare perché non trovo la corrispondenza sul css.

E l'altra questione riguardava l'evidenziazione dell'intera riga, nell'esempio del tuo forum una in azzurro e una in fucsia.
Ripeto, a meno che non mi sono persa qualcosa per strada per queste due cose non penso servano i prefissi, che in tutta la discussione non erano mai stati citati.

Ti è un po' più chiaro ora quello che vorrei fare? Altrimenti dimmi cosa non capisci e cerco di spiegartelo in un altro modo.

Quarda ti conviene provarli anche con i testi in spagnolo tanto per vedere se è quello che vuoi.Altrimenti continuiamo a non capirci

se il risultato di questo JS doveva essere un menu a discesa accanto al titolo del post come in figura
non accade. non succede nulla, non so cosa sia cambiato

edit: dunque, nonostante io sia una idiota e non avevo messo su sì la gestione dei js, ora che l'ho fatto questo continua a non funzionare da me.
Quindi immagino che il problema sia da ricercare altrove, almeno spero

Noooo se tu sei un'idiota pensa io che sono che non ci capisco niente hahaha .Oggi lo pro e ti faccio sapere.ciao

All'ora per personalizzare le targhette prova  la uesto se va bene ti dico come modificare il tutto .va messo in Java su tutte le pagine .Ci sono solo 2opzioni.

Codice:


(function ($) {
'use strict';

var tags = [
{
tag: 'modifcato dal corvo',
background: '#ff0000'
},
{
tag: 'widget',
background: '#000'
}
];

$(function () {
var counter = 1;

/**
* Parte 1.
*/
if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) {
// Criar a zona para colocar-se os inputs:
var $textarea = $('#textarea_content');
var $title = $('form [name="subject"]');
var $zone = $([
'<div class="fa-icon-selector">',
' <div class="fa-icon-selector-inner">',
' </div>',
'</div>',
].join('\n'))
.prependTo($textarea)
;

// Criar-se os inputs dentro da zona criada anteriormente:
var $appendZone = $zone.find('.fa-icon-selector-inner');
$.each(tags, function (index, tag) {
$([
'<div class="fa-tag-form-group">',
' <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />',
' <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>',
'</div>',
].join('\n'))
.appendTo($appendZone)
;

counter++;
});

// Função para dar focus num input X caso este seja a tag dum tópico X:
if (/^\[.*\]/gi.test($title.val())) {
$title.val().replace(/^\[(.*)\]/gi, function (find, match) {
$('[data-tag="' + match + '"]').prop('checked', true);
});
}

// Trigger para a adição/edição do prefixo no input de título:
$zone
.find('input.select-tag-input')
.on('focus', function () {
setPrefix($(this).attr('data-tag'));
})
;

// Função para setar/editar o prefixo:
var setPrefix = function (prefix) {

if (/^\[.*\]/gi.test($title.val())) {
$title.val($title.val().replace(/^\[.*\]/gi, function () {
return '[' + prefix + ']';
}));

return;
}

$title.val('[' + prefix + '] ' + $title.val().trim());
};
}

/**
* Parte 2.
* Aqui nós iremos substituir a tag entre os colchetes por uma tag real:
*/
var $link = $('a[href^="/t"]');
$link.each(function () {

var $this = $(this);

$.each(tags, function (index, tag) {
var regex = new RegExp ('\\[' + tag.tag + '\\]', 'gim');
var text = $this.text();

if (!regex.test(text)) {
return;
}

$this.addClass('fa-tagged-link');
$this.text(text.trim().replace(regex, ''));
$this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>');
});
});

/**
* Parte 3:
* Estilos.
*/
var styles = [
'.fa-icon-selector-inner strong {',
' display: block;',
' margin-bottom: 4px;',
' font-weight: bold;',
'}',
'',
'.fa-icon-selector .fa-tag-form-group {',
' display: inline-block;',
' margin-right: 15px;',
' margin-top: 4px;',
'}',
'',
'.fa-tagged-link {',
' text-decoration: none !important;',
'}',
'',
'.fa-tagged-link:hover {',
' color: #f73 !important;',
' text-decoration: none !important;',
'}',
'',
'span.fa-topic-tag {',
' color: #fff;',
' background-color: #39c;',
' padding: 1px 5px;',
' border-radius: 3px;',
' margin-right: 4px;',
' display: inline;',
' text-decoration: none!important',
'}'
].join('\n');

$(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');

});
}(jQuery));

Questo è per gli avvisi etc...lo devi inserire in Java nei subforum

Codice:

$(function() {$('img[src="https://i.servimg.com/u/f59/17/46/64/29/cattur44.jpg"]').closest('tr').addClass('Announcement'); });
$(function() {$('img[src="https://i.servimg.com/u/f74/11/73/57/31/cattur10.jpg"]').closest('tr').addClass('Sticky');});
$(function() {$('img[src="https://i.servimg.com/u/f60/19/38/05/12/global10.png"]').closest('tr').addClass('Global');});

Nel css

Codice:


/*annunci,avviso,importante subforum*/
tr.Global td {
  background: #ff69b4 none repeat scroll 0 0 !important;}

tr.Announcement td {
  background: #f25060 none repeat scroll 0 0 !important;}

tr.Sticky td {
  background: #00BFFF none repeat scroll 0 0 !important;}


Devi scrivere avviso o altro a mano tra le parentesi
[Quadre] all'inizio nel nuovo messaggio.Prova tutto poi ci sentiamo

Allora, per le targhette sembra funzionare, metto due immagini





e qui si vedono due targhette colorate e una targhetta che dovrebbe essere un annuncio, la parte della seconda spiegazione, che però non funziona

Vedi che tu non mi ascolti...hahahaha ti ho detto che ha solo 2 funzioni ora aggiungiamo le funzioni   non devi fare molto devi fare copia incolla di uno dei tag esempio aggiungiamo  questo

Codice:

{
tag: 'annuncio globale',
background: '#fff'
}

ATTENZIONE se lo aggiungi per ultimo va bene cosi SE lo aggiungi in mezzo dopo la parentesi } graffa ci deve essere la , virgola  chiusura }  virgola , apertura
{



spero di essere stata chiara

@jessy, ma io ti ascolto!
infatti la prima parte ho detto che funziona.
Quello che non funziona è questa parte qui sotto, dove mi hai detto di mettere manualmente tra parentesi quadre il nome della targhetta, tipo annuncio avviso ecc...

jessy ha scritto:Questo è per gli avvisi etc...lo devi inserire in Java nei subforum

Codice:

$(function() {$('img[src="https://i.servimg.com/u/f59/17/46/64/29/cattur44.jpg"]').closest('tr').addClass('Announcement'); });
$(function() {$('img[src="https://i.servimg.com/u/f74/11/73/57/31/cattur10.jpg"]').closest('tr').addClass('Sticky');});
$(function() {$('img[src="https://i.servimg.com/u/f60/19/38/05/12/global10.png"]').closest('tr').addClass('Global');});

Nel css

Codice:


/*annunci,avviso,importante subforum*/
tr.Global td {
  background: #ff69b4 none repeat scroll 0 0 !important;}

tr.Announcement td {
  background: #f25060 none repeat scroll 0 0 !important;}

tr.Sticky td {
  background: #00BFFF none repeat scroll 0 0 !important;}


Devi scrivere avviso o altro a mano tra le parentesi
[Quadre] all'inizio nel nuovo messaggio.Prova tutto poi ci sentiamo

Andiamo per ordine:
Metti l'icona che è nello script nel pannello--immagini--impostazione delle icone.e dagli lo stesso nome.
Metti i due codici.apri un forum dove gli ospiti possono scrivere un argomento.cosi provo

Dimenticavo : se nel pannello,generale,messaggi & email, configurazione nei box personalizza etichette devono essere tutti e 3 vuoti

Ok, fatto tutto...
"forum test" è dove puoi fare le prove

edit: questo script fa conflitto con quello dei colori dei titoli, o colori i titoli o metti questa etichetta

Non non c'è conflitto,dove vuoi mettimi solo il link.
Dunque mi sono informata bene ,per dare il colore alla categoria annuncio etc ,non devi scrivere niente basta solo fleggare sull'icona che vuoi inserire nel nostro caso annunci fasta che l'icona dello script sia uguale a quella inserita nelle immagini annunci sul pannello.Comunque proviamo a fare un test

il forum per i test è questo:
https://elvenar.forumattivo.com/f15-forum-test

io ho provato, ma mi pare che non va
le immagini sono le stesse sia nello script che nelle immagini degli argomenti

edit: aspetta, controllo meglio, poiché l'annuncio globale funziona con la tua immagine
gli avvisi e gli annunci con le mie immagini no, quindi controllo di aver messo giusto l'indirizzo nello script

ri-edit:
no, non mi funziona, funziona solo l'annuncio globale. Questo lo script

Codice:

$(function() {$('img[src="https://i.ibb.co/XxHMyBc/guide3.png"]').closest('tr').addClass('Announcement'); });
$(function() {$('img[src="https://i.ibb.co/tzM1vvj/comunicazione2.png"]').closest('tr').addClass('Sticky');});
$(function() {$('img[src="https://i.servimg.com/u/f60/19/38/05/12/global10.png"]').closest('tr').addClass('Global');});

edit:
quindi non gli piace gli indirizzi che metto io. Ho cambiato anche l'immagine degli annunci globali e non va.
Forse c'è un modo specifico per mettere gli indirizzi dentro uno script?

scusa non posso vedere se non sono registrato creami un utente in prova. temo che fai qualche passaggio sbagliato

se metto il codice così com'è funziona tutto, se cambio gli indirizzi delle immagini non funziona più. Provato e riprovato in tutti i modi, anche a scriverlo manualmente senza copia e incolla, ma se cambio immagine non funziona più.

A parte che non so come creare un utente, era anche una cosa che volevo chiedere se c'era la possibilità di farlo da pannello...
ma puoi accedere al link che ti ho dato, ho appena verificato come ospite e posso accedere e scrivere
https://elvenar.forumattivo.com/f15-forum-test

vediamo un attimo di riepilogare 



devono essere inserite qui

Codice:

$(function() {$('img[src="https://i.ibb.co/XxHMyBc/guide3.png"]').closest('tr').addClass('Announcement'); });
$(function() {$('img[src="https://i.ibb.co/tzM1vvj/comunicazione2.png"]').closest('tr').addClass('Sticky');});
$(function() {$('img[src="https://i.servimg.com/u/f60/19/38/05/12/global10.png"]').closest('tr').addClass('Global');});

nei subforum (naturalmente piu il css)

nello script c'è questa immagine


e nel pannello visualizzazione , immagini e colori , gestioni delle immagini , impostazione delle icone



per avere questo risultato nella creazione degli argomenti



Una volta creato il nuovo argomento ti basterà clikkare su e salvare ,la categoria con quella icona avrà il suo sfondo. Proviamo a rifare tutti i passaggi  

Ho fatto una prova con le targhette e vedo che il risultato e' buono per il resto non essendo registrata non posso fare altro.

riepilogo:
La questione delle targhette funziona bene, e possiamo anche archiviarla per il momento, concentriamoci solo sulla colorazione dei TR degli annunci/avvisi

ho fatto tutti i passaggi da te descritti, ovvero:
1. Ho copiato lo script e l'ho incollato nello spazio dedicato agli script mettendo la spunta su "sub-forum"
2. ho copiato il css e l'ho messo dentro il css
3. ho caricato 3 immagini nel mio spazio per le immagini e ho prelevato i link diretti
4. ho incollato i link diretti sia nello script che nel pannello di immagini avanzate "icone degli argomenti" alle voci "avviso" "annuncio" e "annuncio globale"


NON ho inserito queste icone tramite "impostazioni delle icone" perché mi pare che non c'entri nulla, e infatti se io prelevo il codice tuo senza modificare le immagini funziona perfettamente.

guarda l'immagine, ci sono 4 argomenti: l'ultimo è quello scritto da te, i primo tre sono, nell'ordine: annuncio globale, annuncio, e avviso
L'avviso è correttamente colorato come lo script dovrebbe fare, gli altri due invece no. E questo perché nei primo due ho cambiato le icone e nell'avviso invece no. Se lascio il tuo script in originale funziona tutto perfettamente, ma se vado a personalizzare le icone non funziona più niente

giusto per essere il più chiaro possibile

non so perché, ma come per magia stamattina funzionava tutto. Ho anche cambiato tutte le icone e non ho fatto niente di diverso da quanto facessi ieri



ora direi di avere un sacco di cose in abbondanza, da nessuna etichetta a una moltitudine di etichette! Pure la descrizione ho messo in etichetta pensando che per le altre cose non ne avrei avuta nessuna!  

Un mille volte grazie a @jessy per la pazienza!
Senza di te non avrei mai avuto questa chicca nel mio forum!

jessy ha scritto:
»Pannello di amministrazione> Moduli> HTML & JAVASCRIPT> Gestione dei codici JavaScript
Posizione: su tutte le pagine

Codice:

$(function() {
    const PREFIJOS_TEMAS = [];
    /**** ZONA EDITABLE ***/
    PREFIJOS_TEMAS.push(new Array("[GUERREROS]", "green"));
    PREFIJOS_TEMAS.push(new Array("[MAGOS]", "red"));
    PREFIJOS_TEMAS.push(new Array("[ASESORES]", "#FFFF00"));
    PREFIJOS_TEMAS.push(new Array("[PSICOLOGOS]", "#00008B"));
    PREFIJOS_TEMAS.push(new Array("[PSIQUIATRAS]", "#87CEEB"));
    PREFIJOS_TEMAS.push(new Array("[Resuelto]", "grey"));
    PREFIJOS_TEMAS.push(new Array("[TUTORIAL]", ""));

    const añadir_estilo_enlaces_temas = true; /* true ó false */
    const eliminarCorchetes = true; /* true ó false */

    /*** FIN ZONA EDITABLE ***/

    if (/^\/post/.test($(location).attr('pathname') + $(location).attr('search')) && $('.submit-buttons input[value="newtopic"]').length) {
        let html_options_prefijo = "<select name='prefijos'><option value='' style='background:COLOR'>== Prefijos ==</option>";
        for (let prefijo in PREFIJOS_TEMAS) {
            html_options_prefijo += "<option value='" + PREFIJOS_TEMAS[prefijo][0] + "' style='background:" + PREFIJOS_TEMAS[prefijo][1] + "'>" + PREFIJOS_TEMAS[prefijo][0] + "</option>"
        }
        html_options_prefijo += "</select>";
        $('input[name="subject"]').before(html_options_prefijo);
        $("form[method='post']").submit(function() {
            $('input[name="subject"]').val(($('select[name="prefijos"]').val() ? $('select[name="prefijos"]').val() + " " : "") + $('input[name="subject"]').val())
        })
    }

    if (añadir_estilo_enlaces_temas == true) {
        $('a').each(function() {
            for (let prefijo in PREFIJOS_TEMAS) {
                let preSin = PREFIJOS_TEMAS[prefijo][0].replace("[", "").replace("]", "");
                let pref = preSin.toLowerCase();
                let preg = new RegExp("^\/t\\d+(p\\d+)?\\-" + pref);
                if (preg.test($(this).attr('href'))) {
                    let preBool = (eliminarCorchetes == true) ? preSin : PREFIJOS_TEMAS[prefijo][0];
                    let prePatron = new RegExp("\\[" + preSin + "\\]");
                    $(this).html($(this).html().replace(prePatron, "<span class='title_prefix title_prefix-" + pref + "'>" + preBool + "</span>"));
                    break;
                }
            }
        });
    }
});

nel CSS

Codice:

.js-marquee {
   line-height: 17px;
   overflow-wrap: break-word;
}

.title_prefix {
   border: 1px solid;
   border-radius: 5px;
   padding: 1.5px;
   margin-right: 3px;
}

dd.lastpost span,dd.moderation span,dd.redirect span,ul.topiclist dd.info span,ul.topiclist dd.searchby span,ul.topiclist dd.time span {
   display: inline;
   line-height: 17px;
}

.title_prefix-resuelto {
   background-color: red;
   color: white;
}

.title_prefix-guerreros {
   background-color: yellow;
   font-weight: bold;
}

.title_prefix-magos_supremos {
   background-color: blue;
   color: yellow;
}
]

Questo è il codice delle etichette, e come dicevo questo script deve fare conflitto con quello per colorare i titoli.
Come si vede dall'immagine sottostante ci sono due titoli colorati, in origine erano tre, anche "missioni elfi capitolo 3" era colorato. Poi ho messo l'etichetta e il titolo è tornato di nuovo con colore di default.

Questa cosa non è tanto importante per me, lo dico solo per esaustività della questione. E se credete potrei spostare questo post nella discussione legata appunto ai titoli colorati. Come credete.

In ogni caso per me si può anche pinnare come risolto, aspetto solo di fare qualche altra verifica e poi lo faccio

non capisco ma tu per le etichette non hai inserito questo 
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147549

e questo per gli avvisi
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147550

quello che centra?

jessy ha scritto:non capisco ma tu per le etichette non hai inserito questo 
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147549

e questo per gli avvisi
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147550

quello che centra?

si scusa, hai ragione, ho fatto confusione con i codici.
Si per le etichette ho messo quello che hai linkato tu ora
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147549

ed è questo che fa conflitto. Se metto l'etichetta non posso colorare i titoli e viceversa.

quello per gli avvisi da te linkato:
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147550
funziona ma non benissimo. Sembra funzionare solo se hosto le immagini in servimg, quello che sta anche in questo forum. Se le hosto altrove non funziona più. Sai dirmi il perché?

myt ha scritto:Si per le etichette ho messo quello che hai linkato tu ora
https://aiuto.forumattivo.it/t20809p25-personalizza-l-etichetta-annunci-e-avvisi#147549
ed è questo che fa conflitto. Se metto l'etichetta non posso colorare i titoli e viceversa.

Poi lo provo ..pero' una domanda oltre alle etichette usi pure il testo colorate di default ?

myt ha scritto:funziona ma non benissimo. Sembra funzionare solo se hosto le immagini in servimg, quello che sta anche in questo forum. Se le hosto altrove non funziona più. Sai dirmi il perché?

non saprei anche a me fa cosi.

Edit: a me il colore dei testi argomenti non funziona anche senza lo script...prova tu

jessy ha scritto:Poi lo provo ..pero' una domanda oltre alle etichette usi pure il testo colorate di default ?

Edit: a me il colore dei testi argomenti non funziona anche senza lo script...prova tu

Non ho capito tanto bene cosa intendi...
ho messo lo script per colorare i titoli degli argomenti, e ho messo la spunta in PCA per poterli utilizzare colorati.
Se mi chiedi se nell'elenco dei colori dei titoli ho sia quelli di default che quelli aggiunti dallo script la risposta è Sì

Ti dicevo che a me in 2 forum il colore dei titoli non funzione a prescindere.Ate senza lo script funziona?