Designing Your Profile Page: A Tutorial

G-man · Post by **G-man** » Sat Aug 30, 2008 11:45 am

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 · Post by **G-man** » Sat Aug 30, 2008 1:10 pm

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 · Post by **G-man** » Sat Aug 30, 2008 1:42 pm

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 · Post by **G-man** » Sat Aug 30, 2008 1:56 pm

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 · Post by **G-man** » Sat Aug 30, 2008 1:59 pm

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 · Post by **G-man** » Sat Aug 30, 2008 2:04 pm

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 · Post by **G-man** » Sat Aug 30, 2008 2:12 pm

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 · Post by **G-man** » Sat Aug 30, 2008 2:15 pm

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 · Post by **G-man** » Sat Aug 30, 2008 2:27 pm

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 · Post by **G-man** » Sat Aug 30, 2008 2:46 pm

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.

G-man · Post by **G-man** » Sun Aug 31, 2008 7:43 pm

Part Eleven: Customize Profile

Advanced Options: Designing Images

Creating images for use on your profile page.

So now that we're rather familiar with what edit's what, we are going to discuss creating images using your image editor software of choice. For me, it's Adobe Illustrator, but I'll keep this tutorial relevant to all image editors.

Major Block Header: I created the below image in Photoshop using the gradient tool and using a lighter and darker tone of green. The image size is set to cover the greatest height without leaving a space uncovered. The height of this image I created is 35 pixels high to show the greatest amount of contrast between the lighter top edge and the darker bottom edge. The width in this particular repeating image is irrelevant considering that this is a repeating image with no changes between the first pixel width. If you wish, you can layer a pattern above this image, just be certain that it matches up on the left and right, seamlessly.

(Major Block Header)

Minor Block Header: The image below is set for 22 pixels high to cover the greatest height of the minor block header. Remember when designing these images that they are going to be juxtaposed next to each other in the container that is floated to the left in your profile.

(Minor Block Header)

Seamless Tile Gradients:

If you wish to tile a background image, I recommend that you create or use an image that is seamless. By seamless, I refer to an image that doesn't show a seam when it's repeated (ie. it matches up precisely on the opposite edge).

With repeating images, you have the option of tiling it (ie. repeating horizontally and vertically), or repeating a "stripe" horizontally or vertically.

You can also use animated gif images for any of the above.

* Tip #2: When naming the images, I don't recommend that you leave empty spaces in the image name, as some browsers may have an issue reading empty spaces. If you wish to separate multiple words, use the underscore _ character.

G-man · Post by **G-man** » Tue Sep 02, 2008 4:55 pm

That pretty much concludes the tutorial.

Any questions?

RedGlitter · Post by **RedGlitter** » Tue Sep 02, 2008 10:53 pm

G-man;970876 wrote: That pretty much concludes the tutorial.

Any questions?

I have no Qs as of yet but i would like to say I found this info very helpful and I think you did a fine job of putting it together for us. Thank you.

G-man · Post by **G-man** » Wed Sep 03, 2008 10:09 am

The rating it was given doesn't reflect this, but... :rolleyes: (four people rated it a "5", one member rated it a "4", and two members rated it a "1" for "terrible" ). How can a thread such as this, (and yes, this is rhetorical) ever be rated anything less than a four, based on the amount of effort that went into creating a unique thread that doesn't exist anywhere else online, and that unselfishly provides a service, and promotes ForumGarden? Seriously, I'd like to see how the two members that gave this thread a one star rating can improve this. There's no reason to be childish or cowardly and it doesn't in the least bit, take away the need for such a tutorial, step up and explain why this is so terrible, if that's honestly how you feel, so that we can improve upon it. I attempted to explain it in the simplest manner possible so that everyone could comprehend it and have access to advanced skills that a few others have. All constructive suggestions and contributions are welcome.

I hope that this tutorial helps answer a lot of questions and that we see some really incredible and creative profiles out there.