Streaming live at 10am (PST)

How to post CSS code into individual webpages


#1

I am trying to make a code widget appear on the page;

  1. Do i put the codes CSS in the or the part of the page settings?

  2. Is there anything that i need to preface my pasted code with, such as before i post in the code; and once the code has finished?

For the widget i seek to embed, i posted in the correct html and css, yet it failed to render. This is why i ask; and i do understand it could be the developer's faulty code, but it also could be me not doing the right steps in pasting the code in the CSS section.

Thank you,

Elliot

p.s.

heres the code i posted in css:

.xoWrap {
height:300px;
padding:50px 0;
position: relative;
text-align: center;
margin:0 auto;
width:260px;
transform:translate3d(30px,0,0);
}

.xoShadowBack {
perspective: 800px;
perspective-origin: 50% 100px;
}

.xoShadow {
position: relative;
width: 200px;
transform-style: preserve-3d;
}

.xoShadow div{
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0px 0px 50px #000;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}

.xoCubeBack {
perspective: 800px;
perspective-origin: 50% 100px;
}

.xoCube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}

.xoCube a {
outline:none;
width:100%;
height:100%;
display:block;
}

.xoCube i {
padding: 40px 0;
color:white;
font-size:8em;
}
.xo1 i {
transition:color .25s ease;

}
.xo1:hover i,
.xo2:hover i,
.xo3:hover i,
.xo4:hover i {
color:black;
transition:color .25s ease;
}

.xoCube div {
position: absolute;
width: 200px;
height: 200px;
box-shadow: inset 0 0 50px #555, 0 0 2px #555;
}

.xo1 {
transform: translateZ(100px);
background-color: #3b5998;
}

.xo2 {
transform: translateZ(-100px) rotateY(180deg);
background-color: #517fa4;
}
.xo4 {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
background-color: #cb2027;
}
.xo3 {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
background-color: #00aced;
}

.xoCube,
.xoShadow {
animation: xoSpin 20s infinite linear;
}

@keyframes xoSpin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(-360deg);
}
}


#2

You're REALLY close!! :grin: Drop it in your Custom Code <head> tag section. Make sure to add <style> before the CSS and </style> right after it:

So you end up having this in your <head> tag:

<style>
.xoWrap {
height:300px;
padding:50px 0;
position: relative;
text-align: center;
margin:0 auto;
width:260px;
transform:translate3d(30px,0,0);
}

.xoShadowBack {
perspective: 800px;
perspective-origin: 50% 100px;
}

.xoShadow {
position: relative;
width: 200px;
transform-style: preserve-3d;
}

.xoShadow div{
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0px 0px 50px #000;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}

.xoCubeBack {
perspective: 800px;
perspective-origin: 50% 100px;
}

.xoCube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}

.xoCube a {
outline:none; 
width:100%;
height:100%;
display:block;
}

.xoCube i {
padding: 40px 0;
color:white;
font-size:8em;
}
.xo1 i {
transition:color .25s ease;

}
.xo1:hover i,
.xo2:hover i,
.xo3:hover i,
.xo4:hover i {
color:black;
transition:color .25s ease;
}

.xoCube div {
position: absolute;
width: 200px;
height: 200px;
box-shadow: inset 0 0 50px #555, 0 0 2px #555;
}

.xo1 {
transform: translateZ(100px);
background-color: #3b5998;
}

.xo2 {
transform: translateZ(-100px) rotateY(180deg);
background-color: #517fa4;
}
.xo4 {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
background-color: #cb2027;
}
.xo3 {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
background-color: #00aced;
}

.xoCube, 
.xoShadow {
animation: xoSpin 20s infinite linear;
}

@keyframes xoSpin {
0% {
transform: rotateY(0); 
}
100% { 
transform: rotateY(-360deg);
}
}
</style>

#3