[Guides] My CSS Bookshelf

[Invented Beautiful]

Lady Saxophone

Invented Beautiful

Lady Saxophone

Hello there!
I'm incredibly curious now because I took a profile from gaiatools.com and it said made by Saxophone and then it might be you surprised and well as you can see I have one of the profiles that are shared there, though I want to replace the "journal" (since I don't use it) with the "recent visitors" panel, so I tried and the #id_footprints didn't work, I was able to hide the journal but now the profile looks odd, any suggestions? D:

Yes, "Saxophone" is my Gaia Tools username
Unfortunately, the layout you are currently using is for a Classic (v1) layout.
Classic profiles do not have a visitors panel -- this panel is only available for Current (v2) layouts.

In order to have a Visitors panel, you would either need to re-write the code so that it works on a Current (v2) profile
or use a different Gaia Tools theme which is written for the Current template.
(when searching for themes on Gaia Tools, you can sort by template by clicking the "Current" or "Classic" links on the left side)

/* ♫ Formatted by Gaia Upgrade */

Omg that's so cool surprised You did a great job with that profile theme! And I see, I really like the layout and I don't know a thing about CSS coding so I might have to put something different in there so it doesn't have to be journal, thank you for your input smile

Edit: Do you happen to know the links to "add friend, trade"?

[Lady Saxophone]

Invented Beautiful

Lady Saxophone

Invented Beautiful

Lady Saxophone

Hello there!
I'm incredibly curious now because I took a profile from gaiatools.com and it said made by Saxophone and then it might be you surprised and well as you can see I have one of the profiles that are shared there, though I want to replace the "journal" (since I don't use it) with the "recent visitors" panel, so I tried and the #id_footprints didn't work, I was able to hide the journal but now the profile looks odd, any suggestions? D:

Yes, "Saxophone" is my Gaia Tools username
Unfortunately, the layout you are currently using is for a Classic (v1) layout.
Classic profiles do not have a visitors panel -- this panel is only available for Current (v2) layouts.

In order to have a Visitors panel, you would either need to re-write the code so that it works on a Current (v2) profile
or use a different Gaia Tools theme which is written for the Current template.
(when searching for themes on Gaia Tools, you can sort by template by clicking the "Current" or "Classic" links on the left side)

/* ♫ Formatted by Gaia Upgrade */

Omg that's so cool surprised You did a great job with that profile theme! And I see, I really like the layout and I don't know a thing about CSS coding so I might have to put something different in there so it doesn't have to be journal, thank you for your input smile

Edit: Do you happen to know the links to "add friend, trade"?

Thanks 3nodding
Add: http://www.gaiaonline.com/friends/add/16318883
Trade:

]http://www.gaiaonline.com/gaia/bank.php?mode=trade&uid=16318883

/* ♫ Formatted by Gaia Upgrade */

[Invented Beautiful]

Lady Saxophone

Invented Beautiful

Lady Saxophone

Invented Beautiful

Lady Saxophone

Hello there!
I'm incredibly curious now because I took a profile from gaiatools.com and it said made by Saxophone and then it might be you surprised and well as you can see I have one of the profiles that are shared there, though I want to replace the "journal" (since I don't use it) with the "recent visitors" panel, so I tried and the #id_footprints didn't work, I was able to hide the journal but now the profile looks odd, any suggestions? D:

Yes, "Saxophone" is my Gaia Tools username
Unfortunately, the layout you are currently using is for a Classic (v1) layout.
Classic profiles do not have a visitors panel -- this panel is only available for Current (v2) layouts.

In order to have a Visitors panel, you would either need to re-write the code so that it works on a Current (v2) profile
or use a different Gaia Tools theme which is written for the Current template.
(when searching for themes on Gaia Tools, you can sort by template by clicking the "Current" or "Classic" links on the left side)

/* ♫ Formatted by Gaia Upgrade */

Omg that's so cool surprised You did a great job with that profile theme! And I see, I really like the layout and I don't know a thing about CSS coding so I might have to put something different in there so it doesn't have to be journal, thank you for your input smile

Edit: Do you happen to know the links to "add friend, trade"?

Thanks 3nodding
Add: http://www.gaiaonline.com/friends/add/16318883
Trade:

]http://www.gaiaonline.com/gaia/bank.php?mode=trade&uid=16318883

/* ♫ Formatted by Gaia Upgrade */

Okay, I've put my friends instead of the journal and I've added the links so they can reach out to me, many thanks! smile

[animoni]

checking this out, but for now bookmarking

[Type 9S]

Just found this.
I got the part about making the avatar heads rounded.
But does the same code to make your detail avi bounce apply to those as well or is that completely different?

[Lady Saxophone]

Type 9S

Just found this.
I got the part about making the avatar heads rounded.
But does the same code to make your detail avi bounce apply to those as well or is that completely different?

As mentioned in the note accompanying that code, it only works on the avatar inside of your Details panel

If you want it to work on an avatar decoration, you would need to use the ID number for that avatar decoration

/* ♫ Formatted by Gaia Upgrade */

[scarlet-holmes]

From your experience, what is the best way to test how your code looks?

[Lady Saxophone]

scarlet-holmes

From your experience, what is the best way to test how your code looks?

Personally, I use Firefox as a browser, and that has a built-in Style Editor which allows you to make live changes to a page's CSS sheets.
... which is basically like Gaia's editor, but you don't need to hit "Save" to see updates.
There's also a Responsive Design Mode button on there which allows you to manipulate your view port size, thus allowing to test things and see how your browser will look on various screen sizes.

I think most other browsers have a Responsive Mode like that, but Firefox is the only one with a live Style Sheet editor built in. If changing browsers isn't an option, Gaia Tools has a Theme Builder which acts like that -- it's just that you would be editing things on their template (which for current is a little messy).

In the end though, wherever you build/test things in, always make sure to do a final test on an actual Gaia profile.
If you don't want to mess up your main account, just make a mule and test random things on there c:

/* ♫ Formatted by Gaia Upgrade */

[Type 9S]

Lady Saxophone

As mentioned in the note accompanying that code, it only works on the avatar inside of your Details panel

If you want it to work on an avatar decoration, you would need to use the ID number for that avatar decoration

/* ♫ Formatted by Gaia Upgrade */

I see. Thank you.
Another question if I may. Is there a way to make the about you section, comments, etc. Slanted then have them straightened out when you hover over them?

[Lady Saxophone]

Type 9S

I see. Thank you.
Another question if I may. Is there a way to make the about you section, comments, etc. Slanted then have them straightened out when you hover over them?

That would be the "skew" transformation.
Ex: .panel{transform: skew(30deg);}
All you need to do is choose what angle you want, which then determines the amount of skewing

/* ♫ Formatted by Gaia Upgrade */

[CBC Diedrich]

Is there any way to make the edit button for panels not make the panel transition? Because I can't even edit the panels and need to constantly do so. However trying to click the edit button for the panel makes the panel transition, so I cannot change the content.

[Lady Saxophone]

Where Wild Things Are

Is there any way to make the edit button for panels not make the panel transition? Because I can't even edit the panels and need to constantly do so. However trying to click the edit button for the panel makes the panel transition, so I cannot change the content.

The "edit x" buttons are children of .panel, so if you try to hover/click the buttons, it will register as hovering over the panel itself and therefore set off any :hover properties you have applied to the panel.

My suggestion would be to either disable your coding when you need to edit your panels (which can be doing by simply putting /* at the beginning of your code) or consider adjusting your panel sizes/etc. in order for you to easily access the edit buttons when hovering over the panels.

/* ♫ Formatted by Gaia Upgrade */

[scarlet-holmes]

While I was editing the header, the links on the left side got disabled. However, the ones on the right side changes colors and cursors when I hover over them like I want them to. Below is all I've used for the header. I don't know which part of my code would affect the links or how to solve this. Any help would be appreciated sweatdrop

#gaia_header ul, #gaia_header {
width: 100% !important;
position:fixed !important;
background-color: transparent !important;
}

#gaia_header ul{
font-family: Georgia !important;
font-size:12pt !important;
}
#gaia_header a{
color: #f3a9ba !important;
}
#gaia_header a:hover{
color: #bfdaf2 !important;
}

[Lady Saxophone]

scarlet-holmes

While I was editing the header, the links on the left side got disabled. However, the ones on the right side changes colors and cursors when I hover over them like I want them to. Below is all I've used for the header. I don't know which part of my code would affect the links or how to solve this. Any help would be appreciated sweatdrop

#gaia_header ul, #gaia_header {
width: 100% !important;
position:fixed !important;
background-color: transparent !important;
}

#gaia_header ul{
font-family: Georgia !important;
font-size:12pt !important;
}
#gaia_header a{
color: #f3a9ba !important;
}
#gaia_header a:hover{
color: #bfdaf2 !important;
}

It's due to the "width: 100% !important" line you have, which is causing #header_right to stretch over #header_left and therefore make the links inaccessible.
I'd suggest changing things to:

#gaia_header {
width: 100% !important;
position:fixed !important;
background-color: transparent !important;
}

#gaia_header ul{
background-color: transparent !important;
font-family: Georgia !important;
font-size:12pt !important;
}
#gaia_header a{
color: #f3a9ba !important;
}
#gaia_header a:hover{
color: #bfdaf2 !important;
}

/* ♫ Formatted by Gaia Upgrade */

[Mirastella]

Lady Saxophone

Hello. I'm new to CSS coding and I seem to have a problem in moving the columns while centering the page. It seems that I no longer move anything to Columns 2 and 3. All of the windows only can be placed on column 1.


#columns{width: 1500px; margin-left: auto; margin-right: auto; float: none; position: relative; top: 50px;}

#column_1{width: 260;display: visable;}
#column_2{width: 500; display: visable;}
#column_3{width: 260; display: visable;}