ctb

Hi all!

The UG Profile Mod thread has been renewed! The old thread has become obsolete since the banning of the use of css stylesheets to modify profile pages... So, a lot of the info in the old thread became useless, and the useful info that remained is scattered all over a huge thread! So, we decided it was time for a new thread... The one and only Official UG Profile Mod Thread, version 2!

So, with the banning of css sheets, all there’s left for us to modify our profiles with is HTML! So, for all of you users who want to pimp their profile, but don’t know how: everything you need to know about HTML and profile modding will be collected in this thread!

What is HTML?

HyperText Markup Language, or HTML, is a universal code that is used for describing the structure and format of webpages, such as text size and style (bold, italic, underlined, etc.), placement of images, and much more!

How does that work? Well, HTML is actually just plain text, in which “tags” are added to edit the format of the text... I’ll give you an example of how that works: we take the word “hello!”, and edit it using some simple HTML tags!

• <b>Hello!</b>: makes the text bold: Hello!
• <i>Hello!</i>: makes the text italic: Hello!
• <a href=”www.ultimate-guitar.com”>Hello!</a>: adds a hyperlink to UG: Hello!

Using tags like this, we can go from plain text to an entire webpage, complete with images, embedded videos, and more... Like our very own UG Profile pages!

How to mod profiles using HTML?

You may have noticed, that if you go to your profile, then to “Edit Profile > About me & Interests”, there is an “About Me” section where HTML is allowed... This means, we can write our own HTML code in there, to modify our profile page how we like it! But... how do we do that? This may look like an enormous challenge, if you never used HTML before... But believe me, and I speak of personal experience, it’s a lot easier than you might think!

The first thing you need to know, is that the UG Profile page consists of various separate elements: for example, the background, the borders around the different profile sections, the background image behind the profile picture, ... All of these are separate elements, and they get specific names in HTML. We will call those names “tags” from now on. For example, the tag “.pic” is used for the blue background behind the profile picture.

For each element, we can edit certain features: if it’s text, we can edit the color, if it’s a picture, we can replace it with another picture using a link, etc. The features we can change for every element of the webpage are called “parameters” for that feature... And we change them with HTML: in the “About Me” section of our profile, we write the “tag” for the feature we would like to change, followed by the “parameters” we are changing. How do we do this:

1. You write the tag for the element you want to change: example: .pic
2. You open brackets {} like this: .pic {}
3. Between the brackets, we write the parameters we want to change for that particular feature!

The list of all editable features on the UG Profile page and their tags is in the posts below, along with the editable parameters for each tag. If you follow these rules, the possibilities are almost endless! You have to bear in mind these simple rules, though:

• HTML should be written as plain text, no line breaks! So, when you want to modify more than one tag, you write them in one line, only a space separating them.
• If there’s more than one parameter inside the {} brackets, you separate them with a semicolon (;).
• The code should start with: “<style type="text/css"><!-- “ (notice the space after “<!--“: it’s supposed to be there, to separate this “starting” code from the first tag!)
• The code should end with: “ --></style>” (again, notice the space in front of “-->”, it’s supposed to be there!)

OK! If you got all this, it’s time to give you the list of all the tags that can be edited, along with the editable parameters that can be edited for each tag! Note that this list has ALL the editable tags on it, but not the parameters for each tag yet... We’re still researching those. Here’s the list of all tags and parameters we figured out already!

ctb

The following post contains all tags you can use to edit your profile backgrounds, to edit the text in your profile, and to edit links. For each tag, all the parameters (STILL BEING UPDATED!) are listed, that you can use to change that specific tag with.
Keep in mind that:

• You should type all of the following WITHOUT LINE BREAKS in between, everything is separated with ONE SPACE!
• Begin with: <style type="text/css"><!-- (IMPORTANT: there’s a SPACE after "<!--")
• End with: --></style> (IMPORTANT: there's a SPACE in front of "-->")
• You can link to images, by uploading them to a image hosting site first: they will "host" the picture for you, and give you a link that you can use to find it. A good image hosting site is ImageShack

BACKGROUND EDITING

BACKGROUND ON LEFT AND RIGHT SIDES OF YOUR PROFILE:
body {background: url(URL) no-repeat top center #COLOR}

• {background: url(URL)}: the URL of the background image you want goes here
• {background: no-repeat}: the image repeats by default

1. Put this if you don’t want the image to repeat
2. Leave out if you want the image to repeat

• Background alignment parameters:

1. {background: top}: the image is put at the top of the page
2. {background: bottom}: the image is put at the bottom of the page
3. {background: center}: the image is centered
4. {background: left}: the image is put on the left of the page
5. {background: right}: the image is put on the right of the page
6. {background: #COLOR}: color of background (insert color code,see bottom post)

BACKGROUND IN THE CENTER OF YOUR PROFILE:
.bl {background: url(URL) no-repeat bottom left #COLOR } td {height: 100%}

• {background: url(URL)}: the URL of the background image you want goes here
• {background: no-repeat}: to stop the default image repeating (see above for explanation)
• Background alignment parameters: see above for explanation
• {background: #COLOR}: color of background (insert color code, see bottom post)

BACKGROUND FOR PROFILE SECTIONS WITH STRIPED GREY BACKGROUND (this is every section except the “About me” and “Blogs” section):
.info {background: url(URL) top right no-repeat #COLOR;}

• {background: url(URL)}: the URL of the background image you want goes here
• {background: no-repeat}: to stop the default image repeating (see above for explanation)
• Background alignment parameters: see above for explanation
• {background: #COLOR}: color of background (insert color code, see bottom post)

BACKGROUND FOR PROFILE SECTIONS WITH STRIPED BLUE BACKGROUND (this is the “About me” and “Blogs” section):
.info_bl {background: url(URL) top right no-repeat #COLOR;}

• {background: url(URL)}: the URL of the background image you want goes here
• {background: no-repeat}: to stop the default image repeating (see above for explanation)
• Background alignment parameters: see above for explanation
• {background: #COLOR}: color of background (insert color code, see bottom post)

BACKGROUND AROUND AVATARS IN FRIENDS LIST:
DIV.avt {background: url(URL)}

• {background: url(URL)}: the URL of the background image goes here

TABLE CONTAINING FRIEND LIST AVATARS:
.avt_t TD {border-right: solid 1px #COLOR;border-bottom: solid 1px #COLOR}

• {border-right: solid 1px #COLOR}: color of right borders around avatars (insert color code, see bottom post)
• {border-bottom: solid 1px #COLOR}: color of bottom borders around avatars
• (insert color code, see bottom post)

TABLE.avt_t {border-top: solid 1px #COLOR;border-left: solid 1px #COLOR}

• {border-top: solid 1px #COLOR}: color of the top border of the table (insert color code, see bottom post)
• {border-left: solid 1px #COLOR}: color of the left border of the table (insert color code, see bottom post)

Note: change all 4 of the above color codes to the same color to change all the borders in the Friends List avatar table!

TEXT EDITING

GENERAL TEXT (comments, "Basic info", "Gear info", ...)

Note: The following codes are filled in with examples. If you want to go further with the editing and experiment with lots of other ways of being creative with the text, look at these two links: Here and here.

TD {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}

OTHER TEXT
.smp {font: bold 10px Verdana; } - [status] above profile picture, text in mp3 player, date of comments
.forum SPAN {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - "Forum" section: Gender, Birthday, ...
TEXTAREA.tcomm {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Comment box: where you write your comments.

Tip: This would be a nice area of the page to add a lovely background!

USERNAME ON TOP OF PROFILE
H1 {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}

“CONTACT” AND “STATUS” SECTIONS:
.contact {border: solid 1px #COLOR;}

• {border: solid 1px #COLOR}: color of the border (insert color code, see bottom post)
  .treb {color: #COLOR}
  {color: #COLOR}: color of the text (insert color code, see bottom post)

LINK EDITING

GENERAL LINKS ("All posts by", "All threads by", mp3 names, group names, contributions, ...)
A {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: underline;}

Note: these parameters change the format of the links when the mouse isn't hovered over them!

A:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}

Note: these parameters change the format of the links when the mouse hovers over them!

OTHER LINKS (some links have different properties than most links in the profile page!)
.m {color: #COLOR;background: #COLOR} - Menu bar at top of the page (news/reviews/interviews/...)

• {color: #COLOR}: changes the text color (insert color code, see bottom post for codes)
• {background: #COLOR}: changes the background color (insert color code, see bottom post for codes)

A.dd {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Location text link
A.dd:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

.w,A.w:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - My Profile, My Music, My Blogs links (not Sign Out)

.g,A.g:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - The names in Gear Info which link to their pictures

A.smp {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - MP3 box: Rate, Comment, Add, Report; Quote in the comment box.
A.smp:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

.sm2 {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - The bottom links: About, Help/FAQ, Contact Us; etc.
A.sm2:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

.sm3 {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Usernames in friend box
A.sm3:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

A.sp {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Rate username's playing skills. Usernames in comment box
A.sp:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

.ma {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none; background: #ffffff} - Top-right My Profile link with a background colour
A.ma:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

ctb

.my {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - MP3s, Pictures, Contributions buttons; View all friends button; Band-you're-a-part-of-name section.
A.my:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

.cnt {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Links in contact box. "More pictures..." link.
A.cnt:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

A.me {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - View all MP3s link; Gear pics link; View all comments link
A.me:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

A.nx {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - "Read next" button
A.nx:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Hover effect

DIV.in_s {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - Profile Index text.

TD.m {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - The lines seperating the very top links.

TD.sts {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - "Profile last updated" text.

.sm {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} - The number in brackets beside "Gear pics" and "Reviews".

.b2 {border: solid 5px #FFFFFF} - The border around some of the sections on your page.

.b3 {border: solid 5px #FFFFFF} - A dashed line that appears in those boxes mentioned above.

.sm1 {font: normal 20px Verdana;text-decoration: none;} - "quote | answer" that appears below the comment.

a.sm1:hover {font: normal 20px Verdana;text-decoration: none;} - As above, but the hover effect.

ADVANCED EDITING

The following adaptations are slightly harder: they require you to use images of a certain size. I will provide you the correct image sizes below!

ADVANCED: BACKGROUND PICTURE BEHIND PROFILE PICTURE:
.pic {background: url(URL) #COLOR; no-repeat;padding:10px;margin-bottom:15px}

• {background: url(URL)}: the URL of the background image you want goes here (you can use only this size of image: 269 x 332)
• {background:#COLOR}: changes the background color (insert color code, see bottom post)
• {no-repeat;padding:10px;margin-bottom:15px}: always put this in, to keep the alignment correct

ADVANCED: BACKGROUND IMAGE FOR ACTIVE TABS (Active tabs = “About username”, “Gear info”, ... i.e. the things that stick out!)
DIV.info_in {background:url(URL) #COLOR;color: #COLOR}

• {background:url(URL)}: the URL of the background image you want goes here (you can use only this size of image: 14 x 33)
• {background: #COLOR}: color of background inside the tab (insert color code, see bottom post)
• {color: #COLOR}: color of text inside the tab (insert color code, see bottom post)

ADVANCED: BACKGROUND IMAGE FOR INACTIVE TABS (Inactive tabs = “Gear pics, “View all blogs”, ... i.e. the things that stick out that are slightly smaller!)
DIV.info_in_s {background:url(URL) #COLOR}

• {background:url(URL)}: the URL of the background image you want goes here (you can use only this size of image: 14 x 33)
• {background: #COLOR}: color of background inside the tab (insert color code, see bottom post)

Note: you can’t change the text color in inactive tabs with the {color: #COLOR} tag, because inactive tabs do not contain plain text but ACTIVE LINKS! It takes a different tag to change the color of those...

ADVANCED: BORDER AROUND ACTIVE TABS (“Gear info”, “About username”, etc.: active tabs are slightly larger than inactive tabs)
DIV.info_ot {background: url(URL) #COLOR}

• {background: url(URL)}: the URL of the background image you want goes here (you can use only this size of image: 10 x 38)
• {background: #COLOR}: color of background around the border (insert color code, see bottom post)

ADVANCED: BORDER AROUND INACTIVE TABS (“Gear pics”, “View all blogs”, etc.: inactive tabs are slightly smaller than active tabs)
DIV.info_ot_s {background: url(URL) #COLOR}

• {background: url(URL)}: the URL of the background image you want goes here (you can use only this size of image: 10 x 38)
• {background: #COLOR}: color of background around the border (insert color code, see bottom post)

ADVANCED: BORDER AROUND PROFILE SECTIONS
.b4 {border: solid 1px #COLOR}

• {border: solid 1px}: always add this to make sure you have a solid, 1 pixel wide border
• {border: #COLOR}: color of the border (insert color code, see bottom post for codes}

Note: you should use the color code that corresponds with the color at the bottom of the image used for the borders around the tabs. If you do this, you will have a nice color gradient border around the tabs, with the color at the bottom of the tab matching the color of the border it’s adjacent to!

EXAMPLE

To give you an example of how to use all these tags and parameters to edit your profile, here's the HTML code from ZeGuitarist's profile...



Note: notice that in the above example, the URLs linking to the images are actual links. This isn't the case in "real" HTML, of course, but the links are there so that you can click them, to see what images they refer to!

Fancy Changing The Cursor?

body {cursor: not-allowed;}
So with that, you will see:

Whatever you do.

Add:
a:hover {cursor: crosshair;}
When you hover over a link, it changes to:


You don't have to stop there. Try this with other codes - Experiment!

Thanks for this, \m/[-_-]\m/!

This site will give you the names of more cursors: http://www.echoecho.com/csscursors.htm

ZeGuitarist

As you can see, the above list of tags is not complete, because not all tags have a list of editable parameters yet... This is being worked on by ctb. If any of you readers feels like experimenting with these "unknown" tags and post results, feel free to do so, you're helping out the UG community!

We would like to thank the following people:

• All the helpful posters in the UG Profile mod thread V1, they provided us with lots of good info
• PiCSeL, the UG Article Approver and Tech Support, for providing us with some very useful code through his profile and blogs
• divid3d , the New Members Q&A moderator, for stickying this thread
• Everybody who's willing to contribute!

Written and researched by ctb and ZeGuitarist...

Cheers!

PS: Below is a list of some helpful links regarding the use of HTML in general!

HELPFUL WEBSITES:

USING COLOR:
HTML Colour Names
- The table below provides a list of the color names that are supported by all major browsers.

HTML Colours (Hex Codes)
- HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).

FORMATTING TEXT:
HTML Text Formatting
- HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags.

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

divid3d

old thread is now in the archives: http://www.ultimate-guitar.com/foru....php?p=14408731

__________________

train wreck

Can I also add some scripts?

__________________

ZeGuitarist

Post up whatever you have we'll try and add it to the first posts..

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

train wreck

so anything ranging from html to other scripting codes?

what does UG allow? no css, but what about php and stuff?

__________________

ZeGuitarist

Only HTML is allowed... As you can see, in the "About Me" section it says that HTML is allowed, nothing else, so that's the only thing you'll be able to use to pimp your profile!

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

mikko 9119

so does this mean I can finally get rid of that blasted blog, and possibly have manda remove the link from the FAQ?

I've wanted my profile on private for some time now...
*awaits for manda and clifford*
I don't care. either way, i'm just curious.

__________________

••••••

ZeGuitarist

PM Manda about it? Anyway, all help in this thread is appreciated, it won't take long before we get "zomg how do i change dis col0rz" comments

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

mikko 9119

um would've done it already.
but pm's don't work for me right now.

__________________

••••••

ZeGuitarist

What you could do to help us out is:
1. Open your blog in one browser tab, open this thread in another one
2. Skim your blog and check if all of it is in this thread
3. Post everything that isn't in this thread already
4. I'll PM manda for you..

Cheers!

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

mikko 9119

everything from there was from the last thread. it was just made to save time for people.
but thank you!!
i'll skim em and wait till manda comes around.

__________________

••••••

ctb

I was thinking that, these codes:

{color: #707070; font: bold 10px Verdana; text-transform: lowercase; letter-spacing: -1px; text-decoration: none;}

Can be used in all parts of the page which are text.
What I filled in the first posts is what was used in the original style.

I've been looking at this and this. They show the only values you can use to change the text to the desired effect.

There are codes for 'padding' in my second post, and when used, they won't have any effect. But "padding: 0px" on it's own instead of "padding-bottom: 2px", will work. It changes all the sides of that box though, not just the bottom or the right.

ZeGuitarist

^ Try to get rid of any parameters that are redundant, otherwise our first posts will look more like a wall of messy text than a useful guide

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

ZeGuitarist

BTW, how come PMs don't work for you? Are you profile banned?

__________________

~ ZeG

The Ultimate Guide to Guitar.

Stereo Images.

~ Quote of the Year:

divid3d

what do you want me to do exactly?

__________________

mikko 9119

ZeG, I have to use Safari alot. and what i'm gonna be using for the next few weeks is Safari. and the box in pm's where you write the message, doesn't work. it wont let me acitivate it, or let me write anything.

and manda, i was just wondering, is there really any use for my blog anymore now that we have this thread?
mainly asking because i've been wanting to have a private profile, but cant because of the blog.
so maybe, if it's alright with you, remove the link to my blog from the FAQ?

__________________

••••••