html elements

Refer to this page's source code when needed, then copy and paste away.

unordered list horizontal line lcars bar lcars text bar blockquote blinkies buttons text formating change text color

Unordered List

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

Dark Gray
Primary Gray (default bullet color)
Medium Gray
Light Gray
Ghost Gray
Starlight
Cyan
Orange
Light Orange
Pale Orange
Blue
Medium Dark Blue
Dark Blue
Green
Black Cherry

Horizontal Line

LCARS Bar

LCARS Text Bar

heading

You can also align text to the right:

heading

Blockquote

"I have been and always shall be, your friend."

Blinkies

Note that text color is a separate class. Remember, you can include more than one class to an element.

Monday blinks slow: Monday

Wednesday blinks average speed: Wednesday

Saturday blinks fast: Saturday

Buttons

Use the following class selectors (shown in green) in the parent *buttons* DIV to position a button or group of buttons. Note that buttons will wrap at smaller viewport sizes. Positioning classes work in all themes.

center one or more buttons

jc-center
Note: *jc* stands for justify content.

BA-001 BB-002

Buttons that Align to the Right

jc-flex-end
Note: Buttons align to the left by default.

BA-001 BB-002

a group of buttons that are spaced evenly

jc-space-evenly
Buttons are distributed so that the spacing between any two adjacent alignment buttons, before the first alignment button, and after the last alignment button is the same.

BA-001 BB-002 BB-003

a group of buttons that fill a line

jc-space-between
Buttons are evenly distributed in the line; first button is on the start of the line, last button on the end of the line.

BA-001 BB-002 BB-003

a group of equally spaced buttons

jc-space-around
Buttons are evenly distributed in the line with equal space around them.

BA-001 BB-002 BB-003

change a button's color

Note: this also works on the buttons in the sidebar.

BA-001 BB-002 BB-003 BB-004

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 to change text to that color.

dark-gray
medium-dark-gray
primary-gray
light-gray
ghost-gray
starlight
cyan
orange
light-orange
pale-orange
blue
medium-dark-blue
dark-blue
green
black-cherry