USER CP - An alternative to Profile Screen

[akulion]

Hi,

I finally got fedup of my members asking me the same dang questions over and over "how do I change my theme?" - "how do I change my profile?" - "how do I change my username?"

At first I was afraid...
I was petrified...

Kept thinking I could never live without a User CP by my side,
But I grew strong....

And I learned how to get along,
And now its here!

The User CP

This wont modify anything in your SMF or TP, it simply adds a very user friendly page for your visitors so they can change their settings with ease.

A demo is available here ( you will have to login to see it)
User: test
Pass: test
( please kindly dont use the above account to make posts or shouts - since this is a live forum )
After you login look at the menubar at the top and click on usercp link

To include this in your pages you will have to do 3 things - pretty basic stuff so no headaches here

Step 1: Download this file and upload all its images to a folder called usercp - which you will have to create in your forum root

Step 2: Create a PHP Article and add the given code below to it and set its options as follows:
- show left bar YES
- use theme YES
- show on frontpage NO
- set featured NO

Code: [Select]

echo'
<table border="0" width="100%" id="table1" cellspacing="1" style="border-collapse: collapse">
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=account"><img border="0" src="usercp/ksysguard.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=theme"><img border="0" src="usercp/kivio.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=theme;sa=pick;u=;sesc=', $context['session_id'], '"><img border="0" src="usercp/blockdevice.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=forumProfile"><img border="0" src="usercp/kuser.png" width="80" height="80"></a></font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=account"><b>My Account Info</a><br>
</b></font><font face="Verdana" size="1">Click here if you want to
change your account related information such as username, email,
password or other sensitive details.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=theme"><b>Look & Layout Options</a><br>
</b></font><font face="Verdana" size="1">Click here to change the way
the forum looks for you, options include the look and layout for the
boards and posts.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=theme;sa=pick;u=;sesc=', $context['session_id'], '"><b>My Theme</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to
set your default theme which you wish to use every time you login.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=forumProfile"><b>My Profile</a><br>
</b></font><font face="Verdana" size="1">Click here to change the way
your profile looks and appears to everyone.</font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=statPanel"><img border="0" src="usercp/kwalletmanager.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=showPosts"><img border="0" src="usercp/kedit.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=notification"><img border="0" src="usercp/mailreminder.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=editBuddies"><img border="0" src="usercp/kdmconfig.png" width="80" height="80"></a></font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=statPanel"><b>My Stats</a><br>
</b></font><font face="Verdana" size="1">Here you can check how many
posts you have made, which games you are a champion in and other
activity related info.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=showPosts"><b>My Posts</a><br>
</b></font><font face="Verdana" size="1">This option will show you all
the posts you have made since you became a member of this site.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=notification"><b>My Notifications</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to
change the type and frequency of notifications you get via e-mail when
participating in threads.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=editBuddies"><b>Buddies</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to
select buddies to add to your list. </font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=;sa=pmprefs"><img border="0" src="usercp/mail.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<a href="', $scripturl, '?action=profile;u=;sa=tpshoutbox"><img border="0" src="usercp/messenger.png" width="80" height="80"></a></td>
<td align="center" width="25%" valign="top">
<a href="', $scripturl, '?action=search"><img border="0" src="usercp/find.png" width="80" height="80"></a></td>
<td align="center" width="25%" valign="top">
<a href="', $scripturl, '?action=pm;sa=send;u=1"><img border="0" src="usercp/agent.png" width="80" height="80"></a></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=pmprefs"><b>My Messages Options</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to
set your preferences for PMs received on the board and also allow you to
ignore people you do not wish to receive PMs from.</font></td>
<td align="center" width="25%" valign="top"><b>
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=;sa=tpshoutbox">Show My Shouts</a><br>
</font></b><font face="Verdana" size="1">This screen will show a log of
all the shouts you have made in the shoutbox. (Note: Shouts are deleted
periodically by the admin)</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=search"><b>Search</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to
search for posts made in the board.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=pm;sa=send;u=1"><b>Contact Admin</a><br>
</b></font><font face="Verdana" size="1">Still  having problems?<br>
Then contact the admin from here and submit your questions.</font></td>
</tr>
</table>
';

Step 3: Download your index.template.php file from your theme folder and make a backup first. Then open it and look for this code and make the edits as given below.

Look for

Code: [Select]

// Edit Profile... [profile]

Make edits in this line which should be nearly just after it

Code: [Select]

<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>

instead of ?action=profile put ?page=XX where XX is the numbr of the article you just created where you placed the user CP code

Instead of ' , $txt[79] , ' put USER CP

If you use a graphic based theme which uses graphics buttons - you will have to replace the images for profile to ones which say User CP.

Assumptions in the article code
In the code for Contact the Admin for user CP - it has been assumed that you use your 1st account as the Admin whose ID is 1 - however if you use another account then please put the corresponding user # there

The End.

Graphic Credits go to CrystalXP.net (u can get more icons from there)

[Raven]

That is very very impressive Aku!

Looks very moddable too, your own images and to be able to change the page layout.

I like it alot!

[IchBin]

VERY! cool! That is an awesome idea! Much more organized than the profile screen! I'm going to show this to the Devs at SMF. Although, Bloc lives here so I don't really have to lol. But I think they should see it.

[akulion]

Glad you guys liked it

The icons im using are PNG's so they have a slight issue with IE and their backgrounds. But you can use your own icons if you prefer and also change the text and stuff around in the boxes by editing the codes :up:

[JPDeni]

Very cool, Aku. Great idea. I've been thinking that there should be something like that, but it never occurred to me to make one. Definitely impressive.

[akulion]

Thanks jp

added the graphics credits link as well in case someone wants to get aditional or alternative icons

[RoarinRow]

Dang, that is so cool.  :up:

So many icons to choose from - http://www.crystalxp.net/galerie/en.cat.1.htm

[Raven]

Hey we all know I suck with this, I tried to ad a paragraph at the bottom that says "If you don't like this style of UserCP then go here" but I get syntax errors, man I just suck at php or whatever it is.

Code: [Select]

<br />
echo '
<p align="center"><font face="Verdana" size="2">Don't like this tyle of UserCP? Then use the original one <a href="', $scripturl, 'action=profile"><b>Here</b></a></p>
';
You could get them into gifs easily enough, I'm doing it right now as IE just sucks with PNG, serves them right for using it

[akulion]

Hey we all know I suck with this, I tried to ad a paragraph at the bottom that says "If you don't like this style of UserCP then go here" but I get syntax errors, man I just suck at php or whatever it is.

Code: [Select]

<br />
echo '
<p align="center"><font face="Verdana" size="2">Don't like this tyle of UserCP? Then use the original one <a href="', $scripturl, 'action=profile"><b>Here</b></a></p>
';
You could get them into gifs easily enough, I'm doing it right now as IE just sucks with PNG, serves them right for using it :twisted:

if you want to include any additional stuff just add it before the final '; after the </table> tag

u wont need any echo statements there

all u will have to add is:

Code: [Select]

<br />
<p align="center"><font face="Verdana" size="2">Don't like this tyle of UserCP? Then use the original one <a href="', $scripturl, 'action=profile"><b>Here</b></a></p>


[alan s]

Very cool , Just in case people want to have a custom url and page this is how you do it ( In case you dont understand what i mean , i mean instead of having the index.php?page=XX you can have a index.php?action=usercp with a page to match it.

Backup any files i tell you to edit before trying this.


Open the index.php

Search For

Code: [Select]

'sticky' => array('LockTopic.php', 'Sticky'),
Add after

Code: [Select]

'usercp' => array('usercp.php', 'usercp'),
Index.template.php

Search for

Code: [Select]

// Edit Profile... [profile]
And find this under it

Code: [Select]

<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
Replace that line ^ with

Code: [Select]

<a href="', $scripturl, '?action=usercp">User CP</a>

Open up the Modifications.english.php file in your languages directory.

Add this after another text string on the page.

Code: [Select]

$txt['usercp'] = 'User CP';
Then create the usercp.php Page

Code: [Select]

<?php


if (!defined('SMF'))
die('Hacking attempt...');

function usercp()
{
global $context, $mbname, $txt;


//Load the main usercp template
loadtemplate('usercp');

//Load the main usercp template
$context['sub_template']  = 'main';
//Set the page title
$context['page_title'] = $mbname . ' - ' . $txt['usercp'];

}
?>

Next Create the usercp.template.php page.

Code: [Select]

<?php
/*
User CP Page
*/
 function template_main()
{
global $db_prefix, $scripturl, $txt, $user_info,$settings, $modSettings;

 echo'
<table border="0" width="100%" id="table1" cellspacing="1" style="border-collapse: collapse">
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=account"><img border="0" src="usercp/ksysguard.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=theme"><img border="0" src="usercp/kivio.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=theme;sa=pick;u=', $context['member']['id'], ';sesc=', $context['session_id'], '"><img border="0" src="usercp/blockdevice.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=forumProfile"><img border="0" src="usercp/kuser.png" width="80" height="80"></a></font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=account"><b>My Account Info</a><br>
</b></font><font face="Verdana" size="1">Click here if you want to 
change your account related information such as username, email, 
password or other sensitive details.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=theme"><b>Look &amp; Layout Options</a><br>
</b></font><font face="Verdana" size="1">Click here to change the way 
the forum looks for you, options include the look and layout for the 
boards and posts.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=theme;sa=pick;u=', $context['member']['id'], ';sesc=', $context['session_id'], '"><b>My Theme</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to 
set your default theme which you wish to use every time you login.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=forumProfile"><b>My Profile</a><br>
</b></font><font face="Verdana" size="1">Click here to change the way 
your profile looks and appears to everyone.</font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=statPanel"><img border="0" src="usercp/kwalletmanager.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=showPosts"><img border="0" src="usercp/kedit.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=notification"><img border="0" src="usercp/mailreminder.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=editBuddies"><img border="0" src="usercp/kdmconfig.png" width="80" height="80"></a></font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=statPanel"><b>My Stats</a><br>
</b></font><font face="Verdana" size="1">Here you can check how many 
posts you have made, which games you are a champion in and other 
activity related info.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=showPosts"><b>My Posts</a><br>
</b></font><font face="Verdana" size="1">This option will show you all 
the posts you have made since you became a member of this site.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=notification"><b>My Notifications</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to 
change the type and frequency of notifications you get via e-mail when 
participating in threads.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=editBuddies"><b>Buddies</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to 
select buddies to add to your list. </font></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=pmprefs"><img border="0" src="usercp/mail.png" width="80" height="80"></a></font></td>
<td align="center" width="25%" valign="top">
<a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=tpshoutbox"><img border="0" src="usercp/messenger.png" width="80" height="80"></a></td>
<td align="center" width="25%" valign="top">
<a href="', $scripturl, '?action=search"><img border="0" src="usercp/find.png" width="80" height="80"></a></td>
<td align="center" width="25%" valign="top">
<a href="', $scripturl, '?action=pm;sa=send;u=1"><img border="0" src="usercp/agent.png" width="80" height="80"></a></td>
</tr>
<tr>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=pmprefs"><b>My Messages Options</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to 
set your preferences for PMs received on the board and also allow you to 
ignore people you do not wish to receive PMs from.</font></td>
<td align="center" width="25%" valign="top"><b>
<font face="Verdana" size="2"><a href="', $scripturl, '?action=profile;u=', $context['member']['id'], ';sa=tpshoutbox">Show My Shouts</a><br>
</font></b><font face="Verdana" size="1">This screen will show a log of 
all the shouts you have made in the shoutbox. (Note: Shouts are deleted 
periodically by the admin)</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, '?action=search"><b>Search</a><br>
</b></font><font face="Verdana" size="1">This screen will allow you to 
search for posts made in the board.</font></td>
<td align="center" width="25%" valign="top">
<font face="Verdana" size="2"><a href="', $scripturl, 'action=pm;sa=send;u=1"><b>Contact Admin</a><br>
</b></font><font face="Verdana" size="1">Still&nbsp; having problems?<br>
Then contact the admin from here and submit your questions.</font></td>
</tr>
</table>
';
   
}
?>

usercp.php Goes in the sources directory , usercp.template.php goes in the default themes directory.


Caps or small letters does matter!! if i dont use a capital letter you shouldnt either!!

Hope this is useful to someone.