phpBB Italia • Aggiungere un "bottone" personalizzato in imageset

Pagina 1 di 1

Aggiungere un "bottone" personalizzato in imageset

Inviato: 20/11/2011, 12:19

da Micogian

Guida su come aggiungere un nuovo bottone alle icone di "imageset"

Mettiamo il caso di avere la necessità di inserire un nuovo "bottone" nella pagina dei Topics a fianco dei bottoni "Modifica", "Quota", ecc.
Lo scopo è di utilizzarlo come link per una funzione personalizzata.
Nel nostro caso abbiamo una "Mod Title" che permette di modificare il titolo di tutti i Post del Topic selezionato.
Il bottone che vogliamo creare è questo (l'esempio riguarda Prosilver e derivati):

icon_post_edit_title.gif

1) Realizziamo l'immagine e andiamo a inserirla nella cartella "imageset/it/",
Chi usa altre lingue dovrà creare le relative immagini e inserirle nelle rispettive cartelle di lingua.
Il file dell'esempio è nominato "icon_post_edit_title.gif", ha un width di 80px e un height di 40px.
Ricordiamo che in Prosilver i bottoni, tramite il CSS, vengono visualizzati a metà, cioè la parte superiore o inferiore a seconda del passaggio o meno del mouse.

2) Apri il file imageset/it/imageset.cfg
Trova la riga:

Codice: Seleziona tutto

img_icon_post_edit = icon_post_edit.gif*20*69

Aggiungi, dopo:

Codice: Seleziona tutto

img_icon_post_edit_title = icon_post_edit_title.gif*20*80

3) Apri il file language/it/acp/styles.php
Trova la riga:

Codice: Seleziona tutto

	'IMG_ICON_POST_EDIT'			=> 'Modifica messaggio',

Aggiungi, dopo:

Codice: Seleziona tutto

	'IMG_ICON_POST_EDIT_TITLE'		=> 'Modifica titoli messaggio',

4) Apri il file includes/acp/acp_styles
Trova il codice:

Codice: Seleziona tutto

'buttons'	=> array(
				'icon_back_top', 'icon_contact_aim', 'icon_contact_email', 'icon_contact_icq', 'icon_contact_jabber', 'icon_contact_msnm', 'icon_contact_pm', 'icon_contact_yahoo', 'icon_contact_www', 'icon_post_delete', 'icon_post_edit', 'icon_post_info', 'icon_post_quote', 'icon_post_report', 'icon_user_online', 'icon_user_offline', 'icon_user_profile', 'icon_user_search', 'icon_user_warn', 'button_pm_forward', 'button_pm_new', 'button_pm_reply', 'button_topic_locked', 'button_topic_new', 'button_topic_reply',
			),

Aggiungi all'interno dell'array 'buttons' il riferimento al nuovo bottone:

Codice: Seleziona tutto

'icon_post_edit_title',

5) Apri il file language/it/common.php
Trova la riga:

Codice: Seleziona tutto

	'EDIT_POST'							=> 'Modifica messaggio',

Aggiungi, dopo:

Codice: Seleziona tutto

	'EDIT_POST_TITLE'					=> 'Modifica titoli messaggio',

6) Adesso assegnamo la Variabile che useremo nel Topic.
Apri il file viewtopic.php
Trova la riga:

Codice: Seleziona tutto

	'EDIT_IMG' 			=> $user->img('icon_post_edit', 'EDIT_POST'),

Aggiungi, dopo:

Codice: Seleziona tutto

	'EDIT_TITLE_IMG' 	=> $user->img('icon_post_edit_title', 'EDIT_POST_TITLE'),

7) Con queste operazioni abbiamo creato un nuovo bottone, vediamo ora di inserirlo nei CSS.
Apri il file theme/buttons.css
Trova il codice:

Codice: Seleziona tutto

ul.profile-icons li.edit-icon	{ width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; }

Aggiungi, dopo:

Codice: Seleziona tutto

ul.profile-icons li.edit-title-icon	{ width: {IMG_ICON_POST_EDIT_TITLE_WIDTH}px; height: {IMG_ICON_POST_EDIT_TITLE_HEIGHT}px; }

Trova:

Codice: Seleziona tutto

/* Fix profile icon default margins */
ul.profile-icons li.edit-icon	{ margin: 0 0 0 3px; }

Aggiungi, dopo:

Codice: Seleziona tutto

ul.profile-icons li.edit-title-icon	{ margin: 0 0 0 3px; }

8) Apri il file theme/colours.css
Trova:

Codice: Seleziona tutto

/* Moderator icons */
.report-icon, .report-icon a		{ background-image: url("{IMG_ICON_POST_REPORT_SRC}"); }
.edit-icon, .edit-icon a			{ background-image: url("{IMG_ICON_POST_EDIT_SRC}"); }

Aggiungi, dopo:

Codice: Seleziona tutto

.edit-title-icon, .edit-title-icon a			{ background-image: url("{IMG_ICON_POST_EDIT_TITLE_SRC}"); }

9) Ora passiamo al template.
Apri il file viewtopic_body.html
Trova:

Codice: Seleziona tutto

<!-- IF postrow.U_EDIT --><li class="edit-icon"><a href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li><!-- ENDIF -->

Aggiungi (prima o dopo a seconda che vogliamo il bottone prima o dopo "Modifica")

Codice: Seleziona tutto

<!-- IF postrow.U_EDIT && postrow.S_FIRST_ROW --><li class="edit-title-icon"><a href="{postrow.U_EDIT_TITLE}" title="{L_EDIT_POST_TITLE}"><span>{L_EDIT_POST_TITLE}</span></a></li><!-- ENDIF -->

Con questa condizione, se l'utente è autorizzato a "modificare" il post (quindi non a tutti) nel primo Posts di ogni Topic comparirà l'icona Mod.Titoli che consentità di Modificare i Titoli di tutti i Posts.
Ovviamente questa Guida spiega come inserire il bottone, manca la Mod Title che deve essere ancora rilasciata.
Le istruzioni restano comunque valide qualora si voglia aggiungere un nuovo bottone al pacchetto "Imageset"