Timelines, Historical Events & Maps CSS

Guild Exclusive

This is a guild-only feature. To get access, Join the Worldbuilder's Guild!

Timelines

The CSS examples for the timelines can only be used in the legacy timelines.

A list of handy selectors with their default CSS to make it easier for you to customize your timelines.
Timeline Title - Click to Expand

.user-css.page-timeline h1 {
    font-family: Alegreya SC, serif;
    font-weight: 700;
    font-size: 42px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
    line-height: 0.9em;
    margin-top: 20px;
    margin-bottom: 5px;
}

Timeline Event Panel - Click to Expand

.user-css .timeline li .timeline-panel {
    margin-top: 50px;
    width: 44.5%;
    float: left;
    background: #404e5d;
    border: 1px solid #13181d;
    padding: 20px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) ;
}

Timeline Milestone - Click to Expand

.user-css .timeline .milestone {
    background: rgb(234, 233, 226) ;
}
.timeline .milestone p {
    padding-top: 3px;
}

Timeline Center Line - Click to Expand

.user-css .timeline:before {
    background-color: #800000;
}

Timeline Center Line Markers - Click to Expand

.user-css .timeline li .tl-circ {
    background: #2d353d;
    color: #fff;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border: 2px solid #fff;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}
.user-css .timeline li .tl-circ.important {
    border-top-right-radius: 0%;
    border-top-left-radius: 0%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

For the following, its recommended that you change only the colors, unless you know what you're doing.
Timeline Arrows - Click to Expand

.user-css .timeline li .timeline-panel:before {
    border-top: 15px solid transparent;
    border-left: 15px solid #13181d;
    border-right: 0 solid #13181d;
    border-bottom: 15px solid transparent;
}
.user-css .timeline li .timeline-panel:after {
    border-top: 14px solid transparent;
    border-left: 14px solid #404e5d;
    border-right: 0 solid #404e5d;
    border-bottom: 14px solid transparent;
}
.user-css .timeline li .timeline-panel.noarrow:before,
.user-css .timeline li .timeline-panel.noarrow:after {
    top:0;
    right:0;
    display: none;
    border: 0;
}

Timeline Colors

This list of selectors is paired down to make it easy to change just the colors on your timeline. They are grouped by their default color, so you can change them a group at a time to tweak the color palette to your liking.
Timeline Reds - Click to Expand

.user-css .timeline .timeline-entry-milestone {
    border: 8px RGB(110, 110, 110) solid;
}
.user-css .timeline .timeline-entry-milestone .header-icon {
    border: 8px RGB(80, 90, 100) solid;
    color: RGB(80, 90, 100) ;
    background-color: #ffffff;
}
.user-css .timeline .major .timeline-panel{
    border-top: 8px #b93a3a solid;
}
.user-css .timeline .major .header-icon {
    border: 8px #b93a3a solid;
    color: #b93a3a;
    background-color: #ffffff;
}

Timeline Yellows - Click to Expand

.user-css .timeline .important .timeline-panel {
    border-top: 8px #e2b021 solid;
}
.user-css .timeline .important .header-icon {
    border: 8px #e2b021 solid;
    color: #e2b021;
    background-color: #ffffff;
}

Timeline Greens - Click to Expand

.user-css .timeline .minor .timeline-panel {
    border-top: 8px #0f800d solid;
}
.user-css .timeline .minor .header-icon {
    border: 8px #0f800d solid;
    color: #0f800d;
    background-color: #ffffff;
}

Timeline Teals - Click to Expand

.user-css .timeline .trivial .timeline-panel{
    border-top: 8px #148192 solid;
}
.user-css .timeline .trivial .header-icon {
    border: 8px #148192 solid;
    color: RGB(50, 50, 120) ;
    background-color: #ffffff;
}

Fixing Event Icons

If you have used CSS to change the font size of your worlds, the event icons might not be centered in their circle. In order to fix that and reset the font size of the icons only, you can use the following code:
Resize Icons - Click to Expand

Snipped provided by Xanthuss

.user-css .timeline .header-icon {
    padding: 9px;
    font-size: 16px;
}

Maps

This CSS can be applied to maps. All map CSS needs to target both the full map presentation and the embedded maps. All examples below duplicate each selectors for both. To have a CSS rule only apply to the full presentation remove the selector starting with .user-css and vice versa.

Multiline Labels

This targets all labels to allow text to be wrapped. Might need to add some width as otherwise the it will become one word per line.
Multiline Label - Click to Expand

.map-context-user-css .leaflet-tooltip.marker-label,
.user-css .leaflet-tooltip.marker-label {
  white-space: unset;
}

Map Preview Block

The map preview block does not have a BBCode to make it appear anywhere. These show up on the homepage and associated category pages, organization & location article sidebars. They also appear in the global world navigation on the left side.
Default CSS - Click to Expand

.user-css .map-box {
    padding: 10px;
    background-color: #f9f9f7;
    border: 1px #d4d2c5 solid;
    margin-bottom: 15px;
}

Add Hover Effect - Click to Expand

.user-css .map-box:hover {
  
}

Rotate Map Marker Label

This feature is available to Grandmaster and Sage guild members.

In order to rotate a map marker label two steps are required. First add a [container] BBCode to the label text itself. Then add the rotation CSS to the world to apply to this section. The example below will rotate the label by 30 degrees.
Example - Click to Expand

[container: rotate20]Label Title[/container]


.user-css .rotate20 {
  transform: rotate(-30deg);
}

Content

CSS Guides