phpBB 3.0 was released this week and the default theme, Prosilver, has the post content on the left and the poster’s profile on the right. This is reverse from most forum software and the subsilver theme of previous phpBB releases. I’ve taken the time to tweak the CSS and code to flip the poster profile back to the left and the post content to the right. Here are the steps you need to take:
Prosilver Left Packaged Style Download Now Available
Many users were having issues with fully completing this mod without a typo and since it involves modifying the main templates for the theme, I went ahead and packaged this style into an easy to install theme with the name of “prosilver_left”. You can download this theme as a zip file here.
Simply unzip this file and upload the “prosilver_left” folder to your styles directory in your phpBB3 directory. Install it from the Styles tab of your ACP.
Help/Support Instructions - If you need assistance after attempting this modification, please make sure you accurately describe your problem (including an image if necessary) and either include a link to the live board or PM the link to me. Please post your requests in the official thread at phpBB.com
Mod Instructions
Demo: http://www.darksideofthecarton.com/phpbb3_demo/viewtopic.php?f=2&t=1
1. Go to your ACP and click on the Styles Tab.
2. Under Style Components on the left, click Themes
3. On the right, click the Edit button next to Prosilver. This should bring up an editing window with the full CSS for the Prosilver theme inside it.
4. Find the following code inside that CSS file. It should be around like 1054. We are going to change the float value for the .postbody class from left to right.
/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: left;
clear: both;
}Change it to:
/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: right;
clear: both;
}5. Find the following code inside that CSS file. It should be around like 1532. We are going to change the float value for the .postprofile class from right to left and move the white vertical border to the right side.
/* 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;
}Change it to:
/* 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;
}6: Next find this:
.pm .postprofile {
border-left: 1px solid #DDDDDD;
}Change it to:
.pm .postprofile {
border-right: 1px solid #DDDDDD;
}7: Next find this:
.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}Change it to this:
.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
margin-top: -5px;
}
.online dt {
margin-top: 5px;
}8: Click Submit to update your Theme/CSS file for Prosilver.
9: On the left, click Templates under Style Components
10: Click Edit next to Prosilver.
11: In the drop down menu, go to the very bottom and select viewtopic_body.html and it should open an editor with the current code inside it.
12: First we need to remove the current image from being applied to the Post’s div. Find the following line of code at or around line 117:
<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 -->"></div>Remove this:
<!-- IF postrow.S_ONLINE --> online<!-- ENDIF -->
to create this:
<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 -->"></div>13: Now we need to add this back to the postprofile dl element. Find the following line of code at or around line 173:
<dl id="profile{postrow.POST_ID}" class="postprofile"></dl>Change it to this:
<dl id="profile{postrow.POST_ID}" class="postprofile<!-- IF postrow.S_ONLINE --> online<!-- ENDIF -->"></dl>14: Click submit to save your template.
15: Select ucp_pm_viewmessage.html from the drop down.
16: Find this code at or around line 16:
<div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->"></div>Remove this:
<!-- IF S_ONLINE --> online<!-- ENDIF -->
to create this:
<div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF -->"></div>17: Find this code at or around line 65:
<dl id="profile{MESSAGE_ID}" class="postprofile"></dl>Change it to:
<dl id="profile{MESSAGE_ID}" class="postprofile<!-- IF S_ONLINE --> online<!-- ENDIF -->"></dl>This should correctly align the profiles on the left just like in subsilver in topics as well as Private Messages. Here is what you get if completed properly:
Viewing a PM:
Viewing a Post:
My home computer isn’t exactly a smoking machine. For those interested, it’s a 2500+ w/ 2GB of Ram. After running Vista Business for about 13 months I finally conceded that my machine was just not up to snuff when it came to running Vista smoothly. I was forced to downgrade to XP Pro and I haven’t been happier with that decision.
Over the Christmas break I took some time to unplug. I didn’t update this site at all and I only made a few minor posts over at SBG. The Cover Project admins were hard at work, like they always are, so there were some updates there.