Hello,
I have a CSS code sequence (text ticker) that I would like to integrate into userstyle.css.
The goal should be to call only the function "ticker" on the WIKI pages and not always have to deposit the whole CSS sequence there.
I define the function ".ticker" in the userstyle.css and then call the function on a wiki page:
<ticker>
<html>
<p> text text </p>
</html>
So my idea...
Unfortunately my attempts fail so far miserably...
Even clearing the cache as a general solution didn't help....
The userstyle.css is also in the right location (<wiki>/conf)...
It's also not because of the code sequence itself - this works very well if you integrate the complete CSS sequence into a wiki.
The code sequence looks like this:
<html>
<style>
.Laufband {
height: 80px;
overflow: hidden;
position: relative;
background: whitesmoke;
color: red;
border: 0px solid grey;
}
.Laufband p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
transform:translateX(50%);
/* Apply animation to this element */
-moz-animation: horizontally 5s linear infinite;
-webkit-animation: horizontally 5s linear infinite;
animation: horizontally 35s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes horizontally {
0% { -moz-transform: translateX(92%); }
100% { -moz-transform: translateX(-92%); }
}
@-webkit-keyframes horizontally {
0% { -webkit-transform: translateX(92%); }
100% { -webkit-transform: translateX(-92%); }
}
@keyframes Laufband {
0% {
-moz-transform: translateX(92%); /* Browser bug fix */
-webkit-transform: translateX(92%); /* Browser bug fix */
transform: translateX(92%);
}
100% {
-moz-transform: translateX(-92%); /* Browser bug fix */
-webkit-transform: translateX(-92%); /* Browser bug fix */
transform: translateX(-92%);
}
}
</style>
</html>
The function is then called on the page using the following sequence:
<html>
<div class="Laufband">
<p>text text text</p><br><p>text text text</p>
</div>
</html>
The only thing I can't get right is the integration into userstyle.css....
I am very grateful for any ideas....
tnx
Christoph