Visualizzazione suggerimento topic e riga in post

Salve a todos, oggi vengo in pace con domande sulla visualizzazione.

Vado dritto al dunque:

1. Vorrei migliorare la visualizzazione dei "suggerimenti alla creazione del topic", niente di esagerato, una cosa tranquilla, anche simile a come c'è su questo forum.

Questo è il codice:

[code]/\?f=\d

2) Non è così semplice non esiste una funzione per sfumare i bordi (o almeno io non la conosco), ma c'è solo per i box. Inoltre non si può accorciare il bordo. Ti spiego come funziona in pratica:

Questa evidenziata è una sezione di un argomento chiamata post-head. Associata ad essa c'è un CSS che gli dice "metti un bordo di 1px azzurro sotto di te"


Non c'è quindi modo di accorciare il bordo, a meno che non si accorci l'intera sezione:


3) Non ho questo problema sul mio forum di test. Quindi probabilmente è dovuto a qualche modifica/personalizzazione che hai aggiunto. Forse a ccausa del box verde per il rango. Prova a vedere se così riesci a risolvere:

Codice:

#fa_menulist {
   padding: 9px 18px 20px 198px !important;
}

1) Aggiungi questo per migliorare il titolo "Mostra argomenti simili" / "Nascondi argomenti simili"

Codice:

#similarToggle {
   color: #3793ff;
   font-weight: bold;
   margin-top: 17px;
}

Per aggiungere icone, immagini, ecc... bisogna farlo direttamente modificando il codice javascript e mettendole nella parte inerente all'HTML

Per il punto 1 non ho ben chiaro cosa intendi per "migliorare", ma nel codice vi è un BUG a dir poco megalomane che segnalerò a mattia..
in tutti i casi eccoti il codice contenente il fix..

Codice:

if (/\?f=\d+&mode=newtopic/.test(window.location.search)) $(function() {
    var s = document.getElementsByTagName('INPUT'),
        i, b, v = '',
        t = false,
        delayRequest = 2, // ritardo fra una richiesta e l'altra in secondi
        y = function() {
            t = false;
            $('#topicSimilar').load('/search?search_keywords=' + encodeURIComponent(v) + ' a.topictitle', function() {
                $(this).find('a').attr({
                    'target': '_blank',
                    'style': 'display:block'
                });
                if (t) setTimeout(y, delayRequest * 1000);
            });
        };
    for (i = 0; i < s.length; i++) {
        if (/subject/.test(s[i].name)) {
            var d = document.createElement('DIV');
            d.innerHTML = '<div id="similarToggle" class="h3">Controlla se sono stati creati argomenti simili</div><div id="topicSimilar" style="display:none">Effettua una ricerca per trovare argomenti simili al tuo..</div>';
            s[i].parentNode.appendChild(d);

            s[i].onkeyup = function() {
                if (!t) {
                    t = true;
                    setTimeout(y, delayRequest * 1000);
                } else {
                    $('#topicSimilar').html('Nessun argomento trovato..');
                }
                if (this.value.length > 3) {
                    v = this.value;
                }
                console.log(v);
            };
            b = document.getElementById('similarToggle');
            b.style.cursor = 'pointer';
            b.onclick = function() {
                var box = document.getElementById('topicSimilar');
                if (/none/.test(box.style.display)) {
                    box.style.display = 'block';
                    this.innerHTML = 'Nascondi argomenti simili';
                } else {
                    box.style.display = 'none';
                    this.innerHTML = 'Mostra argomenti simili';
                }
            };
            break;
        }
    }
});

Per il punto 2 dallo screen da te postato quello pare essere un bordo in CSS e non sono spezzabili a meno che non si editi l'HTML.  
Ma, come avrai notato, l'immagine del profilo è sovrapposta al bordo in interesse, quindi ti basterà "sfumare" l'avatar stesso con il colore di sfondo.
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Invece per il punto 3 è un problema di overflow per risolvere ti basterà eliminare o aumentare nel tuo CSS il parametro height di quel menu.

Codice:

#fa_menulist {
  height-min: 500px;
  height: 500px;
}

Nel codice di esempio ti ho messo 500px, ma sarà sicuramente esagerato, quindi vedi un po tu..

@MattiaDes :

1. È decisamente molto meglio, grazie mille! per l'immagine poi ci penserò un'altra volta in caso.

2. Immaginavo non si potesse fare, pensavo che si potesse ovviare togliendo la riga blu ed inserendoci un'immagine, ma vabbè, diciamo che non sarebbe un grosso problema se riuscissi a fare un'altra cosa, ma la esporrò poi in un topic perchè è un po' complessa da spiegare qui in due righe.

3. Grazie  risolto anche questo 

@Diego : 

1. Non so ovviamente di quale bug parli perchè non me ne intendo xD ma grazie millemila per il fix! Ho però cambiato il delay da 2 secondi a 0, potrebbe essere un problema?

2. Immaginavo infatti fosse più problematica la cosa, comunque diciamo che avrei in "progetto" un'altro lavoro per quella linea, quindi appena riuscirò ad esporre bene l'idea aprirò un nuovo topic, sperando egoisticamente anche in un tuo aiuto   in ogni caso proverò a studiarmi quel che mi hai linkato per vedere se riesco a combinare qualcosa io, grazie mille!

3. Funziona perfettamente anche questo xD immagino di aver l'imbarazzo della scelta ora.


Grazie tanto ragazzi! Ogni giorno mi avvicino sempre più a quel che voglio, ed il merito è principalmente vostro °L° Nel frattempo, vi auguro una calorosa giornata.

Simone Boi ha scritto:1. Non so ovviamente di quale bug parli perchè non me ne intendo xD ma grazie millemila per il fix! Ho però cambiato il delay da 2 secondi a 0, potrebbe essere un problema?

2. Immaginavo infatti fosse più problematica la cosa, comunque diciamo che avrei in "progetto" un'altro lavoro per quella linea, quindi appena riuscirò ad esporre bene l'idea aprirò un nuovo topic, sperando egoisticamente anche in un tuo aiuto   in ogni caso proverò a studiarmi quel che mi hai linkato per vedere se riesco a combinare qualcosa io, grazie mille!

3. Funziona perfettamente anche questo xD immagino di aver l'imbarazzo della scelta ora.


Grazie tanto ragazzi! Ogni giorno mi avvicino sempre più a quel che voglio, ed il merito è principalmente vostro °L° Nel frattempo, vi auguro una calorosa giornata.

1. Se lo tieni a zero il fix diventa nullo e se qualcuno, con una buona connessione, appoggia qualcosa sulla tastiera ti butta offline il forum..
Personalmente 1.5 mi pare un valore più che accettabile..

Perfetto! Menomale che te l'ho chiesto allora xD Grazie mille!

Per il punto 2 intendevo qualcosa del genere:

Codice:

.post .postprofile-avatar img {
 box-shadow: 0px 0px 50px #fff;
}

L'effetto risulta alquanto delicato e apprezzabile, mentre se desideri qualcosa di più vistoso allora devi ricorrere a mezzi un po più drastici, come ad esempio aggiungendo un'immagine di fondo sfumata lateralmente che crei l'effetto richiesto.

Codice:

.post .postprofile-avatar img {
 padding: 10px;
 background-image: url('URL IMG TUO EFFETTO');
 border: none;
}

.postprofile-avatar img {
 box-shadow: none;
}

Ho provato ad inserire questo:

Codice:

.post .postprofile-avatar img {
 padding: 10px;
 background-image: url('https://www.fattidicultura.it/wp-content/uploads/2018/08/linea.png');
 border: none;
}

.postprofile-avatar img {
 box-shadow: none;
}


ma viene fuori così:

Beh.. l'immagine da te usata non è proprio "adatta"..
inoltre vedo che hai aggiunto un bordo esterno e il risultato è ovviamente uno schifo..

Codice:

.post .postprofile-avatar img {
 padding: 10px;
 background-image: url('https://i39.servimg.com/u/f39/13/80/01/02/a10.png');
 border: none;
background-position: 0px 0px;
background-repeat: no-repeat;
}

Intendevo una immagine come quella..

D'oh scusa t.t ora ho capito, perdonami ma ancora non capisco molto di codici, grazie mille! 

Perfetto

Per fortuna che c'è Diego che ogni tanto corre in mio soccorso

Sposto tra i risolti, alla prossima!