CSS

Some experience templates in Optimizely Web Experimentation and Optimizely Personalization may not need any CSS because they inherit styles from the page. However, you can add additional styling in the CSS box. This is injected on the page through a <style> tag.

CSS does not support field values; if you want to use those in the styling, you can do it directly in the HTML through inline styles, such as<div class="banner" style="background-color: {{extension.color}}">.

.banner {
  color: white;
  padding: 10px;
  position: fixed;
  top: 0px;
  z-index: 100000000;
  width: 100%;
  text-align: center;
  height: 45px;
}

.banner a {
  text-decoration: underline;
  color: white;
}

body {
 margin-top: 45px;
}