screen top
02-262000
101
7109
1966
1222
2020
1444
102
1103
1935
1940
708
M113
1956
1209
102
8102
1987
044
0051
607
1976
1031
1984
1954
1103
415
1045
1864
103
714
1993
0222
052
1968
2450
746
56
47
716
8719
417
602
104
6104
1995
322
90
1931
1701
51
29
218
908
2114
85
3504
105
08
2001
713
079
1940
LV
426
105
10
1206
1979
402
795
106
31
2017
429
65
871
1031
541
656
764
88
001
27
05
03-111968
04-041969
05-1701D
06-071984
07-081940
08-47148
09-081966
10-31

HTML Elements

In addition to the basic HTML elements, the following are specially formatted HTML elements available in the template. Some have special classes.

Blockquote

"The first duty of every Starfleet officer is to the truth, whether it's scientific truth or historical truth or personal truth! It is the guiding principle on which Starfleet is based." -Captain Picard

HR - 2 Styles

The horizontal line HTML tag has an additional style - a disc. Both examples are shown.

<hr>


<hr class="disc">


LCARS Bar

Note: For an LCARS bar with text, see this page.

<div class="lcars-bar">
  <div class="lcars-bar-inner"></div>
</div>

LCARS Bar Style II

<div class="lcars-bar-slice-top"></div>
<div class="lcars-bar">
  <div class="lcars-bar-inner">
    <div class="lcars-bar-cutout"></div>
  </div>
</div>
<div class="lcars-bar-slice-bottom"></div>

Fancy Oval Bullet List

  • First item in a list
  • Second list item
<ul class="lcars-list">
  <li>First item in a list</li>
  <li>Second list item</li>
</ul>

How to Change Bullet Color

  • First item in a list
  • Second list item

Simply pick a color from the Color Guide and use the class name, but starting with *oc-* (oc for Oval Color). See example code below:

<ul class="lcars-list">
  <li class="oc-mars">First item in a list</li>
  <li class="oc-gold">Second list item</li>
</ul>

Blinking Elements

When you apply the class *blink*, *blink-slower*, or *blink-faster* to a text element, here are the results:

<h3 class="blink">ALERT</h3> <h3 class="blink-slower">ALERT</h3> <h3 class="blink-faster">ALERT</h3>

Now let's change the color:

<h3 class="blink-faster go-mars">ALERT</h3>

NOTE: The color/class name "go-mars" is taken from the LCARS Color Guide.

You can apply the "blink" class to any text element, such as paragraphs <p>, headings <h1>,<h2> etc., or the <span> tag. You can even make block elements blink, like buttons:

<div class="buttons">
  <a href="" class="gold blink">engage</a>
</div>

Please note the color/class name "gold" is also from the LCARS Color Guide.

HTML Image Elements

Please see USING IMAGES section.

LCARS Buttons

Please see BUTTONS section.