Mood: Satisfied 3nodding
It took me a while to figure out how Version 2 coding works. Of course, it wouldn't have been possible without any help. For that, I would have to thank Kimaya for helping me out. Now I understand why it was confusing me until now. The best way for me to learn how to do it was to use my old profile as a template.
As you can see, there's not much of a obvious difference compared to my old profile layout. However, the coding is a different story. The obvious things are the Gaia header and the links for the comments links (add/view comment). The part where it says "Viewing XX of XX comments" is also gone.
Here's an insight of a few other things I've noticed.
1. Positioning - Margins are used to position your elements. Unlike the old school version, this requires a bit of guesswork. This becomes a lot more difficult when you add additional custom elements.
2. Media clips - Old school profiles do not have the problem with disappearing media clips as they do in V2. I'm sure most of you have to hover over YouTube clips to see the play button. There's an easy remedy to this.
opacity: 1.00; -moz-opacity: 1.00; filter:alpha(opacity=100)
The advantage of V2 is that the "media embed" attribute actually keeps the actual customized size of the clip. For those that use Safari, this is definitely a plus.
3. Status buttons - This part would drive most V2 beginners crazy. I should know. *laughs* Unlike old school coding, there's several parts to this step in V2.
a) Click on the question mark in the Gaia header that shows your avatar. For the add button, right click on "Add to friends/Ignore" and copy that link.
b) Create a custom section. "Edit profile>Content>Custom"
c) Give this a name (ex. "Custom add" for your adding button)
d) Click "edit" in that "Custom add" box. Paste the link from "Add to friends/Ignored" in the text box above the name of the custom section.
e) Click "View"
f) View the source code of your page. On Firefox (mac), go to "View>Page Source". Carefully scroll down until you see something like this:
<div id="panel_xxxxxxx" class="panel custom_panel">
<h2>Custom add</h2>
An underscore and numbers before the name of your custom panel. This is what you put into your CSS editor. When you edit your profile code, remember to type it out with the number symbol in front of it like this: #panel_xxxxxxx
The coding for customizable image links can be found in Elindranyth`s CSS Guide. Since you're there, you might as well check out the guide.
I hope that this clears up some of the confusion and makes the journey for V2 a lot easier. There's still more for me to learn as I make my new profile layout.
