Style Sheet Plus Solutions - Thread Relocated

Is relocating the thread a hassle?

Yes. :<	30.0%	[ 3 ]
No. :>	40.0%	[ 4 ]
Apology for relocating not accepted. D:	30.0%	[ 3 ]
Total Votes:			[ 10 ]

This poll closed on December 18, 2012.
No longer accepting new votes.

[Recite]

Knight Yoshi

Recite

Knight Yoshi

Recite

Knight Yoshi

Recite

Yes.

A while back when I first started messing with CCS3 properties, among Rotate, Skew, and other things I noticed Matrix combines multiple properties into a single one, which I thought would be pretty useful. I just never was able to understand it very well.

Wow, now I remember why I never added it. It is too complex for people.
I just did a lot of digging into that property. Unless you're good at math I'd advise not doing it.
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/ <-- math.
Stick with the three separate properties for manipulating it. xd

BUT I STRIVE FOR PROFESSIONALISM.

Lolol. I almost had it down actually. All I really remember is the numbers that go in the parenthesis of the property are for a certain action, but I couldn't get it down. I managed to work it into making a panel do a spin, but that was it. rofl

I'll just stick with those three then.

Haha, professionalism has nothing to do with it. You can be professional without using a single property for it.
I don't know anybody that actually uses the matrices. Remember this, why put yourself through more effort to achieve the same task when you can accomplish the same thing with something more comfortable to use.
smile

Exactly.

Haha, wish that could be said for re-organizing this thread... xd
Go check out the backgrounds post, I updated that one according to the W3C format and how it has it defined. biggrin
Only took me about 30-45mins to do. xd

Looks pretty good so far. There's only one problem I see and that's under the CCS3 section. Instead of "Skew", you have "Scew". razz

CSS3 can be so fun. This one time, out of boredom, I used the rotate property for .panel to make it spin multiple times when hovered. It's a bit pointless but fun. What I didn't think about, was applying that same property to the body selector. I noticed someone do that once, and my entire page span. It was trippy because the guy had the the rotate degree set high and the time set low (between 2s-5s). rofl

[IMANOOT]

Recite

Knight Yoshi

Recite

Knight Yoshi

Recite

BUT I STRIVE FOR PROFESSIONALISM.

Lolol. I almost had it down actually. All I really remember is the numbers that go in the parenthesis of the property are for a certain action, but I couldn't get it down. I managed to work it into making a panel do a spin, but that was it. rofl

I'll just stick with those three then.

Haha, professionalism has nothing to do with it. You can be professional without using a single property for it.
I don't know anybody that actually uses the matrices. Remember this, why put yourself through more effort to achieve the same task when you can accomplish the same thing with something more comfortable to use.
smile

Exactly.

Haha, wish that could be said for re-organizing this thread... xd
Go check out the backgrounds post, I updated that one according to the W3C format and how it has it defined. biggrin
Only took me about 30-45mins to do. xd

Looks pretty good so far. There's only one problem I see and that's under the CCS3 section. Instead of "Skew", you have "Scew". razz

CSS3 can be so fun. This one time, out of boredom, I used the rotate property for .panel to make it spin multiple times when hovered. It's a bit pointless but fun. What I didn't think about, was applying that same property to the body selector. I noticed someone do that once, and my entire page span. It was trippy because the guy had the the rotate degree set high and the time set low (between 2s-5s). rofl

How the hell did I spell skew wrong!?! And why is it just now being brought to my attention!?! gonk So much fail :<

[Recite]

Knight Yoshi

Recite

Knight Yoshi

Recite

Knight Yoshi

Recite

BUT I STRIVE FOR PROFESSIONALISM.

Lolol. I almost had it down actually. All I really remember is the numbers that go in the parenthesis of the property are for a certain action, but I couldn't get it down. I managed to work it into making a panel do a spin, but that was it. rofl

I'll just stick with those three then.

Haha, professionalism has nothing to do with it. You can be professional without using a single property for it.
I don't know anybody that actually uses the matrices. Remember this, why put yourself through more effort to achieve the same task when you can accomplish the same thing with something more comfortable to use.
smile

Exactly.

Haha, wish that could be said for re-organizing this thread... xd
Go check out the backgrounds post, I updated that one according to the W3C format and how it has it defined. biggrin
Only took me about 30-45mins to do. xd

Looks pretty good so far. There's only one problem I see and that's under the CCS3 section. Instead of "Skew", you have "Scew". razz

CSS3 can be so fun. This one time, out of boredom, I used the rotate property for .panel to make it spin multiple times when hovered. It's a bit pointless but fun. What I didn't think about, was applying that same property to the body selector. I noticed someone do that once, and my entire page span. It was trippy because the guy had the the rotate degree set high and the time set low (between 2s-5s). rofl

How the hell did I spell skew wrong!?! And why is it just now being brought to my attention!?! gonk So much fail :<

rofl I'm assuming you might have been tired or rushing at that point.

Also, I spent a few hours working on my profile earlier, incorporating a lot of CCS3 transitions. Can I ask what you think of it so far?

[IMANOOT]

Recite

rofl I'm assuming you might have been tired or rushing at that point.

Also, I spent a few hours working on my profile earlier, incorporating a lot of CCS3 transitions. Can I ask what you think of it so far?

There's no indication that the recent visitors is there. When you hover the panels the background goes completely black and then off hover the transition slides back from the bottom right, doesn't feel like a smooth transition. You should bump the .forum_userstatus element up a little bit, when hovering links the link destination in the bottom left covers the element. Oh and I hate the color purple. xd

[IMANOOT]

Recite

Lets pick apart your CSS shall we? smile

Red = error or can be removed with no side-affect
Orange = warning
Blue = can be condensed into one or two properties.

Quote:

/*Background*/
body, html {background: url('http://i44.tinypic.com/11vh26e.jpg') center top no-repeat scroll; background-color: black; background-size: 100%;}

/*Columns*/
#column_3, #column_2, #column_1, #columns {overflow: visible;}

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

/*Header*/
#gaia_header a:link, #gaia_header a:visited {color: white !important;}
#gaia_header a:hover, #gaia_header a:active {color: #30013F !important; text-shadow: white 0px 0px 5px !important;}

#gaia_header li {color: transparent;}

/*Panels*/
.panel h2 {background: transparent; color: white; text-align: center; text-transform: none; text-shadow: white 0px 0px 5px; font-family: Times New Roman; font-size: 16px; font-weight: bold; font-style: italic;

border-top: 0px solid #30013F;
border-bottom: 0px solid #30013F;
border-left: 0px solid #30013F;
border-right: 0px solid #30013F;

border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px;}

.panel {
background: url('http://i56.photobucket.com/albums/g177/Leonardo108/Backgrounds/lines.png') center repeat #000;
color: white;
text-shadow: white 0px 0px 5px;
text-align: center;
border-top: 2px solid #30013F;
border-bottom: 2px solid #30013F;
border-left: 8px solid #30013F;
border-right: 8px solid #30013F;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
opacity: .75;
-moz-opacity: .75;
-webkit-opacity: .75;
-o-opacity: .75;
filter:alpha(opacity=75);
transition: opacity .7s, background .4s;
-moz-transition: opacity .7s, background .4s;
-webkit-transition: opacity .7s, background .7s;
-o-transition: opacity .7s, background .7s;}

.panel:hover {background: black; opacity: .9; -moz-opacity: .9;}

/*Details*/
#id_details img {display: none;}
.forum_userstatus {
background: transparent;

border-top: 3px solid #30013F;
border-bottom: 3px solid #30013F;
border-left: 5px solid #30013F;
border-right: 5px solid #30013F;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;}

#id_details .forum_userstatus span {color: white; font-size: 9px; font-family: Verdana;}

.forum_userstatus .statuslinks span.online {background: url('http://s.cdn.gaiaonline.com/images/common/emotion_smilies/icon_yatta.gif') left no-repeat;}
.forum_userstatus .statuslinks span.offline {background: url('http://s.cdn.gaiaonline.com/images/common/emotion_smilies/icon_zzz.gif') left no-repeat;}
.forum_userstatus .statuslinks{background: url('http://i56.photobucket.com/albums/g177/Leonardo108/avatarboxarror-1-1-inverted.png') right no-repeat;}

#avatar_menu {background: black;
opacity: .5;
-moz-opacity: .5;
-webkit-opacity: .5;
-o-opacity: .5;
filter:alpha(opacity=50);
transition: opacity 1.4s;
-moz-transition: opacity 1.4s;
-webkit-transition: opacity 1.4s;
-o-transition: opacity 1.4s;}

#avatar_menu:hover {opacity: .9;}

#avatar_menu a:link, #avatar_menu a:visited {color: white; font-weight: bold;}

#avatar_menu a:hover {background: none; color: #30013F; text-shadow: white 0px 0px 5px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border: solid 1px black;}

/*About*/
#id_about {height: 200px; overflow-y: hidden; overflow-x: hidden;}
#id_about ol {height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 500px;}

/*Comments*/
#id_comments {height: 350px; overflow-x: hidden; overflow-y: hidden;}

#id_comments dl {height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; padding-right: 500px;}

/*Visitors*/
#id_footprints {;}

/*Media panels / flash*/
.media_panel {opacity: 1.0; -moz-opacity: 1.0; -webkit-opacity: 1.0; filter:alpha(opacity=100);}

#id_media_39467 h2, #id_media_39467 {background: transparent; border: none;}

#id_media_39467 object, #id_media_39467 embed {
height: 25px;
width: 30px;
position: fixed;
left: 13px;
bottom: 13px;}

/*Used when placing a video in column 2*/
#id_media_39683 embed, #id_media_39683 object {height: 275px; width: 400px;}

/*Links*/
a:link, a:visited {color: white; text-shadow: none; transition-duration: .2s; transition-property: text-shadow, background; -moz-transition-duration: .2s; -moz-transition-property: text-shadow, background; -webkit-transition-duration: .2s; -webkit-transition-property: text-shadow, background; -o-transition-duration: .2s; -o-transition-property: text-shadow, background;}

a:hover, a:active {
color: #30013F;
text-shadow: white 0px 0px 5px;

border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;

border-top: none;
border-bottom: none;
border-left: solid 0px white;
border-right: solid 0px white;}

/*Misc. / Extra*/
::selection {background: cyan; color: white;}
::-moz-selection {background: cyan; color: white;}
::-webkit-selection {background: cyan; color: white;}
: surprised -selection {background: cyan; color: white;}

body, .panel, a, #avatar_menu a {font-size: 9px; font-family: Verdana !important;}

/*For text/captions*/
body {color: black;}

#alerts_banner {display: none;}

.mask {opacity: .0;}

/*To be organized later*/
#id_footprints h2 {border: none;}
#id_footprints {position: relative; left: -50px; background: transparent; border: transparent; text-indent: -1000px; text-shadow: none;}

#id_footprints:hover {position: relative; left: 0px; transition: left 2s; -moz-transition: left 2s; -webkit-transition: left 2s; -o-transition: left 2s; background: black; color: white; text-indent: 0px;
border-top: 2px solid #30013F;
border-bottom: 2px solid #30013F;
border-left: 8px solid #30013F;
border-right: 8px solid #30013F;}

#id_details h2 {display: none;}
#id_details {background: transparent; position: fixed; left: 40px; bottom: -20px; border: none;}

#id_comments * img {display: none;}
#id_comments * {text-align: center;}
#id_comments * a {;}
#id_comments .date {display: none;}
/*Bottom of code*/

Also, Smiley's are not images. They're span elements with a background image
For your comments add #id_comments .smilies {display: none;}

For your panel transition the background timing isn't consistent among browsers.
I also see you're using "opacity" with browser prefixes, this is highly unnecessary, opacity is a standard property and has been for quite sometime now. And always has been on Opera, I was hesitant to highly the filter, as filter only works in IE8 and lower. Why support a dying browser? IE9+ is more W3C compliant, so it no longer needs those damn filters.

Also, I see you're taking away the mask color when in edit mode. You can also use "background: none" instead of an opacity.

However, your edit mode CSS doesn't compare to mine ;D
Here's mine, http://pastie.org/private/d0h5kmdzzdiqqzfj8sxq

[Recite]

Knight Yoshi

Recite

rofl I'm assuming you might have been tired or rushing at that point.

Also, I spent a few hours working on my profile earlier, incorporating a lot of CCS3 transitions. Can I ask what you think of it so far?

There's no indication that the recent visitors is there. When you hover the panels the background goes completely black and then off hover the transition slides back from the bottom right, doesn't feel like a smooth transition. You should bump the .forum_userstatus element up a little bit, when hovering links the link destination in the bottom left covers the element. Oh and I hate the color purple. xd

The intention is to have the visitors panel hidden and then slide in when hovered. I might or might not change that. And the panels background are supposed to turn completely black. I thought it added nice effect. What do you mean I should bump it up though? surprised

As replying to the other post:

I can understand what you highlighted in red. A lot of the stuff you said, I didn't know, but I figure I'll keep the opacity filter just in case. It doesn't really hurt anything. As for the blue, I don't exactly know the way to condense the border codes into a single one because I'm not very familiar with it. And for the orange, how does the timing I have set up not stay consistent with other browsers?

The display: none property I used for #id_comments img * was intended to hide the avatars in my comments panel, not smilies. And I'll keep the background: none property in mind for the mask selector. razz I'll make sure to do a clean up later on and organize everything more, as well as some tweaks and adjustments.

Also, of course my CSS doesn't compare to yours. rofl I don't have that large of a knowledge base for CSS like you probably do. I've never taken any classes, and I also don't know a lot of Gaia's selectors, although I wish I did. I really don't get where people find them. I'm also still learning, slowly but gradually, because I've mostly taught myself how to utilize CSS and taken/memorized pieces of code from guides. I've a lot to learn. All of the CSS I've learned on Gaia, and only know how to use it on Gaia for the most part.

half asleep* emotion_zzz

[IMANOOT]

Recite

Knight Yoshi

Recite

rofl I'm assuming you might have been tired or rushing at that point.

Also, I spent a few hours working on my profile earlier, incorporating a lot of CCS3 transitions. Can I ask what you think of it so far?

There's no indication that the recent visitors is there. When you hover the panels the background goes completely black and then off hover the transition slides back from the bottom right, doesn't feel like a smooth transition. You should bump the .forum_userstatus element up a little bit, when hovering links the link destination in the bottom left covers the element. Oh and I hate the color purple. xd

The intention is to have the visitors panel hidden and then slide in when hovered. I might or might not change that. And the panels background are supposed to turn completely black. I thought it added nice effect. What do you mean I should bump it up though? surprised

As replying to the other post:

I can understand what you highlighted in red. A lot of the stuff you said, I didn't know, but I figure I'll keep the opacity filter just in case. It doesn't really hurt anything. As for the blue, I don't exactly know the way to condense the border codes into a single one because I'm not very familiar with it. And for the orange, how does the timing I have set up not stay consistent with other browsers?

The display: none property I used for #id_comments img * was intended to hide the avatars in my comments panel, not smilies. And I'll keep the background: none property in mind for the mask selector. razz I'll make sure to do a clean up later on and organize everything more, as well as some tweaks and adjustments.

Also, of course my CSS doesn't compare to yours. rofl I don't have that large of a knowledge base for CSS like you probably do. I've never taken any classes, and I also don't know a lot of Gaia's selectors, although I wish I did. I really don't get where people find them. I'm also still learning, slowly but gradually, because I've mostly taught myself how to utilize CSS and taken/memorized pieces of code from guides. I've a lot to learn. All of the CSS I've learned on Gaia, and only know how to use it on Gaia for the most part.

half asleep* emotion_zzz

Maybe instead of a "slide-in" affect, have a "slide-out" one. As in, have it appear like its a tab on the about panel and when hovered it slides out.
I mean, in move it up from the bottom probably another 10-15 pixels.
Yes, the opacity filter isn't affecting anything its for IE8 and lower. But IE just sucks. LOL
For instance the first set of borders in blue

Quote:

border-top: 2px solid #30013F;
border-bottom: 2px solid #30013F;
border-left: 8px solid #30013F;
border-right: 8px solid #30013F;

You can sum that to a couple of properties border-style, border-width, border-color.

Or instead of three you can use two
selector {
border: solid #30013F;
border-width: 2px 8px;
}

Border width works like this: top, right, bottom left (clock wise). If left is omitted then it has the same width as right, if bottom is omitted then it has the same width as top, and if right, bottom, and left are omitted then they all have the same width border-width: 2px (all sides would be 2px). But in this case we're specifying left and right 8, top and bottom 2.

Quote:

transition: opacity .7s, background .4s;
-moz-transition: opacity .7s, background .4s;
-webkit-transition: opacity .7s, background .7s;
-o-transition: opacity .7s, background .7s;

Pay attention to your timing duration on the first two transition properties and the last two transition properties, what's not being constant among all four properties?

I never took any classes either. In fact, you should learn HTML first, it would make more sense how CSS works. However I learned CSS then HTML. I learned CSS just to make profiles, which turned into a career field in web development for me.

People get the selector tags a few ways. One, the most inefficient nooby way ever, view the source code. Two, use a DOM inspector. Firefox has two DOM inspectors add-ons, "DOM inspector" and "FireBug". Firebug is better. Google Chrome has a native inspector. Learn to use them you'll be much more proficient.

[ZhEDbra]

Holy hard-core coding, Batman!

This is a pretty sweet guide to CSS coding. o:

Not a lot of guides get this in-def into actual coding details.

It proves a very useful reference, I'm subbing and <3 this thread.

Good work!

[IMANOOT]

Malicious Melons

Holy hard-core coding, Batman!

This is a pretty sweet guide to CSS coding. o:

Not a lot of guides get this in-def into actual coding details.

It proves a very useful reference, I'm subbing and <3 this thread.

Good work!

Glad you like it, I'm working on reorganizing everything to the W3C format, like the background and colors post. Hopefully it'll be much more clear to read then. Have any questions, just post.

[iRMA_Cx]

I'm amazed of all your codes.
I should try challenge my self to do a profile. Haha.

[IMANOOT]

iRMA_Cx

I'm amazed of all your codes.
I should try challenge my self to do a profile. Haha.

Well if you ever get confused, have a question, or something doesn't work, just post.

[Dark Triforce]

Knight Yoshi

background-attachment
Value: scroll | fixed | inherit
Initial: scroll
Usage: selector { background-attachment: value; }
Applies to: all elements

So if I want to make my background have a fixed image, I copy the selector { background-attachment: value; } and type in fixed where it says value, right? But where should I paste this to make it work for my profile?

[IMANOOT]

Rainbow Triforce

Knight Yoshi

background-attachment
Value: scroll | fixed | inherit
Initial: scroll
Usage: selector { background-attachment: value; }
Applies to: all elements

So if I want to make my background have a fixed image, I copy the selector { background-attachment: value; } and type in fixed where it says value, right? But where should I paste this to make it work for my profile?

All you need is the background-attachment: value and apply it to the declaration block of what you want in this case I'm assuming the 'body'? You can also use the shorthand 'background' property. Replace 'value' with fixed.
body {background: url( ) 0 0 no-repeat fixed;}
Add the image URL it will be top left (0, 0), not repeating and fixed. Change the position if you want as well.

[CurioHeart]

I'd like to comment regarding using multiple backgrounds; though it becomes pretty quickly apparent when you start adding additional backgrounds, their layering starts with the first background specified with each additional background being added to the layer beneath it as opposed to above it, as with GIMP and Photoshop (and likely many other image editing programs as well). This can be particularly confusing if the first specified image is the same size or larger than the second and has no transparency, as it will hide the second image completely. For obvious reasons, this issue applies to non-transparent gradients as well.

[IMANOOT]

Eliae Darr

I'd like to comment regarding using multiple backgrounds; though it becomes pretty quickly apparent when you start adding additional backgrounds, their layering starts with the first background specified with each additional background being added to the layer beneath it as opposed to above it, as with GIMP and Photoshop (and likely many other image editing programs as well). This can be particularly confusing if the first specified image is the same size or larger than the second and has no transparency, as it will hide the second image completely. For obvious reasons, this issue applies to non-transparent gradients as well.

Yes, I am aware of this. Though I didn't realize I removed that annotation after I changed the format. Thanks for pointing that out to me.