[GUIDE] Learn How To Code v2/Current Profiles

[Eliae Darr]

xI_Kuro_Ix

Eliae Darr

xI_Kuro_Ix

What's the selector for the image of the person viewing your profile?

I've heard of this being done, but I've never actually seen it myself. Do you have a link to a (public) profile I could look at that has this on it?

Here we go

Okay! After staring at that profile and its code for probably close to 20 minutes- completely fascinated, I assure you- I finally figured it out! It's not actually a selector, apparently, but a specific url- and feel free to check it with any mules you have as well (if you have any, of course): http://www.gaiaonline.com/marketplace/itempreview/iid=0/n=0/v=0/p=aa/store=-1/host=0/s=stand/f=front/a=0/bg=none/ts=0

[xI_Kuro_Ix]

Eliae Darr

xI_Kuro_Ix

Eliae Darr

xI_Kuro_Ix

What's the selector for the image of the person viewing your profile?

I've heard of this being done, but I've never actually seen it myself. Do you have a link to a (public) profile I could look at that has this on it?

Here we go

Okay! After staring at that profile and its code for probably close to 20 minutes- completely fascinated, I assure you- I finally figured it out! It's not actually a selector, apparently, but a specific url- and feel free to check it with any mules you have as well (if you have any, of course): http://www.gaiaonline.com/marketplace/itempreview/iid=0/n=0/v=0/p=aa/store=-1/host=0/s=stand/f=front/a=0/bg=none/ts=0

Thank you so much! Yeah, I stared at the code for a bit, but my brain melted before I could do some searching.

[Eliae Darr]

xI_Kuro_Ix

Eliae Darr

xI_Kuro_Ix

Eliae Darr

xI_Kuro_Ix

What's the selector for the image of the person viewing your profile?

I've heard of this being done, but I've never actually seen it myself. Do you have a link to a (public) profile I could look at that has this on it?

Here we go

Okay! After staring at that profile and its code for probably close to 20 minutes- completely fascinated, I assure you- I finally figured it out! It's not actually a selector, apparently, but a specific url- and feel free to check it with any mules you have as well (if you have any, of course): http://www.gaiaonline.com/marketplace/itempreview/iid=0/n=0/v=0/p=aa/store=-1/host=0/s=stand/f=front/a=0/bg=none/ts=0

Thank you so much! Yeah, I stared at the code for a bit, but my brain melted before I could do some searching.

What saved me was the "Inspect Element" option with Chrome. I managed to figure out which element held the image I was looking for, then had to find that particular reference in the CSS- which, thankfully, I'd quickly gone over a few times beforehand, mostly admiring the sheer effort put in to animating the images. That was impressive work on his part, I must admit. Makes me interested in trying something like that sometime as a side-project.

[Eliae Darr]

GuinAoiichi

Eliae Darr

GuinAoiichi

How do you add slideing panels to your profile??

What do you mean by "sliding panels"? Are you wanting something like what I have on my profile?

Yes that too. But without the scrollbars.

What i originally meant was something like this :

http://css3.bradshawenterprises.com/accordions/


From what i understand, you can get that effect "inside" one panel. Or am i mistaken?

Honestly, I'm not sure. I haven't tried embedding HTML into text in say, an About Me section or even a Custom section in v2, but it may be possible. Hopefully I'll have an answer for you sometime tomorrow on this.

[Eliae Darr]

Pepe Ilgakojine

Eliae Darr

Pepe Ilgakojine

Hi!
Um, i have a question, maybe someone asked this already: How to make change the youtube video to simple bar on bottom of profile?
Thanks!

Unfortunately, I'm not entirely sure how to do this right now. If you have a link to someone's (public) profile who has this done, I'd much appreciate being able to take a look at it- and I may even be able to answer your question if I can.

Link to my friend's profile. If it's not public, i will take a screenshot)

It is, thankfully, and I believe I know what they did to work that out. However, I'd like to experiment with it a little to be sure; hopefully I'll have something concrete for you in the next day or so.

[Eliae Darr]

Pepe Ilgakojine

Alright- I finally got this bit figured out!

.media_panel h2
{
display:none;
}
.media_panel
{
background: transparent;
position:fixed;
bottom:0px; left:0px;
padding:0px!important; margin:0px!important;
width:100%; height:25px!important;
}
.media_panel embed, .media_panel object
{
background:transparent!important;
width:100%; height:25px;
}

If you don't have more than one media panel in your profile, you should be able to just copy this over to your profile CSS to get it working- otherwise, we may have to do some extra work to target just one panel.

If you have any further questions, feel free to ask. 3nodding

[Eliae Darr]

GuinAoiichi

Okay... I just got done trying a few different things with it on v2 profiles, and I've realized two things so far: First, v2 apparently doesn't like embedded HTML, as it's displayed like normal text (I may have to see if there's a way around that); second, I can't seem to make use of some of the properties necessary to work it- such as ".ac_hidden" using javascript (which we can't add to our pages, as far as I'm aware) or the ":target" property, which only applies to links... and BB Code apparently doesn't like the type of links used for things like that (the "#" kind of links). I'll have to experiment with v1 sometime, though, to see if it's more possible there.

So, longer post short-ish, it doesn't seem like you can make an actual accordion like that with v2, but you can create a mock-accordion using height transitions. One thing that you may be able to do to pull it off is "pushing" them against each other (vertically) and set them all to the same height (for example, 150px). With that, you ought to be able to move almost seamlessly from one panel to another.

[GuinAoiichi]

Eliae Darr

GuinAoiichi

Okay... I just got done trying a few different things with it on v2 profiles, and I've realized two things so far: First, v2 apparently doesn't like embedded HTML, as it's displayed like normal text (I may have to see if there's a way around that); second, I can't seem to make use of some of the properties necessary to work it- such as ".ac_hidden" using javascript (which we can't add to our pages, as far as I'm aware) or the ":target" property, which only applies to links... and BB Code apparently doesn't like the type of links used for things like that (the "#" kind of links). I'll have to experiment with v1 sometime, though, to see if it's more possible there.

So, longer post short-ish, it doesn't seem like you can make an actual accordion like that with v2, but you can create a mock-accordion using height transitions. One thing that you may be able to do to pull it off is "pushing" them against each other (vertically) and set them all to the same height (for example, 150px). With that, you ought to be able to move almost seamlessly from one panel to another.

Hey Thanks for trying !!

I think i did what you said in your second paragraph once. But it was unintentional and don't remeber how i did it. sweatdrop

I LL see what i come up with . Thanks again.
EDIT: oh yeah, how do you remove the scroll bars?

[Senor Troll v2]

This is a pretty nice guide, <3

[Pepe Ilgakojine]

Eliae Darr

Thank you very much!

[Eliae Darr]

GuinAoiichi

Hey Thanks for trying !!

I think i did what you said in your second paragraph once. But it was unintentional and don't remeber how i did it. sweatdrop

I LL see what i come up with . Thanks again.
EDIT: oh yeah, how do you remove the scroll bars?

Not a problem! Transitions are kind of funny to work with, but if all you're planning on doing involves all of your content being in one column, you can do it pretty quickly like this (changing values as necessary, of course):

.panel
{
height: 20px; /*Enough height to display the header*/
transition: height 0.5s; /*A quick height transition- now cover the major browsers that support CSS3*/
-moz-transition: height 0.5s;
-o-transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.panel:hover
{
height: 150px;
}

Please be aware that this code will affect all panels on your profile; if you only have a few that you want affected, you'll have to copy the code into each necessary selector. On the upside, if you don't want all of the panels moving to the same height, then you can adjust it by setting the height property in each panel's :hover instead of .panel:hover (like #id_about:hover). This makes it a touch more difficult to move across multiple panels quickly, as the height of the overall "structure" then varies. You should be able to get more transition ideas from this w3 Schools page.

To quickly answer your other question, getting rid of scrollbars is actually really easy- just replace any overflow codes with "overflow: hidden;"- over the entire block, though, so "overflow: scroll; overflow-x: hidden; overflow-y: auto;" would become "overflow: hidden;".

[Gemonade]

How to loop or repeat the media (youtube) in a v2 profile?

&loop=1 won't work for me. Any other suggestion?

[Jade l Hawke]

Is there a way to just, paste an image onto your profile and have the columns automatically appear in frount of it, without having the image as your background?

[Eliae Darr]

Bellus Mortis

Is there a way to just, paste an image onto your profile and have the columns automatically appear in frount of it, without having the image as your background?

Unfortunately, not that I'm aware of. It'd be pretty awesome if we could, but even adjusting the z-index in CSS hasn't seemed to put a custom image behind the panels. I may try experimenting a little more with z-indexes to see if there isn't something that can be done with it, but I'm not sure that it's possible.

If you're wanting to create an illusion of something like that having been done, however, you should be able to simply use your main background in the html selector and the other image as the body background; you should be able to edit this little segment to help you with positioning and all that:

body
{
background: url(http://image.url.here) no-repeat fixed 0px 0px;
}

It is incredibly important for the "fixed" statement to be added in for Firefox and Opera users, since the background positioning may not work properly on them without it.

I'll fuss around with the z-indexing a little more to see if I can get it to work, but there are no real guarantees with it, unfortunately. I'll quote you again once I have a more solid answer on getting custom images behind panels. 3nodding

[Jade l Hawke]

Eliae Darr

Bellus Mortis

Is there a way to just, paste an image onto your profile and have the columns automatically appear in frount of it, without having the image as your background?

Unfortunately, not that I'm aware of. It'd be pretty awesome if we could, but even adjusting the z-index in CSS hasn't seemed to put a custom image behind the panels. I may try experimenting a little more with z-indexes to see if there isn't something that can be done with it, but I'm not sure that it's possible.

If you're wanting to create an illusion of something like that having been done, however, you should be able to simply use your main background in the html selector and the other image as the body background; you should be able to edit this little segment to help you with positioning and all that:

body
{
background: url(http://image.url.here) no-repeat fixed 0px 0px;
}

It is incredibly important for the "fixed" statement to be added in for Firefox and Opera users, since the background positioning may not work properly on them without it.

I'll fuss around with the z-indexing a little more to see if I can get it to work, but there are no real guarantees with it, unfortunately. I'll quote you again once I have a more solid answer on getting custom images behind panels. 3nodding

Alrighty, thank you. c: