Docs

[gab3iel]

Hi,

I have been trying to make a color transition (using CSS3 animations) on the x-navbar, unfortunately the renew.css seems to be injecting an inline background-color with an “!important”. I have been trying to override the color by adding an “!important” on every single stop of my animation but the inline styling prevails. The .x-colophon.bottom works fine as it does not have that problematic “!important” tag.

I have thought about changing the renew.css but that’s not very good practice… Any solution would be appreciated. Thank you.

.x-navbar,
.x-colophon.bottom{
-webkit-animation:rainbow 60s infinite !important;
animation:rainbow 60s infinite !important;
}

@-webkit-keyframes rainbow
{
0% {background-color:rgb(114, 13, 13) !important;}
10% {background-color:rgb(114, 13, 55) !important;}
20% {background-color:rgb(114, 13, 102) !important;}
30% {background-color:rgb(77, 13, 114) !important;}
40% {background-color:rgb(30, 13, 114) !important;}
50% {background-color:rgb(13, 52, 114) !important;}
60% {background-color:rgb(13, 114, 107) !important;}
70% {background-color:rgb(13, 114, 13) !important;}
80% {background-color:rgb(96, 114, 13) !important;}
90% {background-color:rgb(114, 74, 13) !important;}
100% {background-color:rgb(114, 13, 13) !important;}
}

@keyframes rainbow {
0% {background-color:rgb(114, 13, 13) !important;}
10% {background-color:rgb(114, 13, 55) !important;}
20% {background-color:rgb(114, 13, 102) !important;}
30% {background-color:rgb(77, 13, 114) !important;}
40% {background-color:rgb(30, 13, 114) !important;}
50% {background-color:rgb(13, 52, 114) !important;}
60% {background-color:rgb(13, 114, 107) !important;}
70% {background-color:rgb(13, 114, 13) !important;}
80% {background-color:rgb(96, 114, 13) !important;}
90% {background-color:rgb(114, 74, 13) !important;}
100% {background-color:rgb(114, 13, 13) !important;}
}

[Jade]

Hi there,

Please try to use the selectors:

.x-navbar-inner,
.x-colophon.bottom .x-container {

}

Hope this helps.

[Author]

Posts