Vermillion

Moderator

Vermillion blogged

Customize Your Neo Profile 100%!

This is my second entry of a blog, and I though I should make something that a lot of people may like.

If you have seen my My Neo profile, you will see that I put pictures and smaller text on it. A lot of people think I did that magic with HTML, but it's just not that. In fact, most tags are escaped (meaning you will see the code rather than the object). This escaped tags include "img", "font", "div", and more.

And effectively, a lot of people though that I was using the "img" and "font" tags. But it's not that. The tags I use in my profile are the "u" (for underlined text) and "b" (for bold text). How in hell did I turn a simple "b" tag into an image and an "u" tag into smaller text (and that, the u tag has no underline...)!? Well guys, it's time for you to believe in the magic of inline CSS.

To start off, you need to know at least basic HTML (well, VERY basic HTML! You will only use the "b" and "u" tag for this), and it is preferred that you know CSS too, but it is not really a requirement.

First, you are going to put a header. To practice, why don't you use mine?

(Right click and properties to see the link).

To put that as your profile header, you would use this code:

code

<b style="background:url('http://i35.tinypic.com/2i6ywpj.jpg');padding-right:546px; padding-bottom:96px;"> </b>

Don't get scared!! That's actually pretty basic code, but since you may not know anything about it, I will explain a bit of it here:

We are using the bold tag.
This bold tag, has an attribute "style". This attribute is to put all the inline CSS there.
background:url('LINK') is the picture you want to put as a header.
padding-right is the width of your picture.
padding-bottom is the height of your picture.
"px" after the numbers in both padding-right and padding-bottom, says that the padding will be done with pixels. You can use % (percentage) instead of pixels, but then it is harder to get the correct size for both.
Inside the tag itself, you see an space. It seems Neo stripped part of my code here :P, instead of putting an space there, you have to put " ". That's actual code to make an space.

Note for those who have knowledge with CSS: You can't use the "width" and "height" attributes in bold tags. That's why they are replaced with padding-right and padding-bottom.

After you put that code, the text you put below it will be hovering over the picture. To prevent that from happening, simply add some white lines below that code.

code

<b style="background:url('http://i35.tinypic.com/2i6ywpj.jpg');padding-right:546px; padding-bottom:96px;"> </b>



Your text should here. You actually need to calculate the lines manually by previewing your profile.

That's how you add images, but what about the text? Okay, with the text, I decided to have some fun, so I used the underline tag ("u") to play with it (: :

code

<u style="font-size:10px; text-decoration:none;">I consider myself a HUMAN. An ugly yet beautiful HUMAN.</u>

You should be able to tell, but anyways:

It's the underline tag.
The style tag you saw a few seconds ago.
font-size is what will define the size of the font. Again, notice the "px".
text-decoration:none is what I do to get rid of the underline. Clever huh? An underline tag with no underline (:.

That's all for now, if I was not clear enough, feel free to let me know. Comments will be appreciated!

customize neoseeker neo profile neoseeker related

Like (2) Share (1)

Responses (10)

0 thumbs! #

Kokoro Nov 27, 08

Wow, nice. Thanks for the code, Vermillion.

0 thumbs! #

Spiritual Nov 27, 08

Your profile looks really nice Vermillion! I'm not surprised your wrote a mini-tutorial on how to do it

0 thumbs! #

Liliana Nov 27, 08

Not really mean to bash, but whats the point of trying to make your profile look like your NeoHome?

0 thumbs! #

Vermillion Neoseeker+

Nov 28, 08

There has to be no point. If people want to customize their profiles, then they can. If they don't want, then they won't.

I would rather ask "what's the point in having a boring profile" tbh.