Welcome to Gaia! ::

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion
<3 </3

Is relocating the thread a hassle?

Yes. :< 0.3 30.0% [ 3 ]
No. :> 0.4 40.0% [ 4 ]
Apology for relocating not accepted. D: 0.3 30.0% [ 3 ]
Total Votes:[ 10 ]
This poll closed on December 18, 2012.
No longer accepting new votes.
Reply
<< < 1 2 ... 10 11 12 13 14 15 16 17 ... 30 31 32 > >>

6,150 Points
  • Statustician 100
  • Treasure Hunter 100
  • Gaian 50
Offline
Make sure you are using the C.S.S in the correct format.

#section{
property: value;}

Salty Smoker

Offline
So I'm trying to get this slide effect when you hover over the links in my profile.
But I don't want my wishlist to slide.
This is what I've got:
#id_about:links {
-webkit-transition: padding-left 150ms ease-out;
-moz-transition: padding-left 150ms ease-out;
}

#id_about:links{
padding-left: 10px;
}

I've only specified the about section, but ideally, I'd like to include the contact section and exclude the wishlist. This code ends up sliding the whole about section...

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Offline
Yotsudai
So I'm trying to get this slide effect when you hover over the links in my profile.
But I don't want my wishlist to slide.
This is what I've got:
#id_about:links {
-webkit-transition: padding-left 150ms ease-out;
-moz-transition: padding-left 150ms ease-out;
}

#id_about:links{
padding-left: 10px;
}

I've only specified the about section, but ideally, I'd like to include the contact section and exclude the wishlist. This code ends up sliding the whole about section...


Several things wrong with this.
One, the pseudo ":link" is without an "S".
Two, the pseudo ":link" is for any links not previously viewed by the user.
Three, the pseudo ":link" is used with the anchor node, "a".
#id_about a:link { declaration block;}
But again, this will only work on any un-visited links.
Use something more like, "#id_about a:hover { declaration block }"

Salty Smoker

Offline
Knight Yoshi
Ahh, there we go. sweatdrop
Many thanks.

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Offline
Yotsudai
Knight Yoshi
Ahh, there we go. sweatdrop
Many thanks.


You're welcome. That's what this thread is for 3nodding

Athella's Fangirl

Lunatic

Offline
Question

I once saw a profile where it appears to be a Flash profile (but it's not) while also have a Youtube vid on it, and the profile was set to Classic profile. When I looked at the Page Source to see how is it possible, I notice that instead of any CSS codes, there is a line that said "Profile Theft Detected". It seems the codes were somehow hidden, do you know how is that possible? I'll try to dig up the user's thread again if you need an example. ♪

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Offline
Toriki-chi
Question

I once saw a profile where it appears to be a Flash profile (but it's not) while also have a Youtube vid on it, and the profile was set to Classic profile. When I looked at the Page Source to see how is it possible, I notice that instead of any CSS codes, there is a line that said "Profile Theft Detected". It seems the codes were somehow hidden, do you know how is that possible? I'll try to dig up the user's thread again if you need an example. ♪


Link please.

Athella's Fangirl

Lunatic

Offline
Knight Yoshi
Link please.

Never mind. False alarm. User Image Was so early in the morning my brain didn't think right. The user just put all the codes in one line. ♪

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Offline
Toriki-chi
Knight Yoshi
Link please.

Here you go. The sun on the profile only start to move when you hover the cursor to the box. ♪


That's just a comment by the user, probably to intimidate users from taking the CSS, making them think that its "detected" them trying to steal it. Which is stupid.

However, the background moving is done with transitions, lots and lots of transitions to animate all of that.

Athella's Fangirl

Lunatic

Offline
Knight Yoshi

That's just a comment by the user, probably to intimidate users from taking the CSS, making them think that its "detected" them trying to steal it. Which is stupid.

However, the background moving is done with transitions, lots and lots of transitions to animate all of that.

Felt so stupid after checking it again. xd I only notice there's a horizontal scroll bar in the page source after I linked you. redface ♪

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Offline
Toriki-chi
Knight Yoshi

That's just a comment by the user, probably to intimidate users from taking the CSS, making them think that its "detected" them trying to steal it. Which is stupid.

However, the background moving is done with transitions, lots and lots of transitions to animate all of that.
Quote:

Felt so stupid after checking it again. xd I only notice there's a horizontal scroll bar in the page source after I linked you. redface ♪


Lol. If you wanna see the CSS in a readable format, I decompressed it for you. Personally, I would have used less CSS, this person used different transition properties instead of a single transition property. Which is partially why its so long, used multiple transitions for multiple browsers. Could have used one transition property for each browser. Lol

Profile Thief Detected ---*/.caption:before, .caption:after, .caption2:before, .caption2:after, #journal h3, #commonFriends, #signature, #profile h2, #extendedProfileBody #header h1, #corp, #footer, #friends, interest, #journal, #id_details p, .panel h2, #profile .items, #details, #profile #ignoreButton, #bar #onlineButton, #bar #offlineButton, #profile .caption, #avatar_dropbox, #profile .avatar, #animated_item, #wishlist {
display: none;
}

#gaia_header * {
background-color:#001233!important;
}

#gaia_header {
border-bottom:1px ridge #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
}

#gaia_header li {
font-size:0px;
color:transparent!important;
}

#header_left img {
padding:0px 47px 23px 0px;
background:url('http://i1181.photobucket.com/albums/x423/profile_shop/demo/gaiaheader.png') top left no-repeat;
height: 0px;
width: 0px;
}

#gaia_header {
position: fixed;
}

#header_left a {
color:#fff!important;
font-size:10px;
font-family: Trebuchet MS, Helvetica, sans-serif;
}

#header_right a {
color:#fff!important;
font-size:10px;
font-family: Trebuchet MS, Helvetica, sans-serif;
}

#header_left a:hover {
color:#fff!important;
font-size:12px;
font-weight:bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
-webkit-transition-property: all;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
-moz-transition-property: all;
-moz-transition-duration: 200ms;
-moz-transition-timing-function: ease;
-o-transition-property: all;
-o-transition-duration: 200ms;
-o-transition-timing-function: ease;
}

#header_right a:hover {
color:#fff!important;
font-size:12px;
font-weight:bold;
font-family:Trebuchet MS, Helvetica, sans-serif;
-webkit-transition-property: all;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
-moz-transition-property: all;
-moz-transition-duration: 200ms;
-moz-transition-timing-function: ease;
-o-transition-property: all;
-o-transition-duration: 200ms;
-o-transition-timing-function: ease;
}

#site {
margin-right:auto;
margin-left:auto;
margin-top:auto;
;
}

body {
background: #cdf7ff;
position: relative;
top:65px;
left: 0px;
;
}

#content {
background:transparent;
border:0px;
;
}

#profile {
background: transparent url('') no-repeat center center;
background-position:26% 63%;
position:absolute;
border:0px;
height: 800px;
width: 479px;
left: -270px;
top: -80px;
z-index:2;
}

#details h3, #details hr {
display: none;
}

#details h2 {
display:none;
}

#details {
display:none;
}

#profile .items {
display:none;
}

#profile ul.items {
display:none;
}

a:active {
color: #2d7190;
text-decoration: none;
}

a:hover {
color: #4c4c4c;
}

a:link {
color: #2d7190;
text-decoration: none;
}

#about h2 {
display:none;
}

#about .links {
display:none;
}

#about {
background:#320700;
position:absolute;
top:-50px;
left:-229px;
height:777px;
width:1218px;
overflow: auto;
overflow-x: hidden;
overflow-y: hidden;
text-align: justify;
font-size: 11px;
color: #ffffff;
text-decoration: none;
padding: 1px 1px;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
z-index: 1;
}

#about ul {
background: transparent;
padding: 20px 500px 20px 20px;
position:absolute;
top:556px;
left: 514px;
overflow-x: hidden;
overflow-y: auto;
height: 139px;
width: 277px;
text-align:justify;
color:#777;
font-family: Trebuchet MS, Helvetica, sans-serif;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 150;
}

#about ol:nth-of-type(1) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/grasspals3.png) no-repeat;
position: absolute;
height:563px;
width:1073px;
top:228px;
left:152px;
z-index: 50;
}

body:hover #about {
background-color: #000;
-webkit-transition-property: all;
-webkit-transition-duration: 20s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 20s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 20s;
-o-transition-timing-function: linear;
z-index: 1;
-moz-transition-delay: 5s;
-webkit-transition-delay: 5s;
-o-transition-delay: 5s;
}

#about ol:nth-of-type(2) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/clouds.png) repeat-x;
position: absolute;
height:703px;
width:1884px;
top:20px;
left:29px;
z-index: 2;
opacity: 0.5;
}

body:hover #about ol:nth-of-type(2) {
opacity: 0;
left: -500px;
-webkit-transition-property: all;
-webkit-transition-duration: 60s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 60s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 60s;
-o-transition-timing-function: linear;
}

#about ol:nth-of-type(3) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/stars.png) no-repeat;
position: absolute;
height:617px;
width:1243px;
top:37px;
left:-39px;
opacity: 0;
;
}

body:hover #about ol:nth-of-type(3) {
opacity: 1;
-webkit-transition-property: all;
-webkit-transition-duration: 10s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 10s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 10s;
-o-transition-timing-function: linear;
-moz-transition-delay: 15s;
-webkit-transition-delay: 15s;
-o-transition-delay: 15s;
}

#about ol:nth-of-type(4) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/sun.png) no-repeat;
position: absolute;
height:581px;
width:581px;
top:-44px;
left:-44px;
z-index: -1;
}

body:hover #about ol:nth-of-type(4) {
top:800px;
-webkit-transition-property: all;
-webkit-transition-duration: 20s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 20s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 20s;
-o-transition-timing-function: linear;
}

#about ol:nth-of-type(5) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/moon.png) no-repeat;
position: absolute;
height:198px;
width:151px;
top:500px;
left:140px;
z-index: -1;
opacity: 0;
;
}

body:hover #about ol:nth-of-type(5) {
opacity: 1;
top:146px;
-webkit-transition-property: all;
-webkit-transition-duration: 10s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 10s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 10s;
-o-transition-timing-function: linear;
-moz-transition-delay: 15s;
-webkit-transition-delay: 15s;
-o-transition-delay: 15s;
}

#about ol:nth-of-type(6) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/shootingstar.png) no-repeat;
position: absolute;
height:74px;
width:86px;
top:-100px;
left:400px;
z-index: -1;
;
}

body:hover #about ol:nth-of-type(6) {
top:500px;
left:1300px;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transition-timing-function: linear;
-moz-transition-delay: 30s;
-webkit-transition-delay: 30s;
-o-transition-delay: 30s;
}

#about ol:nth-of-type(7) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/shootingstar.png) no-repeat;
position: absolute;
height:74px;
width:86px;
top:-100px;
left:200px;
z-index: -1;
;
}

body:hover #about ol:nth-of-type(7) {
top:500px;
left:1100px;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transition-timing-function: linear;
-moz-transition-delay: 40s;
-webkit-transition-delay: 40s;
-o-transition-delay: 40s;
}

#about ol:nth-of-type(8) {
background:#cdf7ff;
position: absolute;
height: 100%;
width: 100%;
top:0px;
left:0px;
z-index: -2;
opacity: 1;
;
}

body:hover #about ol:nth-of-type(8) {
opacity:0;
-webkit-transition-property: all;
-webkit-transition-duration: 5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: all;
-moz-transition-duration: 5s;
-moz-transition-timing-function: linear;
-o-transition-property: all;
-o-transition-duration: 5s;
-o-transition-timing-function: linear;
z-index: 1;
}

#about ol:nth-of-type(9) {
background:transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/unheard.png) no-repeat;
position: absolute;
height:35px;
width:173px;
top:514px;
left:654px;
z-index: 100;
}

#comments .links, #comments a, #comments img, #comments p, #comments dl, #alerts_banner, .caption:before, .caption:after, #comments #alerts_banner, #comments h2 {
display:none;
}

.caption .message, .caption2 .message {
background: transparent;
;
}

#comments .caption .message, #comments .caption2 .message {
color:#777;
font-size:10px;
}

#comments {
background: transparent;
left:652px;
top:499px;
height: 154px;
width: 257px;
text-align:justify;
position:absolute;
font-face:Trebuchet MS, Helvetica, sans-serif;
font-size:9px;
overflow: hidden;
padding: 20px 20px;
z-index: 2;
}

#comments .caption2 .date, #comments .caption .date {
display:none;
}

#comments .caption p, #comments .caption2 p {
display:block;
text-align:center;
line-height:15px;
background: #29180c;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#comments a {
display: inline;
color: #be895d;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size:10px;
}

#comments .links {
display: inline;
}

#comments p {
display:block;
.display:none;
color: transparent;
}

#comments dl p {
.display:block;
}

#comments dl {
display:none;
}

#comments .alert_container a {
display: inline;
color: #777;
position:relative;
left:47px;
top: 5px;
font-family: "
Trebuchet MS"
, Helvetica, sans-serif;
line-height:13px;
background: #342a25;
padding:2px 5px;
text-transform: capitalize;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #251e1b;
opacity: 0.7;
}

#comments .alert_container a:hover {
background: #41342e;
}

#comments dl {
display: block;
position:relative;
top:0px;
left:-13px;
height:87px;
width:303px;
overflow:hidden;
overflow-y:auto;
padding-right:1000px;
padding-bottom:50px;
}

#comments dl dd {
font-family:Trebuchet MS, Helvetica, sans-serif;
font-size:10px;
color: #777;
margin: 0 0;
}

#comments .caption {
background:#342a25;
border:1px double #251e1b;
padding:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.7;
}

#comments .caption2 {
background:#342a25;
border:1px double #251e1b;
padding:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.7;
}

#comments .caption:hover {
background:#41342e;
}

#comments .caption2:hover {
background:#41342e;
}

#comments .caption a {
font-family:Trebuchet MS, Helvetica, sans-serif;
text-decoration:none;
font-size:10px;
color: #777;
}

#comments .caption2 a {
font-family:Trebuchet MS, Helvetica, sans-serif;
text-decoration:none;
font-size:10px;
color: #777;
}

#comments .message {
font-family:Trebuchet MS, Helvetica, sans-serif;
font-size:9px;
color: #777;
background:transparent;
}

#multimedia h2 {
display:none;
}

#multimedia {
background: transparent;
position:absolute;
top:680px;
left: -235px;
height: 41px;
width: 41px;
z-index:1;
;
}

#multimedia object, #multimedia embed {
position:relative;
left:3px;
top:7px;
width: 30px;
height: 25px;
;
}

#bar {
background: transparent;
z-index:5;
}

#bar #addButton {
background: transparent;
text-indent: -5000px;
position: absolute;
top: 622px;
left: 855px;
width:50px;
height:16px;
z-index:100;
}

#bar #addButton a {
background: transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/demo/addbtn.png) no-repeat center;
text-indent: -5000px;
width:50px;
height:1px;
opacity: 0.3;
;
}

#bar #addButton:hover a {
background-position:50% 50%;
opacity: 1;
}

#bar #msgButton {
background: transparent;
text-indent: -5000px;
position: absolute;
top: 662px;
left: 855px;
width:50px;
height:16px;
z-index:100;
}

#bar #msgButton a {
background: transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/daynight/msgbtnw.png) no-repeat center;
text-indent: -5000px;
width:50px;
height:1px;
opacity: 0.3;
;
}

#bar #msgButton:hover a {
background-position:50% 50%;
opacity: 1;
}

#bar #tradeButton {
background: transparent;
text-indent: -5000px;
position: absolute;
top: 702px;
left: 855px;
width:50px;
height:16px;
z-index:100;
}

#bar #tradeButton a {
background: transparent url(http://i1181.photobucket.com/albums/x423/profile_shop/demo/trdbtn.png) no-repeat center;
text-indent: -5000px;
width:50px;
height:1px;
opacity: 0.3;
;
}

#bar #tradeButton:hover a {
background-position:50% 50%;
opacity: 1;
}
Shamelessly formatted by GaiArch.User Image - Blocked by "Display Image" Settings. Click to show.

Athella's Fangirl

Lunatic

Offline
Knight Yoshi
Lol. If you wanna see the CSS in a readable format, I decompressed it for you. Personally, I would have used less CSS, this person used different transition properties instead of a single transition property. Which is partially why its so long, used multiple transitions for multiple browsers. Could have used one transition property for each browser. Lol

Good grief, that's 3 7 pages. gonk When you said multiple transitions for multiple browsers, what do you mean? I thought each browser only has one property like the -moz and webkit and stuffs? ♪

11,475 Points
  • Partygoer 500
  • Conventioneer 300
  • Forum Sophomore 300
Offline
Toriki-chi
Knight Yoshi
Lol. If you wanna see the CSS in a readable format, I decompressed it for you. Personally, I would have used less CSS, this person used different transition properties instead of a single transition property. Which is partially why its so long, used multiple transitions for multiple browsers. Could have used one transition property for each browser. Lol
Quote:

Good grief, that's 3 7 pages. gonk When you said multiple transitions for multiple browsers, what do you mean? I thought each browser only has one property like the -moz and webkit and stuffs? ♪


-webkit-transition-property: all;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
-moz-transition-property: all;
-moz-transition-duration: 200ms;
-moz-transition-timing-function: ease;
-o-transition-property: all;
-o-transition-duration: 200ms;
-o-transition-timing-function: ease;


Also you can see the front page, for transition properties
See how they set the property, duration, and timing-function separately? Those can be collapsed into a single transition property, so instead of having 9 lines, only have 3, one for each browser.
Shamelessly formatted by GaiArch.User Image - Blocked by "Display Image" Settings. Click to show.

Athella's Fangirl

Lunatic

Offline
Knight Yoshi

Ooh, so that's what you mean. Gotcha. Thank you very much. User Image ♪

7,900 Points
  • Friendly 100
  • Hygienic 200
  • Treasure Hunter 100
Offline
Thank you so much for making this!
Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion

Quick Reply

Submit
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaian's
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More