Prosilver: Profiles on Left

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
Locked
Snowcone
Registered User
Posts: 89
Joined: Mon Mar 15, 2004 4:16 pm
Location: San Antonio, TX
Contact:

Prosilver: Profiles on Left

Post by 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:
Image

Viewing a Post:
Image
Last edited by Snowcone on Thu Apr 24, 2008 4:09 pm, edited 5 times in total.
-cone

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Prosilver: Profiles on Left

Post by 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 ;)
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

Snowcone
Registered User
Posts: 89
Joined: Mon Mar 15, 2004 4:16 pm
Location: San Antonio, TX
Contact:

Re: Prosilver: Profiles on Left

Post by Snowcone »

Raimon wrote: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.
-cone

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Prosilver: Profiles on Left

Post by 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 :).
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

Snowcone
Registered User
Posts: 89
Joined: Mon Mar 15, 2004 4:16 pm
Location: San Antonio, TX
Contact:

Re: Prosilver: Profiles on Left

Post by Snowcone »

Raimon wrote: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.
Raimon wrote: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?
-cone

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Prosilver: Profiles on Left

Post by Raimon »

Snowcone wrote:
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 :) .
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

Snowcone
Registered User
Posts: 89
Joined: Mon Mar 15, 2004 4:16 pm
Location: San Antonio, TX
Contact:

Re: Prosilver: Profiles on Left

Post by Snowcone »

Raimon wrote:
Snowcone wrote:
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.
Raimon wrote:
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.
-cone

Pandjarov
Registered User
Posts: 23
Joined: Tue Dec 11, 2007 11:56 am

Re: Prosilver: Profiles on Left

Post by Pandjarov »

Raimon wrote: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
Registered User
Posts: 30
Joined: Wed Jun 05, 2002 2:29 pm

Re: Prosilver: Profiles on Left

Post by 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.

User avatar
Phil
Former Team Member
Posts: 10403
Joined: Sat Nov 25, 2006 4:11 am
Name: Phil Crumm
Contact:

Re: Prosilver: Profiles on Left

Post by Phil »

The guide linked to above also details moving the online image.
Moving on, with the wind. | My Corner of the Web

Tom Keels
Registered User
Posts: 30
Joined: Wed Jun 05, 2002 2:29 pm

Re: Prosilver: Profiles on Left

Post by Tom Keels »

iWisdom wrote: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...
Image

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: Prosilver: Profiles on Left

Post by prototech »

Nevermind...
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

Snowcone
Registered User
Posts: 89
Joined: Mon Mar 15, 2004 4:16 pm
Location: San Antonio, TX
Contact:

Re: Prosilver: Profiles on Left

Post by Snowcone »

Tom Keels wrote:
iWisdom wrote: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...
Image
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.
-cone

Snowcone
Registered User
Posts: 89
Joined: Mon Mar 15, 2004 4:16 pm
Location: San Antonio, TX
Contact:

Re: Prosilver: Profiles on Left

Post by Snowcone »

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

User avatar
*Christian*
I've Been Banned!
Posts: 884
Joined: Sat Nov 03, 2007 1:35 pm
Location: Location, Location.

Re: Prosilver: Profiles on Left

Post by *Christian* »

It's a good tutorial,

I've seen better, seen worse. At the end of the day, they all do the same thing. :P
Proud owner of Bertie 3.0
:: No support via PM or IM ::

Locked

Return to “[3.0.x] Styles Support & Discussion”