PHPBB3: Spostare Colonna Avatar/Profilo sulla sinistra

Siamo abituati ad utilizzare i forum basandoci sull’uso delle colonne, con Avatar/Informazioni dell’utente che lascia il messaggio, a sinistra. Ormai la posizione ci viene quasi essenziale, e ci sentiamo spaesati se vengono posizionati in altri punti della pagina (vBulletin, per esempio, situa le colonne di profilo sopra il post).

La famosa board PHPBB, invece, li posiziona a destra. Direte: che problema c’è? E’ solo questione di abitudine.
Però se il nostro forum non è abbastanza famoso può “spaventare” l’utenza perchè non associa la posizioni dei blocchi alla loro visione del “forum standard”.

Leggi anche: Installare PHPBB3 dentro il proprio sito!

Con 6 passi vediamo come trasferire le colonne predefinite di PHPBB da destra a sinistra utilizzando i temi preinstallati.

CHIRURGIA

Bloom, la community di Media Kingdom 3000, è stata recentemente “operata” per spostare appunto la posizione di queste colonne. L’operazione è stata facile ed indolore, assicuratevi pero prima di eseguire un backup del database, non si sà mai. Il tutto non và ad intaccare minimamente il sistema o file importanti, e non richiede strumenti o plugin esterni.

1) APRITE E MODIFICATE IL FILE styles/prosilver/theme/content.css

Cercate la stringa

/* Attachments
----------------------------------------*/
.attachbox {
float: left;
width: auto;
margin: 5px 5px 5px 0;
padding: 6px;
background-color: #FFFFFF;
border: 1px dashed #d8d8d8;
clear: left;
}

E sostituitela con:

/* Attachments
----------------------------------------*/
.attachbox {
float: left;
width: auto;
margin: 5px 5px 5px 0;
padding: 6px;
background-color: #FFFFFF;
border: 1px dashed #d8d8d8;
clear: right;
}

2) APRITE E MODIFICATE styles/prosilver/theme/content.css

Cercate la stringa:

/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: left;
clear: both;
}

E sostituitela con:

/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: right;
clear: both;
}

3) APRITE E MODIFICATE styles/prosilver/theme/content.css

Cercate la stringa:

/* Poster profile block
----------------------------------------*/
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-left: 1px solid #FFFFFF;
width: 22%;
float: right;
display: inline;
}

E sostituitela con:

/* Poster profile block
----------------------------------------*/
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-right: 1px solid #FFFFFF;
width: 22%;
float: left;
display: inline;
}

Cercate la stringa:

.pm .postprofile {
border-left: 1px solid #DDDDDD;
}

E sostituitela con:

.pm .postprofile {
border-right: 1px solid #DDDDDD;
}

4) APRITE E MODIFICATE styles/prosilver/theme/colours.css

Cercate la stringa:

.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}

E sostituitela con:

.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
margin-top: -5px;
}.online dt {
margin-top: 5px;
}

5) APRITE E MODIFICATE viewtopic_body.html

Cercate la stringa:

<div id=”p{postrow.POST_ID}”> class=”post <!– IF postrow.S_ROW_COUNT is odd –>bg1<!– ELSE –>bg2<!– ENDIF –><!– IF postrow.S_UNREAD_POST –> unreadpost<!– ENDIF –><!– IF postrow.S_POST_REPORTED –> reported<!– ENDIF –><!– IF postrow.S_ONLINE –> online<!– ENDIF –>”>

E cancellatela. Cercate la stringa:

<dl class="postprofile" id="profile{postrow.POST_ID}">

E sostituitela con:

<dl class="postprofile<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}">

6) APRITE E MODIFICATE styles/prosilver/template/ucp_pm_viewmessage.html

Cercate la stringa:

<div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">

E rimuovete questa stringa:

<!– IF S_ONLINE –> online<!– ENDIF –>

Cercate la stringa:

<dl class="postprofile" id="profile{MESSAGE_ID}">

E sostituitela con:

<dl class="postprofile<!-- IF S_ONLINE --> online<!-- ENDIF -->" id="profile{MESSAGE_ID}">

LE CONCLUSIONI

Svuotate la cache del vostro broswer e quella del vosto forum e aggiornate la pagina.