Welcome to Gaia! ::

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.
<< < 1 2 ... 10 11 12 13 14 15 16 17 ... 30 31 32 > >>
gkShift's avatar

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

#section{
property: value;}
Yotsudai's avatar

Salty Smoker

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...
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
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 }"
Yotsudai's avatar

Salty Smoker

Knight Yoshi
Ahh, there we go. sweatdrop
Many thanks.
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
Yotsudai
Knight Yoshi
Ahh, there we go. sweatdrop
Many thanks.


You're welcome. That's what this thread is for 3nodding
Toriki-chi's avatar

Gatekeeper

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. ♪
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
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.
Toriki-chi's avatar

Gatekeeper

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. ♪
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
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.
Toriki-chi's avatar

Gatekeeper

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
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
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.
Toriki-chi's avatar

Gatekeeper

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? ♪
Dedicated Visionary's avatar

Codebreaking Genius

9,800 Points
  • Forum Sophomore 300
  • Conventioneer 300
  • Flatterer 200
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.
Toriki-chi's avatar

Gatekeeper

Knight Yoshi

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

7,900 Points
  • Friendly 100
  • Hygienic 200
  • Treasure Hunter 100
Thank you so much for making this!

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