vHosting 0
vhs728x90
Risultati da 1 a 6 di 6
  1. #1
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito [GUIDA] Personalizzare il postbit_classic

    Visto che la prima versione di questa guida, che ho comunque ho corretto e lasciato nello spoiler alla fine di questo messaggio, conteneva diversi errori, ne ho approfittato farne una seconda con qualche miglioramento, spero apprezzato. Chi vuole può usare la prima versione senza problemi.


    Purtroppo la visualizzazione dei riflessi è limitata a Google Chrome; per alcuni altri browser ci sono varie soluzioni, che però non tratterò. Comunque, ho cercato di fare le modifiche affinché abbia un aspetto gradevole anche senza riflessi.


    Anteprima con Google Chrome:

    Anteprima_Chrome.png


    Anteprima con Firefox:

    Anteprima_Firefox.png


    Anteprima con Opera:

    Anteprima_Opera.png


    Passiamo al tutorial vero e proprio.


    Nel global.css (alla fine del file), o nel foglio di stile che ritenete più opportuno, aggiungete:

    Codice:
    .max-postbit, .max-postbit-avatar, .max-postbit-details {
    	padding: 5px;
    	border: 1px solid rgb(255, 255, 255);
    	text-align: center;
    	text-shadow: 1px 1px 0 rgb(255, 255, 255);
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	-moz-box-shadow: 0 0 10px 1px rgb(170, 170, 170);
    	-webkit-box-shadow: 0 0 10px 1px rgb(170, 170, 170);
    	box-shadow: 0 0 10px 1px rgb(170 ,170, 170);
    }
    
    .max-postbit {
    	margin: 20px;
    	background: rgb(250, 250, 250);
    	color: rgb(120, 120, 120);
    	text-align: center;
    	border; 1px solid #999;
    }
    
    .max-postbit-avatar, .max-postbit-details {
    	margin: 25px 10px;
    	-webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 70%, rgba(0,0,0,.2) 90%);
    }
    
    .max-postbit-details {
    	text-align: left;
    }

    Adesso, sostituite il contenuto del template postbit_classic con il seguente codice:

    Codice:
    {$ignore_bit}
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
    	<tr>
    		<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
    		<div class="max-postbit">
    			<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
    			<span class="smalltext">
    				{$post['usertitle']}<br />
    				{$post['userstars']}
    				{$post['groupimage']}
    				{$post['useravatar']}<br />
    				<div class="max-postbit-details">{$post['user_details']}</div>
    			</span>
    		</div>
    	</td>
    	<td class="{$altbg}" valign="top">
    		<table width="100%">
    			<tr><td>{$post['posturl']}<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
    			<br />
    			<div id="pid_{$post['pid']}" class="post_body">
    				{$post['message']}
    			</div>
    			{$post['attachments']}
    			{$post['signature']}
    			<div style="text-align: right; vertical-align: bottom;" id="post_meta_{$post['pid']}">
    				<div id="edited_by_{$post['pid']}">{$post['editedmsg']}</div>
    				{$post['iplogged']}
    			</div>
    		</td></tr>
    	</table>
    </td>
    </tr>
    <tr>
    	<td class="{$altbg}" style="white-space: nowrap; text-align: center; vertical-align: middle;"><span class="smalltext">{$post['postdate']} {$post['posttime']}</span></td>
    	<td class="{$altbg}" style="vertical-align: middle;">
    		<table width="100%" border="0" cellpadding="0" cellspacing="0">
    			<tr valign="bottom">
    				<td align="left" ><span class="smalltext">{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}</span></td>
    				<td align="right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}</td>
    			</tr>
    		</table>
    	</td>
    </tr>
    </table>

    Infine, sostituire il contenuto del template postbit_avatar:

    Codice:
    <a href="{$post['profilelink_plain']}">
    	<img  class="max-postbit-avatar" src="{$post['avatar']}" alt="" {$avatar_width_height} />
    </a>


    Prima versione:

    Ultima modifica di MaxSteel; 30-08-13 alle 14:43 Motivo: Guida aggiornata.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  2. I seguenti 4 utenti hanno ringraziato MaxSteel per questo post

    Kendrick Lamar (30-08-13),noiredeb (18-05-12)

  3. #2
    Data Registrazione
    01/04/12
    Messaggi
    162
    Grazie dati
    67
    Ringraziato 6 volte in 6 post
    Mentioned
    0 Post(s)

    Predefinito Riferimento: [GUIDA] Personalizzare il postbit_classic

    Grazie mille!! :)

  4. #3
    Data Registrazione
    18/05/13
    Messaggi
    238
    Grazie dati
    25
    Ringraziato 23 volte in 20 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Personalizzare il postbit_classic

    Ma i transition all'avatar a cosa servono? Comunque la cornice mi è piaciuta molto, sai qualche modo per renderla visibile anche con explorer vecchie versioni?

  5. #4
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Personalizzare il postbit_classic

    Le transition servono semplicemente a dare un effetto in più, nulla di speciale. Per IE8 e inferiori ci sono diverse librerie Javascript che ti possono aiutare (CSS3 PIE: CSS3 decorations for IE, una delle tante...). Se il visitatore ha la combo IE<=8 e Javascript Disattivato, allora non c'è nulla da fare.

    Comunque, visto che c'ero ho approfittato per riscrivere il tutorial correggendo diversi errori.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  6. #5
    Data Registrazione
    18/05/13
    Messaggi
    238
    Grazie dati
    25
    Ringraziato 23 volte in 20 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Personalizzare il postbit_classic

    Wow, non lo conoscevo questo sito, mi faciliterà il lavoro
    Grazie

    E grazie anche per aver aggiornato il tutorial

  7. #6
    Data Registrazione
    12/05/12
    Località
    Udine
    Età
    49
    Messaggi
    654
    Grazie dati
    78
    Ringraziato 81 volte in 59 post
    Mentioned
    3 Post(s)

    Predefinito Re: [GUIDA] Personalizzare il postbit_classic

    Ciao Max, ho provato ad eseguire questa modifica sulla versione 1.8.6 ma risulta esserci un problemino per quanto riguarda la visualizzazione dei vari pulsanti "Modifica", "Cita", "Elimina", Segnala", ecc..che non si vedono ma rimane solo la scritta.
    Come risolvo?
    Grazie
    InvisionTech.net cerca Utenti e Staff

Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
Seguici!
P.IVA: 02750560738
Cionfs © - Cionfs ® - Marchio registrato numero 0001524896
© Cionfs'Forum CMS - Cionfs'Forum CMS - Guide Gratis - Supporto CMS - E' vietata la copia anche parziale senza autorizzazione.
Questo sito utilizza cookies di analytics su dati esclusivamente aggregati e cookies di terze parti per migliorare l'esperienza dell'utente tramite plugin sociali e video.
Cliccando su oppure continuando la navigazione sul sito accetti i cookies. Per l'informativa completa clicca qui.