Come cambiare il profilo utente nel topic view in orizzontale

[najaru]

Lo scopo del tutorial è quello di eliminare, nel topic view, il blocco del profilo utente con le altre informazioni aggiuntive, per poi andarle ad inserire (solo in parte) nella linea che contiene il nome utente.

Il risultato è simile a quello presente nella skin attuale di skinbox, oppure si può vedere nei vari screenshots.

Quali vantaggi porta questa visualizzazione? Nessuno, ma permette di alleggerire le informazioni talvolta superflue, ed può essere sicuramente apprezzata dagli amanti della grafica essenziale ed ottimizzata.

Infatti con questo sistema si porterà ad un aumento notevole dello spazio per il post, una riduzione delle informazioni utente (che tanto sono tutte visibili nella finestra di popup che appare cliccando sull'icona a destra del nome), il tutto sicuramente molto utile nelle skin strette a larghezza fissa e/o con sidebar laterale aggiuntiva sempre visibile che quindi occupa spazio.

1) Innanzitutto è necessario aprire il topicviewtemplate e spostare il codice che richiama il template userinfopane, andandolo ad inserire nella riga del nome utente.

cercare e tagliare:

{parse template="userInfoPane" group="global" params="$post['author'], $post['post']['pid'], array()"}

ed incollarlo dopo:

								<span class="author vcard">

<a class="url fn" href='{parse url="showuser={$post['author']['member_id']}" base="public" template="showuser" seotitle="{$post['author']['members_seo_name']}"}'>{$post['author']['members_display_name']}</a>{parse template="user_popup" group="global" params="$post['author']['member_id'], $post['author']['members_seo_name']"}</span>
						<else />
							{$post['author']['members_display_name']}
						</if>

1b) ripetere la stessa procedura nel template Private Message - showConversation

2) in seguito andremo a ridurre al minimo le informazioni visualizzate dal template userinfopanel, lasciando esclusivamente l'avatar, il gruppo utente, e i campi aggiuntivi personalizzati che però attenzione dovranno essere controllati in modo accurato visto che, se visualizzati per intero, andrebbero a sfondare la linea. Si consiglia quindi inizialmente di disabilitarli tutti alla visualizzazione, poi riattivarne uno alla volta controllando l'effetto ottenuto. Il consiglio è quello di farli comparire esclusivamente come piccole icone (20x20px).

Quindi aprire il userinfopane (in globalTemplate) cancellare tutto ed inserire il seguente codice:

{$author['_group_formatted']}
		<if test="avatar:|:$author['member_id'] AND $author['avatar']">
			<a href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}">{$author['avatar']}</a>
		<else />
			{$author['avatar']}
		</if>

	<if test="authorcfields:|:$author['custom_fields'] != """>
			<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
				<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
					<if test="$field != ''">

							{$field}

					</if>
				</foreach>
			</foreach>
		</if>

questa configurazione permette di visualizzare quindi anche i campi personalizzati aggiuntivi.

Se si vuole rinunciare a questi basta rimuovere il seguente codice dal nuovo infouserpanel

	<if test="authorcfields:|:$author['custom_fields'] != """>
			<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
				<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
					<if test="$field != ''">

							{$field}

					</if>
				</foreach>
			</foreach>
		</if>

4) noterete anche che il post continua ad essere visualizzato con un abbondante margine sinistro. Per riportarlo tutto a sinistra andare nel ipb_style.css trovare:

.post_body {
	.....
.
.
.
.

}

e variare il parametro margin-left: portandolo al minimo voluto, di solito 5-10px

poi trovare

	h3 img {
		margin-top: -2px;

     	}

e sostituirlo con:

	h3 img {
		margin-top: -2px;
            	max-width: 40px;
            	max-height: 40px;

     	}

ecco il risultato: