La data/ora di oggi è Ven 18 Ago 2017 - 7:10

9 Risultati trovati per "css"

Icone troppo grandi

Ma perchè quelle sono altre icone... sono in un'altra posizione Embarassed

Aggiungi questo nel tuo foglio di stile #CSS
Codice:
#ucp > div:nth-child(4) > div > fieldset > dl > dt > span > img {
    width: 18px;
    vertical-align: middle;
}
Da Niko
il Sab 27 Mag 2017 - 14:07
 
Ricercare in: I problemi risolti con l'aspetto del forum
Argomento: Icone troppo grandi
Risposte: 12
Visualizzazioni: 489

Tasto "cerca" nel menu principale

@rart oh si hai ragione, errore mio Embarassed Di festa

prova ad aggiungere questo #CSS
Codice:
div#search_menu {
    position: fixed!important;
    top: 20%!important;
}
Da Niko
il Mar 18 Ott 2016 - 21:34
 
Ricercare in: I problemi risolti con l'aspetto del forum
Argomento: Tasto "cerca" nel menu principale
Risposte: 9
Visualizzazioni: 276

Sfondo secondario personalizzato

Ciao @TaekwondoWTF84

basta aggiungere questo codice #css :bene:
Codice:
.bodyline {
    background-color: transparent!important;
}
Da Niko
il Dom 27 Dic 2015 - 13:45
 
Ricercare in: I problemi risolti con l'aspetto del forum
Argomento: Sfondo secondario personalizzato
Risposte: 3
Visualizzazioni: 351

Topic staff

Per modificare i colori puoi usare il #CSS Wink
ad esempio se la tua tabella è

Codice:
<table class="staff" width="75%" border="1">
    <tr>
      <td width="25%">prima cella</td>
      <td width="75%">seconda cella</td>
  </tr>
 
  <tr>
      <td width="25%">terza cella</td>
      <td width="75%">quarta cella</td>
  </tr>
</table>
 


potrai modificarla inserendo il css:
Codice:
table.staff {
color: red;
background: #fafafa;
}
Da Niko
il Mer 16 Set 2015 - 16:47
 
Ricercare in: Argomenti diversi chiusi
Argomento: Topic staff
Risposte: 9
Visualizzazioni: 454

mettere a destra le vari opzioni dei topic

Ciao,

@MattiaDes ha scritto:Ma sono box molto larghi, non penso davvero possano riuscire a starci sulla destra..

concordo pienamente - non avevo ancora letto gli altri messaggi ma anche io avevo pensato lo stesso :bene:

@MattiaDes ha scritto:Le parte delle opzioni sono racchiuse in poche variabili via template.. non c'è molto da fare

Sinceramente non so proprio come rendere fattibile la tua richiesta
Sarebbe comodo se si potessero prendere pezzi di un templates e metterli altrove, ma non è possibile


Ho provato a valutare anche con il #CSS e con #Javascript ma c'è ben poco da poter fare in questo caso Rolling Eyes
ci sono poche variabili e non porterebbero al risultato desiderato

:zen:
Da Niko
il Ven 24 Lug 2015 - 17:03
 
Ricercare in: I problemi risolti con l'aspetto del forum
Argomento: mettere a destra le vari opzioni dei topic
Risposte: 12
Visualizzazioni: 547

Modificare la grandezza dei caratteri del titolo dei forum nella home

Ciao @saxismawe

prova con questo #css e dimmi se ho capito bene Razz
Codice:
dl > dd.dterm > div > h3 > a.forumtitle {
//* contenuto
}
Da Niko
il Gio 18 Giu 2015 - 15:56
 
Ricercare in: I problemi risolti con l'aspetto del forum
Argomento: Modificare la grandezza dei caratteri del titolo dei forum nella home
Risposte: 11
Visualizzazioni: 686

Personalizzazione della chatbox

Personalizzazione della chatbox



Personalizza la tua chatbox Forumattivo !

Ecco a voi alcuni codici importantissimi e utili per personalizzare i testi e gli sfondi della vostra #chatbox Wink
Non dovrete fare altro che copiare e incollare i codici che prefererite (quanti ne volete) nel vostro foglio di stile #css :

Pannello di amministrazione Visualizzazione Colori "Foglio di stile CSS"

Modifica i colori di sfondo
Modifica i colori dei testi
Altre modifiche (avatars, bottoni, linee,...)


Modifica dei colori di sfondo della chatbox

Ecco a voi un esempio di una chatbox con i colori di sfondo modificati, per aiutarvi poi a capire meglio in fondo:


Idea Per ogni codice dovrete modificare COLORE con quello che preferite

►Modifica lo sfondo della parte iniziale della chatbox (in blu nell'esempio)
Codice:
#chatbox_header, td.catBottom, #chatbox_header.main-head {
  background: COLORE;
}


► Modificare la parte dei membri (in verde nell'esempio)
Codice:
#chatbox_members {
  background: COLORE;
}


► Modificare lo sfondo dell'intestazione della lista dei membri (in rosso nell'esempio)
Codice:
#chatbox_members .member-title {
  background: COLORE;
}


► Modificare lo sfondo della parte chat (in viola nell'esempio)
Codice:
#chatbox {
  background: COLORE;
}


► Modificare il colore dello sfondo delle righe "pari" (in arancione nell'esempio)
Codice:
.chatbox_row_1 {
  background: COLORE;
}


► Modificare il colore dello sfondo delle righe "dispari" (in azzurro nell'esempio)
Codice:
.chatbox_row_2 {
  background: COLORE;
}


► Modificare il colore di sfondo della barra dei bottoni (in rosa nell'esempio)
Codice:
#chatbox_messenger .catBottom, body.chatbox, #chatbox_footer {
  background: COLORE;
}


► Modificare lo sfondo della zona di edizione (in grigio nell'esempio)
Codice:
#chatbox_footer #message {
  background: COLORE;
}




Modifica dei colori del testo nella chatbox

Idea Per ogni codice dovrete modificare COLORE con quello che preferite

► Modifica il colore del titolo della chatbox
Codice:
.chatbox a.cattitle, .chatbox-title, .chatbox-title a.chat-title {
  color: COLORE !important;
}

Il !important è da lasciare alla fine della riga

► Modifica il colore dei link e le opzioni in alto a destra della chatbox
Codice:
.chatbox-options a, .chatbox-options li, .chatbox-options li a, .chatbox-options li label {
  color: COLORE;
}



► Modifica dei colori dei titoli nella parte della lista dei membri (connesso, assente)
Codice:
#chatbox_members .member-title {
  color: COLORE;
}



► Modifica dei colori dei messaggi verdi per la connessione di un membro
Codice:
.msg span[style="color:green"] strong {
  color: COLORE;
}



► Modificare dle colore dei messaggi rossi per la disconnessione di un membro
Codice:
.msg span[style="color:red"] strong {
  color: COLORE;
}



► Modifica del colore dei messaggi in /me:
Codice:
.msg span[style="color:undefined"] {
  color: COLORE;
}



► Modifica il colore di data/ora
Codice:
.date-and-time {
  color: COLORE;
}



Altre modifiche nella chatbox

► Non visualizzare data e ora dei messaggi
Codice:
.date-and-time {
  display: none;
}



► Modifica il colore del bordo nei messaggi (quando gli avatar nella chatbox sono attivi)
Codice:
#chatbox > p {
  border-color: COLORE !important;
}



► Nascondi i bordi nei messaggi (quando gli avatar nella chatbox sono attivi)
Codice:
#chatbox > p {
  border: none !important;
}


► phpBB3 : Nascondi gli spazi tra i messaggi
Codice:
#chatbox > p {
  margin: 0;
}



► Modifica le dimensioni degli avatar nella chatbox
Codice:
#chatbox .cb-avatar {
  width: auto !important;
  height: auto !important;
}
#chatbox .cb-avatar > img {
  width: auto !important;
  height: auto !important;
  max-width: 50px;  /*larghezza massima degli avatar nella chatbox*/
  max-height: 50px;  /*altezza massima degli avatar nella chatbox*/
}


Modificate i valori dell'altezza massima e della larghezza massima (qui 50px per entrambi) a vostra preferenza. Questo codice permette anche di evitare la deformazione delle immagini Wink


► Nascondi i colori di sfondo negli avatar
Codice:
#chatbox .cb-avatar {
  background: none !important;
}



► Modifica i bottoni della chatbox

I codici successivi permettono la modifica dei colori di fondi di bottoni e testo dei bottoni, e dei bordi degli stessi

Codice:
#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COLORE !important;
  color: COLORE !important;
  border: 1px solid COLORE;
}


Sostituite COLORE con il colore a vostra scelta
Les !important sont à laisser juste après les codes des couleurs.

Potete anche modificare/completare questo codice a vostro gusto, aggiungendo per esempio:
border-radius: 50%;
per avere dei bordi arrotondati, ottenendo quindi:

Codice:
#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COLORE !important;
  color: COLORE !important;
  border: 1px solid COLORE;
  border-radius: 50%;
}



► Modifica la larghezza della colonna dei membri
Codice:
#chatbox_members {
  width: 100px;  /*larghezza della colonna dei membri connessi alla chatbox*/
}
#chatbox {
  left: 101px;  /*stessa larghezza + 1px */
}


Modificate i valori (qui 100 e 101) come preferite :bene:


► Modifica dell'altezza della chatbox sull'indice
Codice:
#chatbox_top, #chatbox_bottom {
  height: 500px !important;
}


Modificate il valore (qui 500px) per l'altezza.
Il flag !important è da lasciare alla fine della riga




Altri tutorial per la tua chatbox
10 Codici per personalizzare la tua chatbox


Da Niko
il Ven 12 Giu 2015 - 12:15
 
Ricercare in: Tutorial
Argomento: Personalizzazione della chatbox
Risposte: 0
Visualizzazioni: 961

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: 735

Come usare Hitskin

Purtroppo il servizio hitskin è solo per Forumattivo, quindi non penso esistano dei siti o programmi per creare temi personalizzati Piangendo

l'unico modo è armarsi di fantasia e creatività e avere un po' di conoscenza di codici #css
Da Niko
il Ven 23 Gen 2015 - 22:13
 
Ricercare in: Problemi risolti per HitSkin
Argomento: Come usare Hitskin
Risposte: 3
Visualizzazioni: 770

Tornare in alto

Andare verso: