La data/ora di oggi è Sab 24 Feb 2018 - 3:34

3 Risultati trovati per "hashtag"

Una recensione per il mio forum

Recensione su un settore: THETAMULTIGAMING





Thetamultigaming



 Prima impressione


  • La prima impressione, è abbastanza buona, anche se ci sono dettagli che cadono subito all'occhio.
    partiamo dal tema, mi fa piacere vedere che il tema ModernBB, sia di gradimento degli utenti.
    Lo sfondo nel header, non mi sembra molto adatto al tema del forum, sarebbe opportuno modificarlo con uno sfondo che faccia capire a primo impatto, l'argomento del forum. Qui sul forum  di supporto, nella sezione grafica puoi ricevere diversi consigli a riguardo.  
    Passiamo  ora alle categorie, anche qui lo stesso discorso, le immagini di sfondo,non sono adatte, e non si abbinano con l'argomento del forum. Penso anche  che sarebbe molto carino se personalizzassi il tema,  modificando i colori e i font, sarebbe molto più carino e più....personale Very Happy
    Un'altro aspetto negativo, è lo spazio libero che si trova tra la legenda e il fondo pagina. L'inconveniente è dato dai numerosi widget inseriti, si potrebbe risolvere creando un portale e inserirci li alcuni widget, e magari collegandolo anche alla sezione "benvenuti", in modo che non risulti troppo vuoto.    




Punti di forza

  • Utilizzo del nuovo tema ModernBB
  • Utilizzo degli #Hashtag
  • Immagini delle sezioni in tema con gli argomenti
  • Sezioni ordinate




 Punti di debolezza

  • Immagini che non riportano all'argomento del forum
  • Molto spazio vuoto, che allunga molto la pagina





Da Teodor
il Gio 25 Mag 2017 - 10:43
 
Ricercare in:
Argomento: Una recensione per il mio forum
Risposte: 9
Visualizzazioni: 461

Tutorial: selezione di Luglio

Tutorial: selezione di Luglio


Carissimi membri,

Forumattivo è orgoglioso di annunciare l'apertura di una nuova #rubrica mensile. Ogni mese infatti, verrà pubblicato un annuncio contente un pack di 5+ tutorial e astuzie per il tuo forum.


Saranno selezionati i migliori #tutorial ed #astuzie per aumentare le personalizzazione dei vostri forum. Iniziamo con il mese di... LUGLIO! /o/



1. Personalizza la tua pagina di errore 404: pagina non trovata:


Quando si fa clic su un collegamento ed è sbagliato o non esiste, ci viene dato un messaggio di errore. Tuttavia, è un messaggio noioso e poco ricco di informazioni. Con questo script, sarà possibile modificare la pagina di errore (#404) a proprio piacimento.

Personalizza la tua pagina di errore 404



2. Creare un widget per il tuo staff online:


Molto spesso, vorremmo mostrare agli utenti connessi, tramite le statistiche esistenti nel nostro forum,che i membri dello staff sono presenti. Con questo tutorial ti insegnerò come creare un #widget che visualizza automaticamente quando un membro dello staff è connesso.

Creare un widget per il tuo staff online



3. Effetto zoom sulle immagini nei topic:


Grazie a questo tutorial potrai inserire la funzionalità di #ingrandire le immagini al passaggio del mouse. Per fare tutto questo, dovrai aggiungere alcuni codici CSS sul tuo forum.

Effetto zoom sulle immagini nei topic



4. Menu di connessione rapida popup:


Normalmente cliccando sul bottone login nel menu di navigazione si viene reindirizzati alla pagina di #connessione.. con questa risorsa non sarà più necessario! Comparirà un popup dal quale potrete collegarvi senza cambiare pagina.

Menu di connessione rapida popup



5. Personalizzare la funzione degli hashtag:


Con questo tutorial, scoprirai come poter personalizzare graficamente, tramite CSS, gli #hashtag sul tuo forum!

Personalizzare la funzione degli hashtag



6. Effetto lightbox nel tuo forum:


Il forum di supporto portoghese ha realizzato un fantastico video per spiegare il funzionamento di questa astuzia Forumattivo. Semplicemente, per le immagini all'interno dei tuoi topic basterà un click per aprire un #popup con una visualizazione dell'immagine più in grande!

Effetto lightbox nel tuo forum



:categoria:E anche questo pack è giunto al termine! Se dovessi avere qualche problema con i tutorial, apri pure una nuova discussione in Problemi con lo script (Codici) :zen:

Se questi contenuti ti sono piaciuti, passa per la sezione Tutoriali, ne potrai trovare molti altri! :W:

Buona giornata da Forumattivo :thanks:


Da MattiaDes
il Mer 15 Lug 2015 - 10:49
 
Ricercare in: Avvisi ed aggiornamenti
Argomento: Tutorial: selezione di Luglio
Risposte: 2
Visualizzazioni: 812

Più opzioni per i tuoi #hashtag

Più opzioni per i tuoi #hashtag



Questo tutorial vi permetterà di scoprire due modi per migliorare l'utilizzo del sistema di #hashtag presente sul tuo forum Forumattivo. Entrambe le funzioni utilizzano il codice #javascript quindi assicurati di averlo attivato Wink

Pannello di amministrazione ► Moduli ► Gestione del codice javascript

Se sei nuovo su Forumattivo, assicurati che sia attivata la gestione del codice javascript (in questa stessa pagina appena aperta). Ora scegli quale o quali opzion installare Wink

  • Hashtag popup options
  • SCEditor hashtag button




Popup per gli Hashtag

Questa modifica fornisce un'opzione avanzata per una migliore interazione con gli hashtag, permettendoti di seguire velocemente nuoti #hashtag, visualizzare i soggetti taggati e gestire i tuoi tag


Crea un nuovo codice javascript con queste impostazioni :new:

  • Titolo: Popup hashtag
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    $(function() {
      var a = document.getElementsByTagName('A'), b = document.createElement('DIV'), i = 0, j = a.length, actif, t;
      b.className = 'fa-hashtag-options';
      b.style.display = 'none';
      document.body.appendChild(b);
     
      for (; i<j; i++) {
        if (a[i].title && /\/tags\//.test(a[i].href) && /^#/.test(a[i].innerHTML)) {
          a[i].className += ' fa-hashtag';
         
          a[i].onclick = function() {
           
            if (actif != this) {
              actif = this, t = this.innerHTML;
              t.length > 24 && (t = t.slice(0, 25).replace(/^\s+|\s+$/g, '') + '...');
             
              b.style.left = $(this).offset().left + 'px';
              b.style.top = $(this).offset().top + 'px';
              b.innerHTML = '<div class="fa-hashtag-title">Opzioni per <span class="fa-hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">Visualizza topic taggati</a>' + (_userdata.session_logged_in ? '<form method="post" name="addtag_form" action="/profile?mode=editprofile&page_profil=tags&start&submit=1"><b>• </b><a href="#" onclick="this.parentNode.submit();return false;">Segui <span class="fa-hashtag-tag">' + t + '</span></a><input name="addtag" type="hidden" value="' + this.innerHTML.slice(1) + '"></form><b>• </b><a href="/profile?mode=editprofile&page_profil=tags">Gestisci Hashtag</a>' : '');
             
              /none/.test(b.style.display) && (b.style.display = 'block');
            } else {
              actif = null;
              b.style.display = 'none';
            }
           
            return false;
          };
        }
      }
    });


Adesso abbiamo solo bisogno di aggiungere un po' di #css in modo che il popup venga visualizzato correttamente. Andate quindi verso Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS e incollate questo codice di stile
Codice:
/* options drop down */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}

/* options title */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}

/* option links */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}

.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}

/* option bullets */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}

/* option tags */
.fa-hashtag-tag {
  color:#000;
  font-weight:bold;
}


Il codice script aggiunge una classname a tutti gli hashtag nei post, in questo modo potrai aggiungere uno stile unico ai tuoi hashtag, utilizzando questi codici di base:
Codice:
/* hashtag styles */
a.fa-hashtag {
  color:#666;
  text-decoration:none;
  background-color:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  display:inline-block;
  padding:3px;
}

a.fa-hashtag:hover {
  color:#333;
  background-color:#DDD;
  border-color:#999;
}


Questo è l'effetto di default, ma potete personalizzarlo in tutti i modi che preferite! Di festa




ScEditor: bottone per gli hashtag

Questa modifica aggiungerà un bottone extra al vostro editor. Con questo bottone potrete inserire il nome di un hashtag, o sceglierlo da una lista di tag predefiniti che stai seguendo


Andate per creare un nuovo codice javascript :new:

  • Titolo: Bottone sceditor hashtag
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function(){
      if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
      var storage = window.localStorage, s = document.createElement('SELECT'), tags = '';
     
      if (storage && storage.faTags && storage.faTagsExp > +new Date - 29*59*1000 && storage.faTagsUser == _userdata.username) s.innerHTML = storage.faTags;
      else {
        $.get('/profile?mode=editprofile&page_profil=tags', function(d) {
          var h = $('form[name="tag_list"] a', d);
       
          if (h.length) {
            for (var i = 0, j = h.length, txt; i<j; i++) {
              txt = h[i].innerHTML.replace(/^\s+|\s+$/g,'');
              if (/^#/.test(txt)) {
                !tags && (tags += '<option value="">Seleziona un tag</option>');
                tags += '<option value="'+ txt.slice(1) +'">' + (txt.length > 24 ? txt.slice(0, 25) + '...' : txt) + '</option>';
              }
            }
            s.innerHTML = tags;
          }
       
          if (storage) {
            storage.faTags = tags ? tags : 0;
            storage.faTagsUser = _userdata.username;
            storage.faTagsExp = +new Date;
          }
        });
      }
       
     
      $.sceditor.command.set('hashtag', {
        dropDown : function(editor, caller, callback) {
          var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
          b.type = 'button';
          b.value = 'Insert';
          b.className = 'button';
         
          c.type = 'text';
          c.id = 'fa-hashtag';
         
          a.innerHTML = '<div><label for="fa-hashtag">Hashtag :</label></div>' + ( s.innerHTML ? '<div><label>Tags seguiti :</label></div>' : '' ) + '<div></div>';
          a.firstChild.appendChild(c);
          a.lastChild.appendChild(b);
         
          if (s.innerHTML != 0) {
            s.value = '';
            a.getElementsByTagName('DIV')[1].appendChild(s);
            s.onchange = function() {
              c.value = s.value;
            };
          }
         
          b.onclick = function() {
            c.value && callback(c.value);
            editor.closeDropDown(true);
          };

          editor.createDropDown(caller, 'inserthashtag', a);
        },

        exec : function(c) { tag(c, this) },
        txtExec : function(c) { tag(c, this) },
       
        tooltip : 'Aggiungi un hashtag'
      });
     
      toolbar = toolbar.replace(/quote,/,'hashtag,quote,');
     
      function tag(c, e) {
        $.sceditor.command.get('hashtag').dropDown(e, c, function(tag) {
          e.insertText('#' + tag.replace(/^#/,'').replace(/[\xD7\xF7\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\xBF]/g, '_') + ' ');
        });
      }
    });


Exclamation Attenzione: i caratteri no validi saranno sostituiti da un _

Quindi il bottone ha una sua icona e anche il menu a comparsa, è quindi necessario aggiungere del css al vostro foglio di stile. Andate quindi verso Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS e incollate questo codice di stile
Codice:
/* button image */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }

/* drop down input */
#fa-hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}


Cliccate Conferma e sarete pronti per taggare i vostri topic :W:


Da Niko
il Ven 1 Mag 2015 - 12:26
 
Ricercare in: Tutorial
Argomento: Più opzioni per i tuoi #hashtag
Risposte: 0
Visualizzazioni: 957

Tornare in alto

Andare verso: