The long story is I have a CKEditor component that allows site admins to select content on a page and edit it. I do this with the Dynamic component. Occasionally I need to put a style tag in the template to override the default styling for the page. In this case I have a template like:
<span> <style> *html,body*{height:100%;} *body* {padding: 0px;} .container{height: 100%; padding: 0px; margin: 0px; max-width: 100%;} .carousel*,*.item*,*.active{height:100%;} .carousel-inner{height:100%;} .fill{width:100%;height:100%;background-position:center;background-size: cover;} .carousel-inner > .item { -webkit-transition: 0.3s ease-in-out left; -moz-transition: 0.3s ease-in-out left; -o-transition: 0.3s ease-in-out left; transition: 0.3s ease-in-out left; } </style> <div id="carousel" class="carousel slide" data-interval="5000" > *...* *</div>* *</span>* so I can make the Bootstrap carousel component full screen and control the transition time. The problem is .carousel-inner > .item turns into .carousel > .item and does not work. I know I can fix this by making a different way to add css to the page but that's a lot of work to solve this problem.