File path, Sysoutput, Userinput, Varname

Style the semantic string elements and wrap variable name elements in angle brackets.

Overview


Resource location:	@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/filepath_sysoutput_userinput_varname.css");

file path varname — Figure 1. File path element and variable name element.
The following example shows a file path element that contains a variable name element. The variable name element is automatically wrapped in <angle brackets>.

system output — Figure 2. System output element

user input — Figure 3. User input element

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Do not wrap variable name elements in angle brackets

/* Do not wrap variable name elements in angle brackets. */
.varname::before {
  content: "";
}
.varname::after {
  content: "";
}

Style file path elements

/* Style file path elements. */
.filepath {
  display: inline-block;
  padding: 0em 0.25em;
  text-align: left;
  width: auto;
  background-color: whitesmoke;
  color: teal;
  border: 2px dotted gray;
}

Style system output elements

/* Style system output elements. */
.systemoutput {
  font-family: 'Courier New', Courier, monospace;
  background-color: black;
  color: rgb(9, 169, 9);
  padding: 2.5px;
  letter-spacing: 0.035em;
}

Style user input elements

/* Add a caption before the user input element. */
.userinput::before {
    content: "enter: ";
    font-weight: bold;
}
/* Style the user input element. */
.userinput {
    border-top: 2px solid #457b9d;
    border-bottom: 2px solid #457b9d;
}

Gretyl's Portal

Heretto Help

File path, Sysoutput, Userinput, Varname

Overview

Common Customizations

Footer Section

Our Support Team is here to help