Page Comparison

How to customize existing presets

Case

We want to change the colors and font sizes of the presets in the Tile Preset parameter.

Expand

Panel

title	Tile Presets

Preset	Tile	Text	Icon
Default	background-color: #f0f0f0	color: #333 font-size: 1.1rem*	color: #333 font-size: 4rem
Preset 1	background-color: #767676	color: #fff font-size: 1.1.rem	color: #fff font-size: 4rem
Preset 2	background-color: #a7a9ab	color: #fff font-size: 1.1.rem	color: #fff font-size: 4rem
Preset 3	background-color: #a7b6c2	color: #fff font-size: 1.1.rem	color: #fff font-size: 4rem
Preset 4	background-color: #a7b6c2	color: #fff font-size: 1.1.rem	color: #fff font-size: 4rem
Preset 5	background-color: #cfdfec	color: #666 font-size: 1.1.rem	color: #666 font-size: 4rem

*See https://www.w3schools.com/cssref/css_units.asp

Solution

Add the following CSS and change @background, @color and @size by your desired hex colors and font sizes in px or rem.

Code Block

language	css
title	Stylesheet

/* preset default */
.viabletile.viabletile-preset-default {
    background-color: @background;
}
.viabletile.viabletile-preset-default .viabletile-text {
    color: @color;
    font-size: @size;
}
.viabletile.viabletile-preset-default a.viabletile-content .viabletile-icon {
    color: @color;
    font-size: @size;
}
/* end preset default */

/* preset 1 */
.viabletile.viabletile-preset-1 {
    background-color: @background;
}
.viabletile.viabletile-preset-1 .viabletile-text {
    color: @color;
    font-size: @size;
}
.viabletile.viabletile-preset-1 a.viabletile-content .viabletile-icon {
    color: @color;
    font-size: @size;
}
/* end preset 1 */

/* preset 2 */
.viabletile.viabletile-preset-2 {
    background-color: @background;
}
.viabletile.viabletile-preset-2 .viabletile-text {
    color: @color;
    font-size: @size;
}
.viabletile.viabletile-preset-2 a.viabletile-content .viabletile-icon {
    color: @color;
    font-size: @size;
}
/* end preset 2 */

/* preset 3 */
.viabletile.viabletile-preset-3 {
    background-color: @background;
}
.viabletile.viabletile-preset-3 .viabletile-text {
    color: @color;
    font-size: @size;
}
.viabletile.viabletile-preset-3 a.viabletile-content .viabletile-icon {
    color: @color;
    font-size: @size;
}
/* end preset 3 */

/* preset 4 */
.viabletile.viabletile-preset-4 {
    background-color: @background;
}
.viabletile.viabletile-preset-4 .viabletile-text {
    color: @color;
    font-size: @size;
}
.viabletile.viabletile-preset-4 a.viabletile-content .viabletile-icon {
    color: @color;
    font-size: @size;
}
/* end preset 4 */

/* preset 5 */
.viabletile.viabletile-preset-5 {
    background-color: @background;
}
.viabletile.viabletile-preset-5 .viabletile-text {
    color: @color;
    font-size: @size;
}
.viabletile.viabletile-preset-5 a.viabletile-content .viabletile-icon {
    color: @color;
    font-size: @size;
}
/* end preset 5 */

Example

Expand

Panel

title	Example

Code Block

language	css

/* preset default */
.viabletile.viabletile-preset-default {
    background-color: #0052CC;
}
.viabletile.viabletile-preset-default .viabletile-text {
    color: #fff;
    font-size: 18px;
}
.viabletile.viabletile-preset-default a.viabletile-content .viabletile-icon {
    color: #fff;
    font-size: 1.5rem;
}
/* end preset default */

/* preset 1 */
.viabletile.viabletile-preset-1 {
    background-color: #EBECF0;
}
.viabletile.viabletile-preset-1 .viabletile-text {
    color: #172B4D;
    font-size: 18px;
}
.viabletile.viabletile-preset-1 a.viabletile-content .viabletile-icon {
    color: #172B4D;
    font-size: 1.5rem;
}
/* end preset 1 */

/* preset 2 */
.viabletile.viabletile-preset-2 {
    background-color: #36B37E;
}
.viabletile.viabletile-preset-2 .viabletile-text {
    color: #172B4D;
    font-size: 18px;
}
.viabletile.viabletile-preset-2 a.viabletile-content .viabletile-icon {
    color: #172B4D;
    font-size: 1.5rem;
}
/* end preset 2 */

/* preset 3 */
.viabletile.viabletile-preset-3 {
    background-color: #FFAB00;
}
.viabletile.viabletile-preset-3 .viabletile-text {
    color: #172B4D;
    font-size: 18px;
}
.viabletile.viabletile-preset-3 a.viabletile-content .viabletile-icon {
    color: #172B4D;
    font-size: 1.5rem;
}
/* end preset 3 */

/* preset 4 */
.viabletile.viabletile-preset-4 {
    background-color: #FF5630;
}
.viabletile.viabletile-preset-4 .viabletile-text {
    color: #fff;
    font-size: 18px;
}
.viabletile.viabletile-preset-4 a.viabletile-content .viabletile-icon {
    color: #fff;
    font-size: 1.5rem;
}
/* end preset 4 */

/* preset 5 */
.viabletile.viabletile-preset-5 {
    background-color: #6554C0;
}
.viabletile.viabletile-preset-5 .viabletile-text {
    color: #fff;
    font-size: 18px;
}
.viabletile.viabletile-preset-5 a.viabletile-content .viabletile-icon {
    color: #fff;
    font-size: 1.5rem;
}
/* end preset 5 */

See https://www.atlassian.design/foundations/color/

Versions Compared

Old Version 24

New Version Current

Key

How to customize existing presets

Case

Solution

Example

How to add CSS style sheets on Confluence