PHPBB3 Prosilver Profile On Left Side

This tutorial explains how to move poster's profile in proSilver to left side.


Some changes cannot be done in admin control panel, so it is better to edit .css file instead. If you have done any changes to css in control panel, then make css files writable (chmod it to 777), in control panel in styles admin select "themes" and click "export" button for prosilver. It will save changes you have previously done to css files.

Currently css editor in control panel is broken, so it is better to edit css files instead. Hopefully it will be fixed by the time phpBB 3.0.0 is released.

To edit css files open those files in any simple text editor, edit files, upload to server, then in admin control panel in styles admin click "themes" and click "refresh" link for proSilver theme.

1. Online Image

First you need to create new "online" image. To do that open file styles/prosilver/imageset/en/icon_user_online.gif in Photoshop or your image editor.

Change image mode to rgb: in menu choose Image -> Mode -> RGB Color
Then rotate image: in menu choose Edit -> Transform -> Rotate 90 CCW
Then save image: in menu choose File -> Save for Web

It will export new image in directory you selected. Move image to correct directory if needed.

2. Change in css
In control panel in styles admin select "Themes", then edit prosilver.

1. Select class ".postbody", click "raw css" button, or edit that class in content.css. You should see code like this:

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

Change float: left to float: right

2. Select class ".postprofile", click "raw css" button, or edit that class in content.css. You should see code like this:

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

Change float: right to float: left, and border-left to border-right

3. Select class ".pm .postprofile", click "raw css" button, or edit that class in content.css. Change border-left to border-right (you can skip this step: see notes in "additional changes" section of this tutorial)

4. Select class ".online", click "raw css" button. You should see code like this:

.online {
background-image: none;
background-position: 100% 0;
background-repeat: no-repeat;
}

Change it to this:
Code:

background-image: none;
background-position: 0 0;
background-repeat: no-repeat;

3. Additional Changes
After all those changes, borders in viewtopic don't look right. Border is too far from content, so it looks like content is floating way too far on the right. This is easily fixed by moving borders from ".postprofile" class to ".postbody" class.

To .postbody add this (increase padding-left value if needed):
Code:

padding-left: 10px;
border-left: 1px solid #FFFFFF;

In .postprofile remove border-right
Rename ".pm .postprofile" to ".pm .postbody" and change border-right back to border-left

Notes
If when selecting some class you see different code, check another entry in class selector. Some classes have more than one entry.

If you are editing css files, then after doing all changes you should refresh it. In admin control panel in styles admin select "themes", and click "refresh" link for prosilver.

After code change "online" image might be behind avatar. That's a normal leftover caused by this change. When profile is on right side, text in profile block is aligned to left, so "online" image and avatar are on different sides. When profile is on left side, aligning text to right side is illogical and looks terrible, so text has to be aligned to ether left or center and in both cases "online" image overlaps with avatar. Best solution to this problem is to completely remove online image or replace it with some other image.

Submitted by CyberAlien, Apr 2007.