02-262000
101
7109
1966
36
880
11.03
1954
03
6.08
241
309
7.08
1935
12.20
53
1961
2.16
102
8102
1987
044
0051
1968
704
10.31
1984
1954
764
1940
9.9
1972
815
4.12
2023
103
714
1993
0222
4.4
1969
2450
91
56
21
716
801
417
602
5618
238
1443
104
6104
1995
3.22
1931
0.0
0000
1701
1984
218
908
10
85
1888
27
2879
213
105
08
2001
713
079
1977
LV
426
105
10
1642
1979
402
795
361
0852
984
106
31
2017
429
65
871
24
541
656
M
113
12.6
27
05
85
12.25
7884
107
5
2022
784
3304
42
733
1224
5801
23
1015
84
36
029
24
318
12.24
108
23
174
91
947
28
527
04
0469
2200
88
1985
540
3121
308
9571
404
03-111968
04-041969
05-1701D
06-071984
07-081940
08-47148
09-081966
10-31

html elements

Unordered List

NOTE: The bullets will all be one color - the default color - unless given a special class name.

  • 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>

Horizontal Line

<hr>

LCARS Bar

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

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

NOTE: The LCARS Bar is a single empty <div> with the class name *lcars-bar*. However, pre-Ultra Version 23-B templates required an additional <div> with the class name *lcars-bar-inner* inside the lcars-bar div like this:
<div class="lcars-bar">
  <div class="lcars-bar-inner"></div>
</div>

Users of current Ultra templates do not need that extra line of code.

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

Blinkies

Add either the class *blink*, *blink-slow*, or *blink-fast* to an HTML element for a blinking effect.

<h3 class="blink">Blink</h3> <h3 class="blink-slow">Blink Slow</h3> <h3 class="blink-fast">Blink Fast</h3>

Now let's change the color:

<h3 class="blink-fast 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>

Text Formatting • Custom Class Selectors

flush
Basically this removes space between a header element and a paragraph. Specifically, this sets the top margin of an element to a negative value so that the line is flush against the previous element.

nomar
Resets an element's margins to 0.

go-right
Aligns text to the right.

Look at me, I'm way over here to the right of the page!

go-left
Text aligns to the left by default, with some exceptions. For instance, the main page heading (<h1>) aligns right. But maybe you want it to align left instead. So rather than going in to CSS and making changes there, you can just add this class to the <h1> tag.

go-center
Centers text in an element.

Look at me, I'm centered!

go-big
Makes text in an element a little bigger than normal

uppercase
Transforms text to all uppercase letters

strike
Strikethrough: I love Mondays

now
This gives the whitespace property a value of nowrap. I use this when I don't want a string of words to break at the end of a line. This can happen when the veiwport shrinks. Take Star Trek, for example, which are two words that look better next to each other. If you're like me, you wouldn't like Star to be at the end of one line and Trek at the start of the next line.

I grew up watching Star
Trek.
Here is the fix:
<span class="now">Star Trek</span>
I grew up watching Star Trek.

big-sky
This almost quadruples the top margin of an element. Use case: this page - I use this on the <h2> heading tags to add more space between topics.

change text color

Simply add a color's class name preceeded with *go-* to a text element such as <p>, <span>, <h1>.

<p class="go-gold">The line must be drawn here.</p>
The line must be drawn here.

HTML Image Elements

Please see USING IMAGES page.

LCARS Buttons

Please see BUTTONS page.

page last updated september 10, 2023