Also, for the record, even though the spoiler tag has been around for a few months now, this is my first time using it. Love this too. n .n
Old Profile Code
/*Hi there. ;D */
/* BG for all "bubbles" */
.panel
{ border: 3px ridge #4E8975; background: #E8ADAA }
/* Main BG */
html, body {background: #C48189; repeat ;}
/* Color of small headers for each box */
.panel h2{background: #4E8975;}
/* Comments text color */
#id_comments dd {color: #4E8975; font-size: 11px;}
/* The font color of text in the boxes */
#id_journal, #id_comments dt {color: #617C58; font-size: 11px;}
/* Scroll bars */
#id_comments {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 600px;}
#id_comments dl {overflow-y: auto; padding-right: 500px; height: 500px; width: 190px;}
#id_wishlist
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 400px;}
#id_footprints
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 80px;}
/* fades */
#id_about{opacity:0.8;filter:alpha(opacity='80')}
#id_about:hover{opacity:1; filter:alpha(opacity='100')}
#id_details{opacity:0.8;filter:alpha(opacity='80')}
#id_details:hover{opacity:1; filter:alpha(opacity='100')}
#id_wishlist{opacity:0.8;filter:alpha(opacity='80')}
#id_wishlist:hover{opacity:1; filter:alpha(opacity='100')}
#id_journal{opacity:0.8;filter:alpha(opacity='80')}
#id_journal:hover{opacity:1; filter:alpha(opacity='100')}
#id_signature{opacity:0.8;filter:alpha(opacity='80')}
#id_signature:hover{opacity:1; filter:alpha(opacity='100')}
#id_friends{opacity:0.8;filter:alpha(opacity='80')}
#id_friends:hover{opacity:1; filter:alpha(opacity='100')}
#id_comments{opacity:0.8;filter:alpha(opacity='80')}
#id_comments:hover{opacity:1; filter:alpha(opacity='100')}
#id_footprints{opacity:0.8;filter:alpha(opacity='80')}
#id_footprints:hover{opacity:1; filter:alpha(opacity='100')}
#id_custom_5585{opacity:0.8;filter:alpha(opacity='80')}
#id_custom_5585:hover{opacity:1; filter:alpha(opacity='100')}
#id_custom_1127{opacity:0.8;filter:alpha(opacity='80')}
#id_custom_1127:hover{opacity:1; filter:alpha(opacity='100')}
#id_media_11445{opacity:0.8;filter:alpha(opacity='80')}
#id_media_11445:hover{opacity:1; filter:alpha(opacity='100')}
#id_wishlist .item {opacity:0.3;filter:alpha(opacity='80')}
#id_wishlist .item:hover{opacity:1; filter:alpha(opacity='100')}
/* BG for all "bubbles" */
.panel
{ border: 3px ridge #4E8975; background: #E8ADAA }
/* Main BG */
html, body {background: #C48189; repeat ;}
/* Color of small headers for each box */
.panel h2{background: #4E8975;}
/* Comments text color */
#id_comments dd {color: #4E8975; font-size: 11px;}
/* The font color of text in the boxes */
#id_journal, #id_comments dt {color: #617C58; font-size: 11px;}
/* Scroll bars */
#id_comments {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 600px;}
#id_comments dl {overflow-y: auto; padding-right: 500px; height: 500px; width: 190px;}
#id_wishlist
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 400px;}
#id_footprints
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 80px;}
/* fades */
#id_about{opacity:0.8;filter:alpha(opacity='80')}
#id_about:hover{opacity:1; filter:alpha(opacity='100')}
#id_details{opacity:0.8;filter:alpha(opacity='80')}
#id_details:hover{opacity:1; filter:alpha(opacity='100')}
#id_wishlist{opacity:0.8;filter:alpha(opacity='80')}
#id_wishlist:hover{opacity:1; filter:alpha(opacity='100')}
#id_journal{opacity:0.8;filter:alpha(opacity='80')}
#id_journal:hover{opacity:1; filter:alpha(opacity='100')}
#id_signature{opacity:0.8;filter:alpha(opacity='80')}
#id_signature:hover{opacity:1; filter:alpha(opacity='100')}
#id_friends{opacity:0.8;filter:alpha(opacity='80')}
#id_friends:hover{opacity:1; filter:alpha(opacity='100')}
#id_comments{opacity:0.8;filter:alpha(opacity='80')}
#id_comments:hover{opacity:1; filter:alpha(opacity='100')}
#id_footprints{opacity:0.8;filter:alpha(opacity='80')}
#id_footprints:hover{opacity:1; filter:alpha(opacity='100')}
#id_custom_5585{opacity:0.8;filter:alpha(opacity='80')}
#id_custom_5585:hover{opacity:1; filter:alpha(opacity='100')}
#id_custom_1127{opacity:0.8;filter:alpha(opacity='80')}
#id_custom_1127:hover{opacity:1; filter:alpha(opacity='100')}
#id_media_11445{opacity:0.8;filter:alpha(opacity='80')}
#id_media_11445:hover{opacity:1; filter:alpha(opacity='100')}
#id_wishlist .item {opacity:0.3;filter:alpha(opacity='80')}
#id_wishlist .item:hover{opacity:1; filter:alpha(opacity='100')}
The new profile code
/* Main bg image*/
html,body{background:url(http://i7.photobucket.com/albums/y278/WinkNod/Art/10__Comm___cma021_by_seisei.jpg)}
/* This allows panels to hover over bg*/
html,body {background-attachment: fixed;}
/* This stops the bg image from repeating */
html,body {background-repeat: no-repeat; }
/* Not sure here, but this rounds the corners */
/*Online/Offline*/
.panel{ border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -webkit-border-radius: 30px;}
/*Panel Headers*/
.panel h2{display:none}
/*Panel bg color*/
.panel { background: #FFCC33 }
/* Scroll bars and panel height */
/* Note to self, stop trying to hide the wishlist scroll bar. I've seen it done once, but can't reproduce it */
#id_comments {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 100px;}
#id_comments dl {overflow-y: auto; padding-right: 500px; height: 500px; width: 190px;}
#id_wishlist
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 100px;}
#id_footprints
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 80px;}
/* selector { color: value; }*/
#id_about { background: #CC0066;}
#id_journal { background: #CC0066;}
#id_footprints { background: #CC0066;}
html,body{background:url(http://i7.photobucket.com/albums/y278/WinkNod/Art/10__Comm___cma021_by_seisei.jpg)}
/* This allows panels to hover over bg*/
html,body {background-attachment: fixed;}
/* This stops the bg image from repeating */
html,body {background-repeat: no-repeat; }
/* Not sure here, but this rounds the corners */
/*Online/Offline*/
.panel{ border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -webkit-border-radius: 30px;}
/*Panel Headers*/
.panel h2{display:none}
/*Panel bg color*/
.panel { background: #FFCC33 }
/* Scroll bars and panel height */
/* Note to self, stop trying to hide the wishlist scroll bar. I've seen it done once, but can't reproduce it */
#id_comments {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 100px;}
#id_comments dl {overflow-y: auto; padding-right: 500px; height: 500px; width: 190px;}
#id_wishlist
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 100px;}
#id_footprints
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 80px;}
/* selector { color: value; }*/
#id_about { background: #CC0066;}
#id_journal { background: #CC0066;}
#id_footprints { background: #CC0066;}
I also plan to change my "about me" info. Here's the old one for the record. I've had it forever and have just tweaked the wording here and there. I hope to shorten it.
★ My username is sdrawkcab. Refer to me by any variation of my username that you'd like. I usually go by Cabbi.
★ sdrawkcab is the word "backwards" spelled backwards.
★ Your English lesson for the day: Backward or Backwards?
As an adverb, either word will do: "put the shirt on backward" or "put the shirt on backwards." However, as an adjective, only "backward" will do: "a backward glance." When in doubt, use "backward." Source
★ I joined Gaia in March of 2004 and have been hanging around ever since. Because of this, I tell lots of "back in the day" stories. I'm not some cranky oldbie character and I don't judge by join date. I'm just interested in the evolution of this website.
★ Mandatory sentence: "I love to customize my avatar, not dress up."
I've had that line in my "about me" info ever since "customizing" changed to dressing up... not that I really care anymore. XD; I mean, it's nowhere near as childish as the new "get nekkid" button. :B
That's okay, I still like Gaia's humor.
I also love to change my avatar whenever I get the spare time. I also love to see the avatar creations that other people come up with. I like most of the different types of avatar styles.
★ I'm horrible at keeping up with threads, PMs and profile comments. I have no excuse; I'm just bad at it. (And I used to be good at it. u .u;; ) Please don't be insulted if I take awhile to reply. ...and if it's taking a tad longer than awhile, feel free to nudge me.
★ I love this site, but real life always comes first. Thus, I don't have as much time for Gaia as I used to. I still log in rather frequently though.
★ It should be obvious by now, but I say very little about my personal life (in other words, the irl portion). You're not missing out.
I don't give my info; I don't ask for your info. Fair trade. I do, somehow, find a lot to talk about when concerning Gaia-related things. :}
★ sdrawkcab is the word "backwards" spelled backwards.
- sdrawkcab | backwards
★ Your English lesson for the day: Backward or Backwards?
As an adverb, either word will do: "put the shirt on backward" or "put the shirt on backwards." However, as an adjective, only "backward" will do: "a backward glance." When in doubt, use "backward." Source
★ I joined Gaia in March of 2004 and have been hanging around ever since. Because of this, I tell lots of "back in the day" stories. I'm not some cranky oldbie character and I don't judge by join date. I'm just interested in the evolution of this website.
★ Mandatory sentence: "I love to customize my avatar, not dress up."
I've had that line in my "about me" info ever since "customizing" changed to dressing up... not that I really care anymore. XD; I mean, it's nowhere near as childish as the new "get nekkid" button. :B
That's okay, I still like Gaia's humor.
I also love to change my avatar whenever I get the spare time. I also love to see the avatar creations that other people come up with. I like most of the different types of avatar styles.
★ I'm horrible at keeping up with threads, PMs and profile comments. I have no excuse; I'm just bad at it. (And I used to be good at it. u .u;; ) Please don't be insulted if I take awhile to reply. ...and if it's taking a tad longer than awhile, feel free to nudge me.
★ I love this site, but real life always comes first. Thus, I don't have as much time for Gaia as I used to. I still log in rather frequently though.
★ It should be obvious by now, but I say very little about my personal life (in other words, the irl portion). You're not missing out.
I don't give my info; I don't ask for your info. Fair trade. I do, somehow, find a lot to talk about when concerning Gaia-related things. :}
This guide is pretty thorough. :3
http://www.gaiaonline.com/forum/profile-discussion/guide-css-properties-style-sheet-solutions/t.81812403/
Needed this old guide to use in tandem because it was easier to understand. XD; (Has a nice quick list of selectors)
http://www.gaiaonline.com/forum/profile-discussion/guide-learn-how-to-code-v2-current-profiles/t.42151201_1/
Edit 4-24-17
I'm going to tinker with my profile. I've had this one up for a while now. The last part, about the invisible hovering, I just tacked on yesterday.
/* Main bg image*/
html,body{background:url(http://i.imgur.com/mNIYMlw.png?3) #FBDEC5}
/* This allows panels to hover over bg*/
html,body {background-attachment: fixed;}
/* This stops the bg image from repeating */
html,body {background-repeat: no-repeat; }
/* Not sure here, but this rounds the corners */
/*Online/Offline*/
.panel{ border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -webkit-border-radius: 30px;}
/*Panel Headers*/
.panel h2{display:none}
/*Panel bg color*/
.panel { background: #D1D8CE }
/* Scroll bars and panel height */
/* Note to self, stop trying to hide the wishlist scroll bar. I've seen it done once, but can't reproduce it */
#id_comments {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 100px;}
#id_comments dl {overflow-y: auto; padding-right: 500px; height: 500px; width: 190px;}
#id_footprints
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 80px;}
#id_wishlist
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 100px;}
/* selector { color: value; }*/
#id_about { background: #BD8C6E;}
#id_journal { background: #BD8C6E;}
#id_footprints { background: #BD8C6E;}
/* makes the invisible hovering Use #columns instead to make them all appear at once*/
.panel {-moz-border-radius:50px; border-radius:50px; opacity:0.1; -moz-transition:all .25s linear; transition:all .25s linear; -webkit-transition:all .25s linear;}
.panel:hover {opacity:1; -moz-transition:all .25s linear; transition:all .25s linear; -webkit-transition:all .25s linear;}
html,body{background:url(http://i.imgur.com/mNIYMlw.png?3) #FBDEC5}
/* This allows panels to hover over bg*/
html,body {background-attachment: fixed;}
/* This stops the bg image from repeating */
html,body {background-repeat: no-repeat; }
/* Not sure here, but this rounds the corners */
/*Online/Offline*/
.panel{ border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -webkit-border-radius: 30px;}
/*Panel Headers*/
.panel h2{display:none}
/*Panel bg color*/
.panel { background: #D1D8CE }
/* Scroll bars and panel height */
/* Note to self, stop trying to hide the wishlist scroll bar. I've seen it done once, but can't reproduce it */
#id_comments {overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 100px;}
#id_comments dl {overflow-y: auto; padding-right: 500px; height: 500px; width: 190px;}
#id_footprints
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 80px;}
#id_wishlist
{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 100px;}
/* selector { color: value; }*/
#id_about { background: #BD8C6E;}
#id_journal { background: #BD8C6E;}
#id_footprints { background: #BD8C6E;}
/* makes the invisible hovering Use #columns instead to make them all appear at once*/
.panel {-moz-border-radius:50px; border-radius:50px; opacity:0.1; -moz-transition:all .25s linear; transition:all .25s linear; -webkit-transition:all .25s linear;}
.panel:hover {opacity:1; -moz-transition:all .25s linear; transition:all .25s linear; -webkit-transition:all .25s linear;}
I also used this image in the about: [imgright]http://i.imgur.com/vTrGVC6.png?1[imgright]
Text was white, with the stars for each header this pink color: #FFD0C9
Community Member