Skip to main content

Prettifying your profile, part 3

Posted by Kim on March 20, 2013, 10:50am

Today, we present Jane's final tutorial on taking your character profiles to the next level.

Check out the first and second tutorials, and then dive in to this chapter on giving some final polish to how text and information is presented on your profiles.


How to make your profile look clean and neatly aligned

textalign1.jpg
Saluda (played by Hooke) uses simple bolded text to create section titles, then makes use of the indent tag to create simple, clean, understandable-at-a-glance sections on his profile.

Your profile is already pretty, but you want that final touch to make it look very clean and orderly?

You might want to align the text as blocktext, meaning all your sentences will extend to both sides of the page, using this:
Code:
[justify] text goes here [/justify]

textalign2.jpg
The Vessel (played by Hooke) uses a combination of centered text, italics, and bolded first letters of each line to create a poetic introduction. Plus, check out the use of images as tasteful dividers!
Sometimes it is not the code you use, but the text itself. Try to cut the text down, or add a few words so the text is shaped like a perfect square. This really works wonders, and gives your profile a clean look.

Don't use the same size for your text on your whole site.
This looks plain and makes it hard to read. Some important points or words should be emphasized to lead the eye through the profile. Less important information can be made smaller so people can read it if they want, or skip it if they are looking for the main points.

The code for changing the size of your text is:
Code:
[size=2] text goes here [/size]

You can use numbers 1 through 7 when picking your size.

BBcode gives you many possibilities you can use to your advantage to make text stand out.
Code:
[b] text goes here [/b] = bold [i] text goes here [/i] = italics [u] text goes here [/u] = underlined [s] text goes here [/s] = strike out

The text on your profile sticks to the top/bottom, no matter what you do?

"White space" or blank characters like enter or lots of spaces are trimmed off the beginning and end of text widgets when they are saved. If you want a way around this, insert some BBCode and do not put any text inside it, just hit enter a few times. Then this "White space" will not be at the beginning of your text, so it will not be trimmed off when you hit save.
Code:
[b][/b] I did not put anything inside the bold tag, so nothing will appear on my profile. But the new lines above this sentence will be preserved.

Removing the default titles from widgets
I personally use a single text-widget for my sites. However if it confuses you, you can use more.

You don't have to put text into the widget's title box. Leave it blank if you think it doesn't go well with your layout.

A neat way to organize the statistics of a char is to use columns.

textalign3.jpg
Chandra Winters (played anonymously) uses columns to organize some basic information about herself into two sections on the same line, making efficient and pleasant use of visual space.

You can find the code for the columns here.

You can use other Bbcodes in the columns too, for example the collape tag.

You will find out that the size of the columns depends on the text. This can make the columns look cluttered, because they aren't aligned the way you want them.

A solution is to create a transparent picture of a certain size.
The picture has to be just a pixel in height, and for example 250 pixels wide.
If you add that picture in the first line of every column, they will all have the same size.

Different screen resolutions
If your profile looks all pretty but another user points out that some of the alignments you made are not working, it could always be that the other user is using a different resolution to view sites.

Use Ctrl + Mouse Wheel to zoom in/out, to see how the page would look in different resolutions.

Just do your best to make it look good, but if you are worried, you can include a note that informs people that they may need to try a different resolution to see your best work.


textalign4.jpg
Bastion Maltro (played anonymously) uses multiple techiques to create a varied look to his text, from changing the size, adding bold and italics, and in some cases, just plain using extra spaces!
Want Jane to customize a profile for you? Enter to win!
Jane has generously offered to prettify one lucky person's profile! Just leave a comment on this news post that includes the words "I am entering to win that profile." Next week, we will draw a winning name!

Only players who have not previously had Jane prettify one of their profiles may enter, to give everyone a chance to experience her talents.


Thank you Jane!
As thanks for sharing some of her tricks of the trade, Jane has been awarded a nice big shiny trophy for her profile. If you appreciate these tips too, please shower her in kudos explaining her generous and helpful spirit to the world!

Comments

Vincent

March 28, 2013
12:07am

Oh, wait. Guess I'm late. haha. That'll show me to read news posts at 1 AM x3

Vincent

March 28, 2013
12:07am

I am entering to win that profile.

I would love to see what she could do for Spooky's site. x3 Fingers crossed!

Kim

March 27, 2013
10:09pm

I am going to run the drawing for this first thing tomorrow morning. Good luck everyone who entered! :)

Wooby

March 27, 2013
8:22pm

I am entering to win that profile! :)

Man I realized recently all of my profiles are really out of date... After I get them all updated, I really want to try some of this! Thanks for the tips

Oaky

March 27, 2013
5:11pm

These tips are pretty helpful, I plan on using them in the future! :)

And why not enter to win the profile while I'm here?

(I am entering to win that profile.)

Iokus

March 27, 2013
4:02pm

I am entering to win that profile.

CelestinaGrey

March 26, 2013
1:12pm

Very neat!

I am entering to win that profile! :D

Rambo

March 26, 2013
3:33am

Wow, some amazing tips in this part of the post alone.
Will be great to try some of them out for myself when I get the time.

"I am entering to win that profile."

Good luck to everyone.
:D

Jane

March 25, 2013
12:22pm

I can't wait to see who wins :3

And thank you <3

Xheila

March 25, 2013
12:18pm

enteriinggg

FishyFi

March 25, 2013
11:11am

Having quietly observed each of the prettifying tutorials and been amazed at what you can do, I am entering to win that profile!

blue

March 24, 2013
6:37pm

I loved reading this tutorial. Thanks for all of the tips!

I am entering to win that profile.

Martini

March 24, 2013
4:36pm

I am entering to win that profile!

unlikelynominee

March 23, 2013
12:12pm

I am entering to win that profile. Jane's so cool. :)

Tetttiva

March 23, 2013
7:19am

I am entering to win that Profile.

Candleshy

March 23, 2013
7:01am

I am entering to win that profile!

I can't wait to test some of this stuff out on my own profiles, though. It'll be an awesome learning experience! :3

Skye

March 22, 2013
10:25pm

All of these tips have been SUPER helpful in making my own profiles pretty! <3

I am entering to win that profile. YOU BET I AM.

Baulder

March 22, 2013
6:55pm

I am entering to win that profile

Stunning job.

Alecia

March 22, 2013
4:20pm

Thank you, this is very useful! :)

Also, I am entering to win that profile. Thank you for the opportunity! :D

Ben

March 22, 2013
1:42pm

Totally entering for prettifying o: These are fantastic and I plan to start experimenting as soon as I get the free time for it! Great, great, GREAT tutorials.