Solaris Widgets

These are custom widgets I've made to use on Solaris. This article is a repository of the bb code and any required article css. It does not contain the global css that makes each widget function.

Introduction

Content Warning

Placed in the Credits heading. Requires additional CSS added to the article, and will override any author credits.

Content Warning:

Badge Badge Alt Text

[container:content-warning]
[spoiler]
[section:badge bg-secondary]Badge[/section] 
[section:badge bg-primary]Badge Alt[/section]
Text
|[section:fal fa-circle-info] [/section] Content Warning:
[/spoiler]
[/container]

.user-css .article-title-author {
 text-align: unset;
}


.user-css .article-title-author a {
 font-style: unset;
 font-size: 16px;
}


.user-css .article-title-author {
 text-transform: unset;
 background: none;
}

Navigational Tabs

Placed in the Credits heading. It will override any author credits.

Self-Link

Link

[container:nav-tabs]
[container:nav-tab self-link]Self-Link[/container]
[container:nav-tab]Link[/container]
[/container]

Prelude

An opening paragraph of prose sets the scene for the article. The prelude styling and the drop cap mark the prose as different from the main body of text. A prelude is not necessary, but it is nice to have.

[container:prelude][dc]A[/dc]nd the text[/container]

Formatting

Alternative Rows

Used to define sections and improve readability.

[container:row-alt] [/container]

Articleblocks

Add reduce-article-block to a parent container.

Add btn-block to a parent container.

Add article-style to a parent container.

Article-Style Articleblock

Simplified Article-Style Articleblock (reduced)

Simplified Buttonblock
n/a

"Articleblock"

Article-Style "Articleblock"

@[[container:article-panel][container:details][h4]Title[/h4][container:excerpt]Text goes here. No line breaks.[/container][/container][/container]](template:##)

In-Article Timelines

Timelines help to visualize a chronological sequence of events in an article. In-Article Timelines use custom css and containers. They are flexible and default to the basic style on slim screens.

I haven't had the time to make this css copy-friendly yet, but Satrium has generously shared his Timeline set up and css here.

Basic Timeline

Header Descriptive Text

Header Descriptive Text

Header Descriptive Text

The basic timeline is what all timelines become on mobile. It is ideal for slim screens and slim columns.

BB Code

[container:timeline-basic]
 [container:timeline-event]
 	[container:timeline-event-info]
  	[section:timeline-event-header]Header[/section]
 		[section:timeline-event-text]Descriptive Text[/section]
  [/container]
 	[container:timeline-event-line] [/container]
 	[container:timeline-event-icon][section:fal fa-waveform-lines] [/section][/container]
 [/container]
 [container:timeline-event alt]
 	[container:timeline-event-info]
  	[section:timeline-event-header]Header[/section]
   [section:timeline-event-text]Descriptive Text[/section]
  [/container]
   [container:timeline-event-line] [/container]
   [container:timeline-event-icon][section:fal fa-shield] [/section][/container]
  [/container]
[/container]

Vertical Timeline

Vertical timelines help break up information, and have more of a focus on each individual event. You can see it in use in Operation War Dove. The vertical timeline takes up the full width of the article.

Header Descriptive Text

Header Descriptive Text

Header Descriptive Text

Horizontal Timeline

Header Descriptive Text

Header Descriptive Text

Header Descriptive Text