2.8. Additional themes

Before moving on, you should create the remaining theme policies. Please treat this section as an exercise, and refer to the Policy and XDIME Editors pages if you need supporting information.

Before moving on, you should create the remaining theme policies. Please treat this section as an exercise, and refer to the Policy and XDIME Editors pages if you need supporting information.

Style property categories

  1. The index.mthm theme requires styles for the following selectors and classes. 

    ul.index {
  color: #555555;
  padding-left: 18px;
  margin: 0px;
}
ul.index > li > a {
  text-decoration: none;
  font-weight: bolder;
  color: #f47422;
}

  2. The style properties for the following selectors and classes must be set in the progressbar.mthm theme. 

     widget|progress {
  color: #23516a;
  height: 1em;
  padding: 2px;
  text-align: left;
}
div#progressValueDisplay {
  margin-top: 4px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

  3. Below are the style properties for the selectors and classes that you need to set in validator.mthm. 

    #name {
  mcs-validation-error-action: message;
  mcs-input-format: 'M:Xxxx*x';
}
#pin {
  mcs-validation-error-action: message;
  mcs-input-format: 'N:######';
}
.error {
  color: #f00;
}
#formMsgSuccess {
  font-weight: bold;
}
xforms|input {
  color: black;
}
xforms|label {
  color: white;
}

  4. The wizard.mthm theme has to define styles for the following selectors. 

    xforms|*::mcs-next {
  content: "Next";
}
xforms|*::mcs-cancel {
  content: "Cancel";
}
xforms|*::mcs-previous {
  content: "Back";
}