Welcome to Gaia! ::

Hi,

What are the codes for the panel shapes? Rounded corners, square corners..etc.
Does anyone have the wish list codes for bubbles? Or how to move your panels around?
example profile:
http://www.gaiaonline.com/profiles/soundholic/23060015/
kittymmeow's avatar

Fashionable Fatcat

Pikameru
Hi,

What are the codes for the panel shapes? Rounded corners, square corners..etc.
Does anyone have the wish list codes for bubbles? Or how to move your panels around?
example profile:
http://www.gaiaonline.com/profiles/soundholic/23060015/

There is a code for rounded edges, but no specific code for square edges since that's default.
.panel{
border-radius:15px;
}
You can change 15px to higher or lower numbers to make it more or less rounded.

For the "bubbles", it uses the same code to round corners as the panels but with a border:
#id_wishlist img {
border: 2px solid white;
border-radius:15px;
}
#id_wishlist img.premium_sparkle{border:none}
You can change the color of the border by changing "white" another color name or hex code, and you can change how thick you want the border to be by changing 2px to higher or lower numbers. The second part of the code is to make it so that the sparkly gif on premium items doesn't also have a border because that makes the circles overlap weirdly and looks messy.

Moving the panels is more complicated since there's so much you can do with it. To position your whole profile to the right like she did, you can do this:
#columns{
right:0;
left:auto;
}

Positioning it in other places would be less simple and I'd have to know what you wanted to directly help you.
kittymmeow

Maybe center it directly in the middle and on the bottom right.
codes for coloring the details panel? or maybe your recents? just a panel on the details?
kittymmeow's avatar

Fashionable Fatcat

Pikameru
kittymmeow

Maybe center it directly in the middle and on the bottom right.

It would depend which parts of your profile you are positioning whether you can position it to the bottom right without causing problems on smaller screens (if the panel is too big, it will be cut off at the top or overlap the centered part).
To position something to the center is also a bit complicated, since it depends how wide the element is. I'm just gonna make this for the entire profile, because it's the easiest to give set examples for (I can't give an example for every panel or thing that you want to position). The basic codes depend how many columns you're using, so here you go.

For all three:
#columns, #pictures_container, #texts_container{
width: 1024px;
margin-left: -512px;
left:50%;
position:absolute;
}

For two columns:
#columns, #pictures_container, #texts_container{
width: 800px;
margin-left: -400px;
left:50%;
position:absolute;
}

For just the middle column:
#columns, #pictures_container, #texts_container{
width: 510px;
margin-left: -255px;
left:50%;
position:absolute;
}

For just one of the outer columns:
#columns, #pictures_container, #texts_container{
width: 240px;
margin-left: -120px;
left:50%;
position:absolute;
}

If you want to position anything else in the middle, it requires a bit more from you than just copy and paste because it depends how wide you want it to be. You'll have to change some of these numbers if you want it to be a different width. The basic code:
selector{
width: 500px; /*how wide you want the element to be*/
margin-left: -250px; /*take the width of the element, divide it by two, and make it negative*/
left:50%;
position:absolute;
}


To position anything fixed to the bottom right:
selector{
position:fixed;
top:auto;
left:auto;
right:0;
bottom:0;
}


Pikameru
codes for coloring the details panel? or maybe your recents? just a panel on the details?

To color the text in the details panel:
#id_details{
color:your color here;
}
I don't know what you mean by "just a panel on the details".

To color the links (things you can click on) of the recent visitors panel:
#id_footprints a{
color:your color here;
}

In both cases, change your color here to a color name, hext code, or RGB/RGBA value.
kittymmeow
Thank you sooo much<3
kittymmeow

O wise and all knowing coder, please grant my the codes for doing this:
http://www.gaiaonline.com/profiles/reiji-one/27552351/
The panel swopping trick please. c:
kittymmeow's avatar

Fashionable Fatcat

Pikameru
kittymmeow

O wise and all knowing coder, please grant my the codes for doing this:
http://www.gaiaonline.com/profiles/reiji-one/27552351/
The panel swopping trick please. c:

Oh come on, I'm not that brilliant. I'm not nearly the best in the forum, even razz

But anyway

That just requires changing the width and height of a panel when you hover over it, and using transitions to make it smooth. I can't give you the exact code since I don't know which panel you want to do it for and how big you want it to start and end as, but I will put in substitute values so you can see what sort of thing you should do.

#id_about{
width:100px;
height:30px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}

#id_about:hover{
width:250px;
height:400px;
}

This would make it for your about section, and it would start out 100x30px and would take 1 second to transition, and would end up as 250x400px.

To make it for another panel, simply change #id_about in both declaration blocks to the selector for the panel you want.

To make it start or end as a different size, change the width and height values to different numbers. The first section is for how it starts, the second section is for how it ends.

You can make it take longer or shorter than 1 second by changing all of the 1s to another number, measured in seconds: 1s = 1 second, 2s = 2 seconds, 0.5s = half a second, and so on. Make sure to change all of them, and to keep them all the same. There are multiple properties because transitions aren't standard across all browsers yet, so they all use different vendor prefixes (-webkit- is Safari and Google Chrome, -moz- is Firefox, -o- is Opera, and the plain property with no prefix is the standard, which is there just in case any browsers add support for the standard without need for a prefix in the near future. Internet Explorer does not have any support for transitions until IE10, and that version uses the standard)
kittymmeow

Thanks, but in the end I didn't like the moving of panels. But I have something I am curious about. How can you connect all your panels into one?
Like so:
http://www.gaiaonline.com/profiles/terichi/6699974/
Thank you~
kittymmeow's avatar

Fashionable Fatcat

Pikameru
kittymmeow

Thanks, but in the end I didn't like the moving of panels. But I have something I am curious about. How can you connect all your panels into one?
Like so:
http://www.gaiaonline.com/profiles/terichi/6699974/
Thank you~

That's just removing the background of the panels and then adding a background and a border to the box that contains the panels instead:
.panel{
background:none;
}
#columns{
background: white;
border: 1px solid black;
}

You can remove the border if you don't want it by removing the whole border property, and you can change what is in the background of the big panel by changing the value for the background property (change white to another color name, hex code, or RGB/RGBA value for a color, or url(your image url here) for an image.)

If you are just using one or two columns on your profile, you will have to hide the remaining columns or else the box containing them will be too big, and the background will go too far and look awkward. The columns are numbered from left to right as #column_1, #column_2, and #column_3. 1 is the one on the left, 2 is the one in the middle, and 3 is the one on the right.
To hide a column, use this:
#column_#{
display:none;
}
Replace # with the number of the column. If you are only using one column, you can hide the remaining two by separating them with commas (for example, #column_2, #column_3 for the middle and right columns)
So, I decided to clear all the codes I have in storage--in terms of my test forum. Can I get these codes--I think I'll only need them.
1. about me scroll
2. panels, with opacity and floating added
3. The media code for videos
4. Wish list bubbles
5. Deleting panel backgrounds
6. Deleting headers in panels
7. Changing the colors in the gaian top header
8. The code for backgrounds from urls.
9. Codes for media size
More will be asked for. Thanks for anyone helping, and I've got a few of these!! c:
kittymmeow
So, I decided to clear all the codes I have in storage--in terms of my test forum. Can I get these codes--I think I'll only need them.
1. about me scroll
2. panels, with opacity and floating added
3. The media code for videos
4. Wish list bubbles
5. Deleting panel backgrounds
6. Deleting headers in panels
7. Changing the colors in the gaian top header
8. The code for backgrounds from urls.
9. Codes for media size
10. panel color changing
11. fading text in panels
More will be asked for. Thanks for anyone helping, and I've got a few of these!! c:

Quick Reply

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