Location: PHPKode > projects > NetLink > netlink_os/Tutorial/user/index.php
<h4>Welcome to the User Profile Section of the <span class='nl'>NetLink</span> Tutorial</h4>

<?php
require 'Tutorial/intro.txt';
?>
<br/><br/>
Let's start with how to access your user profile. You can do 1 of the <b>3</b> following methods to access your profile.
<br/><br/>
<table style='width: 100%;'>
 <tr>
  <td>
	 <table id='user' class='just'>
	  <tr>
		 <td class='border'><img src='Tutorial/user/high_2.png' alt=''/></td>
		 <td class='border'><img src='Tutorial/user/top.png' alt=''/></td>
		</tr>
		<tr>
		 <td class='border' colspan='2'><img src='Tutorial/user/main_select.png' alt=''/></td>
		</tr>
	</table>
 </td>
 <td>
  You can access your profile by:
   <ul>
			<li>Clicking on "My Account" in the menu</li>
			<li>Clicking "Edit Profile" in the top right-hand side of the screen</li>
			<li>When you sign on, click "My Account" on the Welcome Page</li>
		</ul>
  </td>
 </tr>
</table>
<br/><hr/>
Next, we'll talk about the structure of your profile. This is the sample profile for Kyle Perkins, the creator of <span class='nl'>NetLink</span>. We can use his profile for an example for this Tutorial.
<br/><br/>
When your account is first created, you will <b>not</b> have a theme set for your account. This is all right! You can set a theme for your account very easily!<br/><br/>
<table style='width: 100%;' class='just'>
 <tr>
  <td><img src='Tutorial/user/pro_1.png' alt='' style=' border: 2px #000 solid;'/></td>
  <td>
		This page lists everything about your account - everything, except for your password. That's for security purposes!<br/><br/>From this screen, you can either <b>Upgrade Your Account</b> to code your own sites, or you can <b>Update Your Profile</b>. Both of these subjects will be covered in this tutorial. <a href='#adv' class='under'>Click to skip down to <i>Upgrading Your Account</i>!</a>
	</td>
 </tr>
</table>
<hr/>
Let's start with <b>Updating Your Account!</b> This section will cover a lot of material, so take some notes!
<br/><br/>
<img src='Tutorial/user/acc_mouse.png' alt='' style='float: right; border: 2px #000 solid; margin-left: 10px;'/>
From the Profile Screen, click <b>Update Account</b>. This will take you to a screen that has a lot of information on it!
<br/><br/>

<div style='text-align: center; width: 100%;'>
	<img src='Tutorial/user/update_1(mini).png' alt='' style='border: 2px #000 solid;'/>
	<br/>
	<small><small style='font-weight: bold'>Reduced Screenshot of Updating a Profile</small></small>
</div>
  
  <br/>This screen has may interactive features, such as:
   <ul style='font-size: 10pt;'>
    <li><a href='#alias' class='under'>Changing your Alias Name</a></li>
    <li><a href='#pass' class='under'>Changing your Password</a></li>
    <li><a href='#edit' class='under'>Changing your Editing Theme for your Site Manager</a></li>
    <li><a href='#adv' class='under'>Changing your Editing Preference</a></li>
    <li><a href='#theme' class='under'>Changing your Site Theme (Beginners Only)</a></li>
   </ul>
<hr/>
<a id='alias'></a>
To change your Alias Name, simply do the following:
<ol>
 <li>Click in one of the approprate fields.<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/update_name.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Change it to what you want (or what you want to be called).<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/update_name2.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Click "Update Profile".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/update_click.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
 </ol>
 And that's all there is to it! Easy, huh?
 <br/><hr/>
 <!--===================================================================================-->
 <a id='pass'></a>
 Changing your password is also easy. In case someone finds out your password, or if you want to change it from the default, use this tutorial to do that!
 <br/><br/>
 Changing you password can be done in a few steps.
 <ol>
 <li>Click "Change Password".<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/pass1.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Click in the "Old Password" box and type in your old password.<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/pass2.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Tab into the "New Password" fields, and type your new password in <b>twice</b>.<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/pass3.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Click "Change Password".<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/pass4.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
 </ol>
That's it. Your new password in is effect! Next time you login, your old password will not work, so use your new one!<br/><hr/>
 <!--===================================================================================-->
 <a id='edit'></a>
 This has to be the most convienient and most easiest option of this whole program: Changing your Site Manager Editing Theme/Icons. Follow these <b>two</b> steps very, very closely - or else you will get the wrong theme and that will cause this whole program to crash and delete all of the files on the server.....just kidding!
 <ol>
 <li>Click your prefered Editing type.<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/cms1.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Click "Update Profile".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/update_click.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
 </ol>
Wow, that was long. Aren't you tired yet? Go on down to learn more...<br/><hr/>
<!--===================================================================================-->
 <a id='theme'></a>
 If you are in <b>Beginner Mode</b> (this meaning you use the <span class='nl'>Rotide Egap</span> editors), then you can choose a pre-defined theme for your site! If you don't like the pre-defined ones, then you can customize your own! Neat, huh? This is technically 2 sections - covering pre-defined themes and customized ones.
 <h4>Pre-Defined Themes</h4>
 Picking one of our creatively designed themes is easy. 
 <ol>
 <li>Click on the Down Triangle next to "Change Theme".<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/theme1.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Pick one of the pre-defined themes in the list. Let's start with <b>Cherry</b>.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/theme2.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li><b>Optional:</b> You can click "Preview" to see the theme in use for a sample page.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/theme3.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Click "Update Profile".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/update_click.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
 </ol>
 That's it for pre-defined themes. Very simple - now, let's go down to help those people who want to be "Creative!"
 <br/><br/>
 <h4>Creating your own Theme</h4>
 Creating your own theme takes creativity, and with these steps, you can make sure to create your own theme that you like. Just make sure not to cancel it! That is a major mistake made by many people!  
 <ol>
 <li>Click on the Down Triangle next to "Change Theme".<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/theme1.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Pick "Custom".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css2.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Click "Edit CSS Theme"<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css3.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>This will take you to a screen with blank boxes and a preview on the right.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css4.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>The next few steps can be repeated for each section of the CSS Themer, so we will only change the Background in this example. Come back to this Tutorial if you need a refresher on how to do this to change the other attributes to your site.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css5.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Locate the section called "Background Color" and click "Change".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css6.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>This will take you to a very colorful screen. This is the display of only <b>216 colors</b> (out of the 16 million out there).<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css7.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Try rolling over a color. Notice that the text boxes on the bottom change as well.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css8.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Pick a color, and the text boxes will change again.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css9.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>If you want to keep that color, make sure that at least 1 of the text boxes has that color selected, then click "Save Changes for Background".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css10.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>This will take you back to the page with the white boxes. Notice that where it says "Background Color", our selected color is there, and in the box on the right. This is telling you that your selected color is appling to the Background and will be applied to every webpage you have.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css11.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li><b>Now, the most important step of all: Click "Save Changes".</b> If you don't, then your changes will not be saved, and you have to do it all over again..<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/css12.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Now, click "Update Profile".<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/update_click.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
 </ol>
So far, pre-defined themes are much easier. Choose what you want and get creative!<br/><hr/>
 <!--===================================================================================-->
 <a id='adv'></a>
 If you want to test your skills with Web Development, it is highly recommended that you practice first! Consider this a "pre-warning:" if you upgrade to "Advanced Mode", you <b>cannot</b> go back to beginner. If you want to continue, just follow the next few steps to upgrade your account"
 <ol>
 <li>Click one of the following: "Upgrade to Advanced" located on the main Profile Page, <b>or</b> from the Profile Details page, click the word "Advanced" in the "Advanced Mode Paragraph".<br/>
   <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/adv2.png' alt='' style='border: 2px #000 solid;'/>
    <img src='Tutorial/user/adv1.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Consider this final warning. This is asking you "Are you sure you want to do this?" If you click "Yes", there is no turning back.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/adv3.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>Well, you've done it. You have upgraded your account. No more themes, no more easy way out, no more easy editors. It's all yours for the coding, now.<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/adv4.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
  <li>By the way, you can't press "Back" in your browser either...<br/>
  <div style='width: 100%; text-align: center;'>
    <img src='Tutorial/user/adv5.png' alt='' style='border: 2px #000 solid;'/>
   </div>
  </li>
 </ol>
<br/><hr/><br/>
Well, that's it. You have now "Mastered the Art" of your profile. Go <a href='?id=tutorial'>Back</a> to the Tutorial to learn more about <span class='nl'>NetLink!</span>
Return current item: NetLink