Designing Your Profile Page: A Tutorial

[G-man]

Designing Your Profile Page: A Tutorial

You've all seen those nice profile pages that some of us have created, and more than a few folks have asked for advice and support on how to do these. In this thread I am going to attempt to explain to everyone in simple terms how to go about creating beautiful profile pages and provide some advanced techniques, as well as offering a side thread to accompany this thread, for technical support and advice.

Let's get started shall we?:

1) First you go into your User Control Panel, Located here or above to the left on the navigation bar.

2) In the User Control Panel, at the top left, go under Your Profile and then click on Customize Profile.

3) From this location, you can see all the available options for customizing your profile. It may seem a bit daunting at first, but it's really quite simple to personalize this space just how you want it by editing fonts, colors, borders, background tiled images, and gradient images... for each aspect of your profile.

So this is the simple part... anybody can adjust these settings, without having to know advanced CSS and HTML coding, and create a custom appearance. In the next part we will take it one step at a time and get into more advanced techniques and explain in full detail which part is effected and offer tips and tricks.



* This article is the sole property of myself and ForumGarden.com please do not post this article in full or in part on any other forum without permission, or TombStone will track you down. If you wish to link to this article from another forum, please mention ForumGarden along with the link in the post. Thanks.

[G-man]

Part Two: Customize Profile

Main

Customizable Options:

Font Family: This option sets the style of font to be used throughout the profile page with the exception of the Controls area.
Text Color: This selects the color to be used on all the main areas of text, including the user name (unless you are a subscribed member, in which case this remains green), and rank. You can either type in the hexadecimal color code, if you know it, (ie. #003300...) or use the color palette by clicking on the box to the right of the alpha-numeric text entry field.
Shaded Text Color: This includes all of the shaded text sections within field boxes throughout your profile, including: Last Activity, Current Activity, Timestamps, "About Me" page text headers (Biography, Location, Interests...), Statistics Page headers (Total Posts, Posts Per Day...), "Contact Info" headers (Send a message to ____., Instant Messaging,...), time stamps and "Posted In" headers on the Blog info page.
Hyperlink Color: This selects the text color for all hyperlinks in the main areas of your profile.


Border Color: This affects the border color surrounding the main content fields.
Border Style: This affects the appearance of borders. You have the option of creating dash-ed line borders, solid borders, grooved borders, double line borders, no borders...
Border Width: This sets the width of the border if you have selected one.
Padding: This affects the space between the field and the surrounding border.


Background Color: This determines the main background area of your profile page.
Background Image: This is where you would place a background image or repeating tile in the main background.
Repeat: This determines how you wish to display your background image. You have the option of repeating the created image horizontally, vertically, or tiling it both directions.

* Design Tip #1:
The main design key to keep in mind with text and backgrounds is contrast. If, for example, you are choosing to use a light colored background; consider using a darker color of text to use over these lighter areas for contrast and the opposite for darker backgrounds where lighter text should be considered.


This concludes the main section for customizing your profile page. If you have any questions please post them in the companion tutorial thread. You should now have a fairly good understanding for editing the next sections.

[G-man]

Part Three: Customize Profile

Block Borders
If you customize this, you should explicitly set background colors for both major and minor block headers.

Customizable Options:

Border Color This option selects the color that surrounds the Major and Minor Block Headers (the bars) and the attached fields.
Background Color This options selects the background color of the border.
Background Image This option allows you to place an image in the background of the border.
Repeat This option determines how an image is repeated. The options are horizontally repeated, vertically repeated, no repeat, or vertically and horizontally repeated.

[G-man]

Part Four: Customize Profile

Major Block Headers
The Major Block Headers are the top bars that are located throughout your profile page.

Customizable Options:

Text Color This option selects the color to be used for the text on all the Major Block Header bars.
Background Color This determines the background color of all the Major Block Header bars.
Background Image This is where you may create and/or upload a background image or gradient for use on the Major Block Header bars.
Repeat This determines how you wish to repeat the image used for the Major Block Header bars. You have the option of using a full size static image; repeating horizontally, vertically or both a background image, or using no image.

Later on I will cover the more advanced options you may choose to use for customizing this and other image areas.

[G-man]

Part Five: Customize Profile

Minor Block Headers
The Minor Block Headers are the bars that are located just beneath the Major Block Header bars throughout your profile page.

Customizable Options:

Text Color This option selects the color to be used for the text on all the Minor Block Header bars.
Background Color This determines the background color of all the Minor Block Header bars.
Background Image This is where you may create and/or upload a background image or gradient for use on the Minor Block Header bars.
Repeat This determines how you wish to repeat the image used for the Minor Block Header bars. You have the option of using a full size static image; repeating horizontally, vertically or both a background image, or using no image.

[G-man]

Part Six: Customize Profile

Block Footers

The footer is located at the bottom of all the block field boxes that contain the Major and Minor header bars and content.


Customizable Options:

Text Color This option selects the color to be used for the text on all the Block Footers.
Background Color This determines the background color of all the Block Footers.
Background Image This is where you may create and/or upload a background image or gradient for use on the Block Footers.
Repeat This determines how you wish to repeat the image used for the Block Footers. You have the option of using a full size static image; repeating horizontally, vertically or both a background image, or using no image.

[G-man]

Part Seven: Customize Profile

Primary Content Areas


Customizable Options:

Text Color This option selects the color to be used for the text on all the Primary Content Areas.
Hyperlink ColorThis option selects the hyperlink text color to be used for the hyperlinks on all the Primary Content Areas.
Background Color This determines the background color of all the Primary Content Areas.
Background Image This is where you may create and/or upload a background image or gradient for use on the Primary Content Areas.
Repeat This determines how you wish to repeat the image used for the Primary Content Areas. You have the option of using a full size static image; repeating horizontally, vertically or both a background image, or using no image.

[G-man]

Part Eight: Customize Profile

Secondary Content Areas


Customizable Options:

Text Color This option selects the color to be used for the text on all the Secondary Content Areas.
Hyperlink ColorThis option selects the hyperlink text color to be used for the hyperlinks on all the Secondary Content Areas.
Background Color This determines the background color of all the Secondary Content Areas.
Background Image This is where you may create and/or upload a background image or gradient for use on the Secondary Content Areas.
Repeat This determines how you wish to repeat the image used for the Secondary Content Areas. You have the option of using a full size static image; repeating horizontally, vertically or both a background image, or using no image.

[G-man]

Part Nine: Customize Profile

Controls
These include text boxes, buttons, pop-up menus, checkboxes etc.

Customizable Options:

Font Family This option selects the font style to be used for the text on the Controls.
Font Size This option selects the text size to be used for the text on the Controls.
Text Color This option selects the color to be used for the text on the Controls.
Border Color This option selects the border color surrounding the Controls.
Border Style This option determines the border style surrounding the Controls.
Border Width This option selects the width of the border surrounding the Controls.
Background Color This determines the background color of the Controls.
Background Image This is where you may create and/or upload a background image or gradient for use on the Controls.
Repeat This determines how you wish to repeat the image used for the Controls. You have the option of using a full size static image; repeating horizontally, vertically or both a background image, or using no image.

[G-man]

Part Ten: Customize Profile

Advanced Options: Images


How to upload images for use in your Profile Page.

Background images must be uploaded to your image albums.

Go to your User Control Panel > then under Networking click on the Pictures & Albums link. From here you have the option to Add a New Album or use an existing album.

Steps for creating a new album for use on your profile:

Fill in the descriptions for:
Title:
Description:
Album Type: This MUST be set to either Public or Profile (Pictures used to modify your profile style) otherwise, they will not show up.


Image size limits:

Maximum File Size per Picture: 97.7 KB
Maximum Picture Dimensions: 600 by 600 Pixels

Pictures will be automatically re-sized to fit within these constraints if possible. However, you may receive better results by doing it manually.