Dark Side of the Carton

If you don’t like the idea of an angled online image like the one that is default in the Prosilver theme of phpBB3, you can move to an Online/Offline text tag instead.

1. Go to your ACP
2. Click on the Styles Tab
3. Under Style Components click Templates
4. Click edit next to Prosilver
5. In the dropdown, select viewtopic_body.html
6. If you already applied my Profiles Left Mod, find this code:

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

Change it to:

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

This just removes the online class from the postprofile dl object, which is responsible for the angled online background image.

7. Find the following code:

<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>
 
			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->
<dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><!-- ENDIF -->{postrow.RANK_IMG}</dd>
 
<!-- ENDIF -->
<dd> </dd>

Change it to:

<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>
 
			<!-- IF postrow.S_ONLINE -->
<dd style="color: #00ff00">Online</dd>
 
<!-- ELSE -->
<dd style="color: #ff0000">Offline</dd>
 
<!-- ENDIF -->
 
			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->
<dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><!-- ENDIF -->{postrow.RANK_IMG}</dd>
 
<!-- ENDIF -->
<dd> </dd>

What this does is adds the following code above the Rank Title or Rank Image (or both) in the postprofile block.

<!-- IF postrow.S_ONLINE -->
<dd style="color: #00ff00">Online</dd>
 
<!-- ELSE -->
<dd style="color: #ff0000">Offline</dd>
 
<!-- ENDIF -->

You can move that chunk around and put it below the Rank Title/Image or elsewhere. Let me know if you need more help.

6 weeks after it’s release, I finally found the time to upgrade the forum over at Snackbar Games to phpBB 3. My hand was kind of forced due to some massive load that was generated on our phpBB2.x install and to appease the webhosting company, I told them I was going to upgrade to a clean install of phpBB3 with no mods or hacks installed.

The one thing I missed about my modded phpBB2.x forum was that the forumlist showed the topic or subject of the last post in that forum, something that phpBB3 lacks out of the box. Luckily there is a very easy way to add this functionality back in.

1. Go to your ACP and click on the Styles Tab.
2. Under Style Components on the left, click Templates
3. On the right, click the Edit button next to Prosilver. This should bring up a drop down list with all the available template files for the Prosilver theme.
4. Select ‘forumlist_body.html’ and let the lower half of the page refresh to display the current contents of that file.
5. Find the following block of code in your file:

<dd class="lastpost"><span>
						<!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
						<a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<!-- ENDIF --></span>
					</dd>

Change it to:

<dd class="lastpost"><span>
						<!-- IF forumrow.LAST_POST_TIME --><a href="{forumrow.U_LAST_POST}">{forumrow.LAST_POST_SUBJECT}</a> <br /><dfn>{L_LAST_POST}</dfn> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
						<a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<!-- ENDIF --></span>
					</dd>

All we did was add this small bit of code right inside the IF statement that checks the forumrow.LAST_POST_TIME variable. All this does, is builds a link to the last post in the thread and uses the subject line of this last post to display in the forumlist.

<a href="{forumrow.U_LAST_POST}">{forumrow.LAST_POST_SUBJECT}</a> <br />

Ideally, the topic title would be displayed instead of the subject from the last post, but that information is not available without altering the query for the forumlist and I wanted to go with a simple fix here that didn’t alter any of the core code of the system. To see this small hack in action, head on over to the SBG forum.

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: