Prosilver: Profiles on Left

[Snowcone]

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.

Prosilver Left 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.

Mod Instructions

Demo: http://www.darksideofthecarton.com/phpb ... hp?f=2&t=1
Alternate Instructions: http://www.darksideofthecarton.com/2007 ... eft-85.php

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

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.

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

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.

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

Change it to:

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

6: Next find this:

Code: Select all

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

Change it to:

Code: Select all

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

7: Next find this:

Code: Select all

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

Change it to this:

Code: Select all

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

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 --> online<!-- ENDIF -->">

Remove this: <!-- IF postrow.S_ONLINE --> online<!-- ENDIF -->
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 -->">

13: Now we need to add this back to the postprofile dl element. Find the following line of code at or around line 173:

Code: Select all

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

Change it to this:

Code: Select all

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

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:

Code: Select all

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

Remove this: <!-- IF S_ONLINE --> online<!-- ENDIF -->
to create this:

Code: Select all

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

17: Find this code at or around line 65:

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:

[Raimon]

I suggest don't edit into your acp pls.
Also it can be easier just follow the tut of CA ; http://www.easytutorials.org/prosilver_ ... _side.html
And you don't have to edit some html files or deleted the online code

[Snowcone]

I suggest don't edit into your acp pls.
Also it can be easier just follow the tut of CA ; http://www.easytutorials.org/prosilver_ ... _side.html
And you don't have to edit some html files or deleted the online code

I wouldn't say easier considering the need for an additional image. The editor in the ACP also seems to be fixed and working since I did all my editing for this on a clean install of phpBB 3.0 and ran into no issues.

[Raimon]

The images is provided by CA , so yes it would be easier , because with your edit you deleted the image online, so i can be that users missing that.
Yes it can be fixed, but truncate your template_data table of your database and you don't have the adjustments anymore on your templates , so far as i noticed.
When you edit it on the files, it still remaining .

[Snowcone]

The images is provided by CA , so yes it would be easier , because with your edit you deleted the image online, so i can be that users missing that.

No. The last step in my process is to move the online class from the overall div of the post to the object for the poster's profile. It doesn't require any extra files.

Yes it can be fixed, but truncate your template_data table of your database and you don't have the adjustments anymore on your templates , so far as i noticed.
When you edit it on the files, it still remaining .

You lost me. Why would you truncate any of your tables?

[Raimon]

No. The last step in my process is to move the online class from the overall div of the post to the object for the poster's profile. It doesn't require any extra files.

The tut of cyberalien also not, but you replace the original for a left one.

You lost me. Why would you truncate any of your tables?

i guess you wasn't here when the RC version where out?
Because in some cases you must truncate, deleted the template_data, data so to prevent you are loosing things edit the files .

[Snowcone]

No. The last step in my process is to move the online class from the overall div of the post to the object for the poster's profile. It doesn't require any extra files.

The tut of cyberalien also not, but you replace the original for a left one.

Again, not necessary with this version of the hack.

You lost me. Why would you truncate any of your tables?

i guess you wasn't here when the RC version where out?
Because in some cases you must truncate, deleted the template_data, data so to prevent you are loosing things edit the files .

Correct, I haven't run any of the RC releases, but you don't have to do any of that in the Gold release.

[Pandjarov]

I suggest don't edit into your acp pls.
Also it can be easier just follow the tut of CA ; http://www.easytutorials.org/prosilver_ ... _side.html
And you don't have to edit some html files or deleted the online code

Totally agree with you. With that tut I made that change for 2 minutes. Thank you very much !

[Tom Keels]

I have made the change to have the profiles on the left.
Is there any way to fix the online image so that its to the right of the avatar diagonal bordering on the post header/text? That seems like the ideal place for it, but I cannot figure out how to get it there. I hate the fact that its behind the avatar now.

[Phil]

The guide linked to above also details moving the online image.

[Tom Keels]

The guide linked to above also details moving the online image.

I know, it moves it to behind the avatar, as referenced from the tutorial...

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.

The image below is what I'm looking for...

[prototech]

Nevermind...

[Snowcone]

The guide linked to above also details moving the online image.

I know, it moves it to behind the avatar, as referenced from the tutorial...

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.

The image below is what I'm looking for...

The method from the OP of this thread gives you what you are looking for. Depending on the size of your avatars, you may need to adjust the width of the post body and profile section. PM me if you run into an issue.

[Snowcone]

I've updated the OP of this to include the tweaks for the Private Message template.

[*Christian*]

It's a good tutorial,

I've seen better, seen worse. At the end of the day, they all do the same thing.