02-262000
93
1853
24109
7
7024
322
4149
86
05
21509
68417
80
2048
319825
46233
05
2014
30986
585101
25403
31219
752
0604
21048
293612
534082
206
2107853
12201972
24487255
30412
98
4024161
888
35045462
41520257
33
56
04
69
41
15
25
65
21
0223
688
28471
21366
8654
31
1984
272
21854
633
51166
41699
6188
15033
21094
32881
26083
2143
406822
81205
91007
38357
110
2041
312
57104
00708
12073
688
21982
20254
55
38447
26921
285
30102
21604
15421
25
3808
582031
62311
85799
87
6895
72112
101088
604122
126523
86801
8447
210486
LV426
220655
272448
29620
339048
31802
9859
672304
581131
338
70104
16182
711632
102955
2061
5804
850233
833441
465
210047
75222
98824
63
858552
696730
307124
58414
209
808044
331025
62118
2700
395852
604206
26
309150
885
210411
817660
121979
20019
462869
25002
308
52074
33
80544
1070
020478
26419
372122
2623
79
90008
8049
251664
900007
704044
982365
25819
385
656214
409
218563
527222
80106
1314577
39001
7162893
12855
57
23966
4
6244009
2352
308
928
2721
8890
402
540
795
23
66880
8675309
821533
249009
51922
600454
9035768
453571
825064
131488
641212
218035
37
6022
82
572104
799324
4404
8807
4481
8915
2104
1681
326
446
8337
526
593
8057
22
23
6722
890
2608
7274
2103
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

Note: The method of changing bullet color depends on the version of LCARS you are using...

Version 24

Pick a color from the Color Guide and use the class name, but start with *bullet-*. See example code below:

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

Previous Versions

Pick a color from the Color Guide and use the class name, but start with *oc-* (oc = 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.


Note: The HTML for inserting a LCARS Bar depends on the version of LCARS you are using...

Version 24

<hr class="lcars-bar">

Previous Versions

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

NOTE: The LCARS Bar is a single empty <div> with the class name *lcars-bar*. However, pre 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>

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 (Version 24):

<h3 class="blink-fast font-mars">ALERT</h3>

NOTE: The custom color/class name "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="button-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

Note: The method of changing text color depends on the version of LCARS you are using...

Version 24

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

Pre-Version 24

<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 2025, January 20.

© 2020-2025 TheLCARS.com
STAR TREK ® and related marks are trademarks of CBS Studios Inc. All rights reserved.
TheLCARS.com is in no way affiliated with CBS Studios Inc.
LCARS was designed by graphic artist Michael Okuda.