phpBB • Knowledge Base > Prosilver: Profiles on Left

Written By: Snowcone
Written On: Jul 16, 2012 6:54 am
Last Modified: Jul 16, 2012 6:54 am
Views: 152965

Prosilver: Profiles on Left

Description: Directions on how to switch prosilver viewtopic profiles from right side of the page to left side of the page.

In Categories: Styles

Link to this article: Select All: [url=https://www.phpbb.com/support/docs/en/3.1/kb/article/prosilver-profiles-on-left/]Knowledge Base - Prosilver: Profiles on Left[/url]

Note: If you're using a prosilver derivative where prosilver is mentioned replace with your style name.

Some of you have been asking how to get Prosilver to show the profile on the left much like subsilver does by default.

1. Firstly we will make sure attachments boxes are not separated from the rest of the post by the profile pane

Open styles/prosilver/theme/content.css

Search:

Code: Select all

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

Replace with:

Code: Select all

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

2. Second we are going to change the float value for the .postbody class from left to right.

open styles/prosilver/theme/content.css

Search:

Code: Select all

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

Change it to:

Code: Select all

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

3. 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.

open styles/prosilver/theme/content.css

Search:

Code: Select all

/* 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;
}

Replace it with

Code: Select all

/* 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;
}

4: Next find this:

Code: Select all

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

Replace it with:

Code: Select all

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

5: Next find this:

Open : styles/prosilver/theme/colours.css

Code: Select all

.online {
   background-image: url("{IMG_ICON_USER_ONLINE_SRC}");
}

Replace it with:

Code: Select all

.online {
   background-image: url("{IMG_ICON_USER_ONLINE_SRC}");
   margin-top: -5px;
}

.online dt {
   margin-top: 5px;
}

6. First we need to remove the current image from being applied to the Post's div.

Open viewtopic_body.html

search:

Code: Select all

<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 and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">

Remove this:  online

to create this:

Code: Select all

<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 -->">

7. Now we need to add this back to the postprofile dl element.

Open viewtopic_body.html

search:

Code: Select all

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

replace with:

Code: Select all

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

8. open styles/prosilver/template/ucp_pm_viewmessage.html

Search:

Code: Select all

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

NOTE - in the change from 3.0.10 to 3.0.11, the above code was changed to:

Code: Select all
<div id="post-{MESSAGE_ID}" class="post pm reported online">

However, the change is the same. Remove the code just below.

Remove this:  online
to create this:

Code: Select all

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

9. Find this code;

Code: Select all

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

Change it to:

Code: Select all

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

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:

20091105 - removed the acp-editor information and slightly re-written by Raimon
20101101 - added .attachbox changes by AdamR
20111702 - Corrected step 8 to include classes added through phpBB updates - Christian 2.0
20120419 - Changed online image code find reference - DavidIQ
20120603 - Corrected image links - Dicky
20120716 - Added note about derivatives. - Mick
20130317 - Added note re change in styles/prosilver/template/ucp_pm_viewmessage.html from 3.0.10 to 3.0.11 - stevemaury

need assistance?

Prosilver: Profiles on Left

advertisements