Welcome to Gaia! ::

Was this guide useful?

Yus :3 0.81967213114754 82.0% [ 100 ]
No *Post how it could be better please* 0.18032786885246 18.0% [ 22 ]
Total Votes:[ 122 ]
1 2 3 >
D. A. D. P. G.
Drag And Drop Profile Guide

~A Guide to The New Profile System~


PLEASE DO NOT QUOTE THIS POST!


I thought the profile system was a bit confusing at first, not to mention glitchy as all hell at times. So here's a guide to help you clear things up a bit.

Jun 15 2007 - PLEASE CLICK HERE FOR CHANGES TO V2 SYSTEM


Here's how the new system seems to me:

Some Pros of the New System:
-Drag and Drop! surprised
-You can put your avatars and images ANYWHERE (literally)
-Easier Font Usage *Turn any text into an image, and use that, so you don't have to stick to Verdana all the time xD You could do this in the previous system, but it didn't look nearly as nice unless you had extensive CSS knowledge.*
-Stock Images *For those who can't make their own*
-Anywhere Text and Speech Bubble Addition *Wee, text all over the page xD*

Some Cons of the New System:
-Glitchy *as with all new features*
-Not-so-great application of Content Boxes. *They're literally just boxes. It takes some work to make them pretty with images. x.x Plus, you have to keep them within the three page slots.*
-You have to have other content boxes to have a comment's box stay at the bottom of the page. *At least to my knowledge. This is inconvenient when you make a whole profile out of images and still want people to comment. * You CAN move the box, but you have to use CSS.
-It gets crowded and hard to make look clean.


Now, to begin with actually helpful info. :3

To Begin...

To change your profile to the New profile system, you have to go to "My Gaia" at the top of any Gaia page...then click on "Profile"....Then click on "Account". At the bottom you click the dropdown menu and change it to "New Profile".
User Image
Now View your Profile.

Click "Edit My Profile" at the top.
You go into a kind of "Edit Mode" with a menu at the side which looks like the one to the right.

Theme: Adds a background to the page using the stock images, photobucket, or URL. Applies CSS to various parts of the profile.
Content: Adds boxes of content to the page, such as the About box, Contact Info, and Comments box.
Avatar: Adds avatars to the page. You can add from your friendslist or via username.
Caption: Adds speechbubbles to the page. Clicking edit on a made speechbubble makes available the options of the left or right tail.
Picture: Adds a picture to the page, which can be resized.
Text: Adds text to the page. BBcode enabled.
View: Saves your page, and shows you how your page now looks.




Adding a Background

This is pretty much self-explanatory. Pick from one of the available backgrounds or upload one via photobucket or URL. You can also add one via CSS. (See Below)

Using CSS


There were some changes made with the way CSS is used in the new profile system. The elements now have new names. But no worries, it's not hard to figure out.

PLEASE KEEP IN MIND. I am no CSS expert. This is not a CSS guide. I'm simply giving you basic information on this, since there are TONS of CSS guides out there who can give you all the extensial code that goes between the {}'s, this is just pointing out the class names and how CSS works in the new profile system, and giving a few examples to get you started.

If you want more extensive CSS for v2, please check out Ellindranyth's All Out Guide to CSS or Awiergan's CSS Codes for New Profiles.
*For quick links to the v2 codes, click here and here*


The previously designated sections are now panels.
#profile is now .details_panel
#about is now .about_panel
#friends is now .friends_panel
And so on...

Background
body or html is the class name of the background of the entire site.

EX:
html
{background: #333
}

This would change the entire background to grey. You could also set it to transparent, and then use an image as a background.

Content Boxes
.panel is the class name of the content panels. You can style this and it will affect every panel.

EX:
.panel
{background: none;
color: #333;
}

This would make the background of the profile show through, and turn the text color within the panels grey.

.panel
{margin-left: auto; margin-right: auto; width: 760px;
}

This code will CENTER THE PANELS! Yay! :3 If it looks wonky, or smooshed, fiddle with the width variable.

.panel h2 is the class name of the content panel HEADERS. You can style this and it will effect every panel header.

EX:
.panel h2
{background: #000;
color: #FFF;
}

This code would make the background of each header black, and the text color of every panel header white.

#columns is the section behind the columns. Styling this will effect...the area behind the columns. xD

EX:
#columns
{background: #000;
}

This code would change the area behind the columns black.

Other

.media_panel embed is the class name of your media itself. You would only need to use this to change the size of your media. Supposedly.

EX:
.media_panel embed
{height:300px; width:450px;
}

Gaia fills the rest of the square/rectangle with white space, so fiddle with the numbers until it suits you.

*Again, for more extensive CSS, please see Ellindranyth's All Out Guide to CSS or Awiergan's CSS Codes for New Profiles*


Adding/Subtracting Content

Again, once you click on this it's pretty self-explanatory. When you click on the Content button, a menu pops up with a list of all the content boxes you can add, which looks like this:
User Image
Personally, I think these boxes look too plain for a nice profile unless you want to make headers and footers and stuff for them, or customize them with the new CSS integration. The customizable box header is kind of nice though if you want to change the name of the box.
All the boxes are drag-and drop within different slots.

Adding Music To Your Profile


NOT WORKING See Demonic Life's tutorial for adding music to the new profiles HERE and HERE!
I prefer the second method, as it's easier, and it's applicable to all operating systems.


Adding Avatars

By clicking on the Avatar button, you can add avatars of your friends or just anyone on Gaia. You can make a party on your profile page! surprised Avatars are added via drop down Friendslist or by username directly.
The emoticons in the picture gallery work well with avatar groups or couples!

Captions



User Image
These are just speech bubbles. Put in the text you want (NOT BBCODE COMPATIBLE!) Then click Add, as usual.
To change the direction of the tail of the speech balloon, click edit on the grey bar above the speech bubble. This opens a menu that looks like the one to the right.

Here you can change the direction of the bubble tail (left or right) and the style (so far, Normal is the only option. I assume this will mean you'll be able to choose from a thought bubble or shouting bubble, that kind of thing, in the future.)
These speech bubbles are especially useful when you want a group of avatars to "say" something (xD) or when you want a picture in general to "speak."




Adding Pictures

Woo, the best part. <3 Ok, to begin, you can add pictures from the gallery of pictures Gaia has provided, which I recommend you check out first. owo It's lovely.

You can also add pictures via Photobucket. This can be a bit glitchy. To add them, you can click on the picture of the image and click the "Paste Image" button, or you can drag and drop the icon of the picture into the text box. Then click Add. This puts your image on the profile. ^^

Lastly, but not least, you can add images via URL. Just copy and paste the URL of the image you want and paste it into the text box and click Add. <3

What You Need to Know About Images

Gaia likes to size down pictures from photobucket. UPLOAD THE PICTURES TO IMAGESHACK AND THEN TO GAIA VIA URL. This is the only way to avoid image shrinkage unless you want to use the method below, if you're really worried someone will steal your art!
This seems to have been fixed! Yay!

If Gaia is still sizing up/down pictures from photobucket, just upload it to Imageshack. It's not worth cutting them up for no reason. xP


Adding Text

Clicking the Text button does what it sounds like it would do...add Text. xD And! IT'S BB CODE COMPATIBLE! Yay! This is the way to add all your info to your profile if you don't want to use the About box.

You can change the color, add text deco, put in links, all the good stuff you can do with BBCode. Plus you can move it anywhere on the screen!


Other Helpful Tips and Useful Info You Should Most Definitely Read

I've learned a few things while making my profile with the new system that can be a hinder or a help.

Hint #1
Taking away the bland comment box means no one can comment on your profile right? Wrong. Simply link to your comments page. :3 *You can even make a pretty picture that says COMMENT ON MY PROFILE HERE or something xD*
Your comments page URL will be:
http://www.gaiaonline.com/profile/index.php?view=comment.ShowComments&item=#######

Simply replace the # with your user number. (That number at the end of your profile URL.)

Hint #2
Profiles don't have to be all text-y. You could just put a picture there and leave it as that. It could link somewhere, such as a minishop or quest. :3

Hint #3
Breaking up images makes them harder to steal! Picture and art pirates are some of the worst kind.

Hint #4
Can't think of anything to make your profile around? No theme? Look at the gallery of backgrounds and pictures Gaia has at your disposal! They're great for starting a profile. Like sushi? Gaia has plenty of it! Like Grunnies? Go for it. <3

Hint #5
Take people with other screen resolutions into consideration. The new profile system makes it difficult to gauge how big the area you're using really is. If you have a resolution in the thousands, try not to let your profile go all over the page, think about those with lower resolutions and keep your profile within reason. If you want to, set your resolution lower to check out how your profile looks. :3 Others will appreciate it.


Please give me feedback on this guide so I can make it better for you all! <3

To Link To This Guide
User Image - Blocked by "Display Image" Settings. Click to show.
[url=http://tinyurl.com/gzf3h][img]http://tinyurl.com/zef7f[/img][/url]
X ------>
Thank you muchly to [willow] for telling me about the imageshack thing! <33333

She hath saved a many people from hours of cutting up images. :3
<------ X
X ------>
domokun Read and be educated!
<------ X
X ------>
Thanks AGAIN to [willow] for pointing out the URL shortening xD) I just wasn't thinking about it.

Coerul's common sense gauge is running low.
<------ X
X ------>
Big thanks to Demonic Life for letting me link to her tutorial thread. <3
<------ X
Very nice considering it's for first guide, I found it helpful.

But now, I have a quick question and if someone knows the answer it would be great. I've been messing around with the new profile system, and the one thing that bothers me is the empty space on the far right side.

So now, I'm wondering can I click and drag 'boxes' over there to help fill the space, or is it simply impossible and I'll have to live with it?
Hello! Is there a way to keep my background fixed, like not repeating over and over when you scroll down?
Oniongirl
Very nice considering it's for first guide, I found it helpful.

But now, I have a quick question and if someone knows the answer it would be great. I've been messing around with the new profile system, and the one thing that bothers me is the empty space on the far right side.

So now, I'm wondering can I click and drag 'boxes' over there to help fill the space, or is it simply impossible and I'll have to live with it?
X ------>


As far as I've been able to tell, you can't drag boxes farther than that last slot right now. It's really unfortunate for people with larger screen resolutions. XP

@Hiromi: Not yet. That's why I've stuck with plain and stock backgrounds. If the image is big enough and hosted on imageshack, it doesn't look so bad :3 Look up Sarekx to see what I mean. (If he hasn't changed his profile xD)
<------ X
X ------>
No one needs to make a profile using the new system? o.-
<------ X
how can i change to the new system?
` Axel `
how can i change to the new system?
X ------>

If you go to the top of the page, the navigation bar, click on "My Gaia" and then "Account" to the right.

Scroll down and there should be a dropdown menu next to "Choose Profile" where you can switch between the new and old profile systems :3
<------ X
X ------>
Guide updated to include information on CSS, and edited for fixed glitches and problems.
<------ X
Cool Thanks for the tutorial! biggrin
coerul
` Axel `
how can i change to the new system?
X ------>

If you go to the top of the page, the navigation bar, click on "My Gaia" and then "Account" to the right.

Scroll down and there should be a dropdown menu next to "Choose Profile" where you can switch between the new and old profile systems :3
<------ X


See, here's why my problem lies.

I don't have a 'drop down menu'.

I only have 'old school profile'. And yet, I can edit to the new D.A.D profile system, but it doesn't show. I still have the CSS coding for my old profile (took five weeks to do that stupid thing, too), saved, but I would LIKE to try the NEW style, maybe? It'd be nice if I Could get it to, I dunno.. WORK. >> <<..

-EDIT-

Don't you hate when gaia lags so much it takes hours for the right thing to LOAD. *dead*

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games