JSPWiki: BannerStyles

Some of the NeWikiPlugins use the CSS selectors 'div.banner_information', 'div.banner_warning', 'div.banner_error' and 'div.banner_note' to display their result messages.

Some recommended CSS for these styles is shown below:

Banner Error#

.banner_error {
  display: inline-block;
  margin: 1em 0.5em 1em -16px; padding: 0.9em 1em 0.9em 1em; max-width: 66%;
  color: #a70000; background-color: #ffe8e8;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  border-left: 16px solid #ff0101;
}

Banner Warning#

.banner_warning {
  display: inline-block;
  margin: 1em 0.5em 1em -16px; padding: 0.9em 1em 0.9em 1em; max-width: 66%;
  color: #a75e00; background-color: #ffe8cb;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  border-left: 16px solid #ff9301;
}

Banner Information#

.banner_information {
  display: inline-block;
  margin: 1em 0.5em 1em -16px; padding: 0.9em 1em 0.9em 1em; max-width: 66%;
  color: #005c82; background-color: #e8f8ff;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  border-left: 16px solid #01b4ff;
}

Banner Note#

.banner_note {
  display: inline-block;
  margin: 2em 0.5em 1em -16px; padding: 1em 1em 1em 1em; max-width: 66%;
  max-height: 12em; font-size: 95%; text-align: justify;
  color: #001822; background-color: #f5fdff;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  border-left: 16px solid #c3edff;
  transform: translateX(0);
  overflow-x: hidden;
  overflow-y: scroll;
}
.banner_note .note_title {
  position: absolute; width: auto; padding-left: 1em; padding-right: 1em; text-align: right;
  background-image: linear-gradient(#dbf8ff, #f5fdff);
  font-size: 85%;
  top: 0; right: 1em;
  overflow-x: none;
}