Mega Cool Customizable ACS Add-On Ver. 1.8.0 Guide

Link to article: Mega Cool Customizable ACS Add-On Ver. 1.8.0 Guide.

#page-title,
.meta-title {
     display: initial!important;
}

.anom-bar-container.clear-6 .anom-bar > .top-box {
    -ms-grid-columns: auto 1fr calc(5vw + 8rem);
    grid-template-columns: auto 1fr -webkit-calc(5vw + 8rem);
    grid-template-columns: auto 1fr -moz-calc(5vw + 8rem);
    grid-template-columns: auto 1fr calc(5vw + 8rem);
    padding-bottom: 1.15em;
}

.anom-bar-container.clear-6 .anom-bar .top-center-box > div {
    background-color: rgb(133, 0, 5);
    background-color: rgb(var(--swatch-primary, 133, 0, 5));
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/galactic.jpg")!important;
    background-attachment: fixed;
    background-size: contain;
    background-blend-mode: overlay!important;
}

body .pride-clearance-example .anom-bar-container.clear-6 .top-center-box > div {
    background: linear-gradient(90deg, #fcf431, #fcfcfc, #9d59d2, #282828)!important;
    background-size: 100%;
}

body .accent-example .anom-bar > .bottom-box {
    -webkit-box-shadow: 0 -0.5rem 0 0 rgb(0,135,189);
       -moz-box-shadow: 0 -0.5rem 0 0 rgb(0,135,189);
     box-shadow: 0 -0.5rem 0 0 rgb(0,135,189);
}

body .accent-example .text-part > .main-class::before {
    border: 0.25rem solid rgb(80,0,0);
}

body .accent-example .anom-bar-container.esoteric .text-part > .main-class::before {
    top: 0.5rem;
    right: 1.25rem;
    width: 5rem;
    -webkit-border-radius: -webkit-calc(3.53125rem / 2);
       -moz-border-radius: -moz-calc(3.53125rem / 2);
     border-radius: calc(3.53125rem / 2);
    background-color: rgb(3, 3, 3);
    border-color: rgb(80,0,0);
    -webkit-filter: invert(0);
     filter: invert(0);
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Acustomizable-acs/esoteric-icon.svg");
    -webkit-background-size: 75% 75%;
       -moz-background-size: 75% 75%;
     -o-background-size: 75% 75%;
     background-size: 75% 75%;
    background-repeat: no-repeat;
    background-position: left -10px center;
    background-clip: border-box;
}

body .accent-example .anom-bar-container.esoteric .text-part > .main-class::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 0.25rem;
    width: 3.53125rem;
    height: 3.53125rem;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
     border-radius: 50%;
    border: 0.25rem solid rgb(80,0,0);
    -webkit-background-size: contain;
       -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;
    background-position: center center;
}

body .accent-example .text-part .disrupt-class::after,
body .accent-example .text-part .risk-class::after,
body .accent-example .text-part .disrupt-class::before,
body .accent-example .text-part .risk-class::before {
    content: "";
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
     border-radius: 50%;
    border: 0.25rem solid rgb(80,0,0);
    width: 2.5rem;
    height: 2.5rem;
    top: -webkit-calc(50% - 1.5rem);
    top: -moz-calc(50% - 1.5rem);
    top: calc(50% - 1.5rem);
    font-size: 2em;
    background-color: rgb(252, 252, 252);
    background-color: rgb(var(--swatch-background, 252, 252, 252));
    -webkit-background-size: contain;
       -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;
    background-position: center center;
}

body .accent-example .text-part .disrupt-class::before,
body .accent-example .text-part .risk-class::before {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
    background-color: rgb(80,0,0);
    width: 3rem;
    height: 3rem;
    top: -webkit-calc(50% - 1.5rem);
    top: -moz-calc(50% - 1.5rem);
    top: calc(50% - 1.5rem);
    border: 0;
    right: 1rem;
    text-align: left;
    font-size: 1em;
    padding-left: 0.5rem;
    color: rgb(252, 252, 252);
    color: rgb(var(--swatch-text-secondary-color, 252, 252, 252));
}

body .accent-example .bottom-box > .diamond-part {
    -webkit-box-shadow: -0.5rem 0 0 0 rgb(0,135,189);
       -moz-box-shadow: -0.5rem 0 0 0 rgb(0,135,189);
     box-shadow: -0.5rem 0 0 0 rgb(0,135,189);
}

body .accent-example .danger-diamond > .arrows {
    background-color: rgb(0,135,189);
}

body .accent-example .danger-diamond > .top-icon,
body .accent-example .danger-diamond > .right-icon,
body .accent-example .danger-diamond > .left-icon,
body .accent-example .danger-diamond > .bottom-icon {
    border: 0.1875rem solid rgb(80,0,0);
}

body .accent-example .anom-bar-container .text-part .disrupt-class::before,
body .accent-example .anom-bar-container .text-part .risk-class::before {
    color: rgb(212,175,55)!important;
}

body .pride-accent-example .anom-bar > .bottom-box {
    -webkit-box-shadow: 0 -0.5rem 0 0 rgba(0,255,0,0)!important;
       -moz-box-shadow: 0 -0.5rem 0 0 rgba(0,255,0,0)!important;
     box-shadow: 0 -0.5rem 0 0 rgba(0,255,0,0)!important;
     background-position: center 0rem;
     background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787)!important;
     background-repeat: no-repeat!important;
     background-size: 100% 0.5rem!important;
     padding-top: 0.8rem;
}

body .pride-accent-example .anom-bar > .top-box {
    padding-bottom: 0.5rem;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

body .font-example .anom-bar-container,
body .font-example .anom-bar-container * {
    font-family: 'Josefin Sans'!important;
}

.custom-text-wrap .anom-bar-container.clear-3 .top-right-box > .clearance::before {
    content: ""!important;
}


#page-content .secret-collapsible .collapsible-block-folded .collapsible-block-link {
    opacity: 0;
}

```
color:rgb(12,12,12);
```
```
color:rgb(66,66,72);
```
```
color:rgb(0,159,107);
```
```
color:rgb(0,135,189);
```
```
color:rgb(255,211,0);
```
```
color:rgb(255,109,0);
```
```
color:rgb(196,2,51);
```

```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
anom-bar-esoteric
```
```
blockquote
```
```
anom-bar-esoteric
```
```
anom-bar-esoteric
```
```
blockquote
```
```
anom-bar-esoteric
```
```
blockquote
```
```
anom-bar-esoteric
```
```
blockquote
```
```
anom-bar-esoteric
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
pride-clearance-example
```
```
blockquote
```
```
blockquote
```
```
accent-example
```
```
blockquote
```
```
blockquote
```
```
pride-accent-example
```
```
blockquote
```
```
blockquote
```
```
font-example
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
custom-text-wrap
```
```
blockquote
```
```
secret-collapsible
```
```
blockquote
```
```
blockquote
```

[[include :scp-wiki:theme:black-highlighter-theme]]

[[module CSS]]
#page-title,
.meta-title {
     display: initial!important;
}

.anom-bar-container.clear-6 .anom-bar > .top-box {
    -ms-grid-columns: auto 1fr calc(5vw + 8rem);
    grid-template-columns: auto 1fr -webkit-calc(5vw + 8rem);
    grid-template-columns: auto 1fr -moz-calc(5vw + 8rem);
    grid-template-columns: auto 1fr calc(5vw + 8rem);
    padding-bottom: 1.15em;
}

.anom-bar-container.clear-6 .anom-bar .top-center-box > div {
    background-color: rgb(133, 0, 5);
    background-color: rgb(var(--swatch-primary, 133, 0, 5));
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/galactic.jpg")!important;
    background-attachment: fixed;
    background-size: contain;
    background-blend-mode: overlay!important;
}
[[/module]]

[[>]]
[[module Rate]]
[[/>]]

[[include :scp-wiki:component:author-label-source start=--
|name=Calibold
|no-right-margin=*]]
[[=]]
[[module ListPages range="."]]
**%%title%%**
[[/module]]

**[[[Calibri Bold's Mega Cool Author Page|Calibold's Mega Cool Author Page]]]**
[[/=]]
[[include :scp-wiki:component:author-label-source end=--]]

+ What is this?

This is an add-on to the [[[component:anomaly-class-bar|Anomaly Class Bar]]] that allows authors to customize it beyond what is normally supported.

+ How do I use it?

There are a few main main subcomponents that can be implemented here. Each of these can be used independent of one another, depending on what you need.

In order for this component to work, you must first insert the [[[component:anomaly-class-bar|Anomaly Class Bar]]] into your page. Fill out all of the relevant fields in the ACS header before moving on. This includes implementing your custom classes onto the ACS bar itself.

Next, implement whichever of the below components in the Subcomponents List is relevant. All text in blue is to be replaced by the relevant inputs.

+++ Color Guide

The default ACS component uses some specific colors for particular classes. Below is a list of the default colors used in ACS, with their RGB values.

* Pending Black[[footnote]]Color for Pending and Explained.[[/footnote]] ( [[span style="color:rgb(12,12,12);"]]█[[/span]] ): 12,12,12
* Declassified Gray[[footnote]]Color for Neutralized and Esoteric.[[/footnote]] ( [[span style="color:rgb(66,66,72);"]]█[[/span]] ): 66,66,72
* Unrestricted Green[[footnote]]Color for Safe, Dark, and Notice.[[/footnote]] ( [[span style="color:rgb(0,159,107);"]]█[[/span]] ): 0,159,107
* Restricted Blue[[footnote]]Color for Vlam and Caution.[[/footnote]] ( [[span style="color:rgb(0,135,189);"]]█[[/span]] ): 0,135,189
* Confidential Yellow[[footnote]]Color for Euclid, Keneq, and Warning.[[/footnote]] ( [[span style="color:rgb(255,211,0);"]]█[[/span]] ): 255,211,0
* Secret Orange[[footnote]]Color for Ekhi and Danger.[[/footnote]] ( [[span style="color:rgb(255,109,0);"]]█[[/span]] ): 255,109,0
* Top-Secret Red[[footnote]]Color for Keter, Amida, and Critical.[[/footnote]] ( [[span style="color:rgb(196,2,51);"]]█[[/span]] ): 196,2,51

+++ Manipulating Standard Classes

Because of how ACS works, certain bugs can arise when attempting to use normal classes in abnromal ways with this component. When using a standardized class in an unusual way, place this empty character: (　) directly after the class. For example, if I wanted to put Keter in the risk class field (for whatever inane reason), I would fill the risk class variable with {{keter　}}, like so: {{|risk-class= keter　}}.

+ Subcomponent List

+++ Custom Containment Class

To implement a custom containment class, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= ##blue|Containment class name##}}
{{|containment-image= ##blue|Containment class icon##}}
{{|containment-color= ##blue|Containment class color, in RGB code##}}
{{|inc-containment = @@--@@]]]}}

[[/div]]

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|containment-class= kušum
|containment-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Ku%C5%A1um.svg
|containment-color= 88,0,188
|inc-containment = --]]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 5
|container-class= kušum
|secondary-class= none
|disruption-class= keneq
|risk-class= critical
]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= kušum}}
{{|containment-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Ku%C5%A1um.svg}}
{{|containment-color= 88,0,188}}
{{|inc-containment = @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 5}}
{{|container-class= kušum}}
{{|secondary-class= none}}
{{|disruption-class= keneq}}
{{|risk-class= critical}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Disruption Class

To implement a custom disruption class, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|disruption-class= ##blue|Disruption class name##}}
{{|disruption-image= ##blue|Disruption class icon##}}
{{|disruption-color= ##blue|Disruption class color, in RGB code##}}
{{|inc-disruption= @@--@@]]]}}

[[/div]]

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|disruption-class= gevurah
|disruption-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Gevurah.svg
|disruption-color= 215,6,111
|inc-disruption= --]]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 3
|container-class= euclid
|secondary-class= none
|disruption-class= gevurah
|risk-class= notice
]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|disruption-class= gevurah}}
{{|disruption-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Gevurah.svg}}
{{|disruption-color= 215,6,111}}
{{|inc-disruption= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 3}}
{{|container-class= euclid}}
{{|secondary-class= none}}
{{|disruption-class= gevurah}}
{{|risk-class= notice}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Risk Class

To implement a custom risk class, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|risk-class= ##blue|Risk class name##}}
{{|risk-image= ##blue|Risk class icon##}}
{{|risk-color= ##blue|Risk class color, in RGB code##}}
{{|inc-risk= @@--@@]]]}}

[[/div]]

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|risk-class= yggdrasil
|risk-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Yggdrasil.svg
|risk-color= 0,0,255
|inc-risk= --]]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 6
|container-class= esoteric
|secondary-class= apollyon
|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/apollyon-icon.svg
|disruption-class= amida
|risk-class= yggdrasil
]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|risk-class= yggdrasil}}
{{|risk-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Yggdrasil.svg}}
{{|risk-color= 0,0,255}}
{{|inc-risk= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 6}}
{{|container-class= esoteric}}
{{|secondary-class= apollyon}}
{{|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/apollyon-icon.svg}}
{{|disruption-class= amida}}
{{|risk-class= yggdrasil}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Containment Class (With Neutralized Class Layout)

To implement a custom containment class using the neutralized class layout, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= ##blue|Containment class name##}}
{{|containment-image= ##blue|Containment class icon##}}
{{|containment-color= ##blue|Containment class color, in RGB code##}}
{{|inc-neutralized-layout = @@--@@]]]}}

[[/div]]

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|containment-class= decommissioned
|containment-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Decommissioned.svg
|containment-color= 66,66,72
|inc-neutralized-layout = --]]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 1
|container-class= decommissioned
|secondary-class= none
|disruption-class= none
|risk-class= none
]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= decommissioned}}
{{|containment-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Decommissioned.svg}}
{{|containment-color= 66,66,72}}
{{|inc-neutralized-layout = @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 1}}
{{|container-class= decommissioned}}
{{|secondary-class= none}}
{{|disruption-class= none}}
{{|risk-class= none}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Containment Class (With Esoteric Class Layout)

To implement a custom containment class using the esoteric class layout, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= ##blue|Containment class name##}}
{{|containment-image= ##blue|Containment class icon##}}
{{|containment-color= ##blue|Containment class color, in RGB code##}}
{{|inc-esoteric-layout = @@--@@]]]}}

[[/div]]

In order for this to be applied, the ACS component must also be wrapped in {{@@[[div class="anom-bar-esoteric"]]@@}}, like so:

[[div class="blockquote"]]

{{@@[[div class="anom-bar-esoteric"]]@@}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number=}}
{{|clearance=}}
{{|container-class=}}
{{|secondary-class=}}
{{|secondary-icon=}}
{{|disruption-class=}}
{{|risk-class=}}
{{]]}}

{{@@[[/div]]@@}}

[[/div]]

This is so that the same object class can be applied in a separate ACS component on the same page, without it trying to display the esoteric class formatting. If you want it to display like normal, simply don't wrap it in the above div.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|containment-class= keter
|containment-image= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg
|containment-color= 196,2,51
|inc-esoteric-layout = --]]]

[[div class="anom-bar-esoteric"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 3
|container-class= keter
|secondary-class= cernunnos
|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/cernunnos-icon.svg
|disruption-class= vlam
|risk-class= danger
]]

[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= keter}}
{{|containment-image= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg}}
{{|containment-color= 196,2,51}}
{{|inc-esoteric-layout = @@--@@]]]}}

{{@@[[div class="anom-bar-esoteric"]]@@}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 3}}
{{|container-class= keter}}
{{|secondary-class= cernunnos}}
{{|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/cernunnos-icon.svg}}
{{|disruption-class= vlam}}
{{|risk-class= danger}}
{{]]}}

{{@@[[/div]]@@}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Split Class Coloring

**Note:** This subcomponent is intended to be used with the Esoteric Class Layout subcomponent directly above.

This subcomponent assigns a color to a secondary class, and also allows for the containment class section to include a background that splits between the containment and secondary class colors. For a similar component, see [[[Component:ACS Peppo Split|PepperGhost's ACS Splitter]]].

To use it, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= ##blue|Containment class name##}}
{{|containment-color= ##blue|Containment class color, in RGB code##}}
{{|secondary-class= ##blue|Secondary class name##}}
{{|secondary-color= ##blue|Secondary class color, in RGB code##}}
{{|inc-split-color= @@--@@]]]}}

[[/div]]

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|containment-class= euclid
|containment-color= 255,211,0
|secondary-class= archon
|secondary-color= 60,179,113
|inc-split-color= --]]]

[[include :scp-wiki:component:customizable-acs
|containment-class= euclid
|containment-image= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/euclid-icon.svg
|containment-color= 255,211,0
|inc-esoteric-layout = --]]]

[[div class="anom-bar-esoteric"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 5
|container-class= euclid
|secondary-class= archon
|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/archon-icon.svg
|disruption-class= amida
|risk-class= caution
]]

[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= euclid}}
{{|containment-color= 255,211,0}}
{{|secondary-class= archon}}
{{|secondary-color= 60,179,113}}
{{|inc-split-color= @@--@@]]]}}

{{[[include :scp-wiki:component:customizable-acs}}
{{|containment-class= euclid}}
{{|containment-image= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/euclid-icon.svg}}
{{|containment-color= 255,211,0}}
{{|inc-esoteric-layout = @@--@@]]]}}

{{@@[[div class="anom-bar-esoteric"]]@@}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 5}}
{{|container-class= euclid}}
{{|secondary-class= archon}}
{{|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/archon-icon.svg}}
{{|disruption-class= amida}}
{{|risk-class= caution}}
{{]]}}

{{@@[[/div]]@@}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Clearance Bar Colors

You can also use this component to change the colors of the clearance level bars! To do so, input the following code, inputting the custom color into the relevant clearance level:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|clearance-six= ##blue|Clearance bar level 6 color, in RGB code##}}
{{|clearance-five= ##blue|Clearance bar level 5 color, in RGB code##}}
{{|clearance-four= ##blue|Clearance bar level 4 color, in RGB code##}}
{{|clearance-three= ##blue|Clearance bar level 3 color, in RGB code##}}
{{|clearance-two= ##blue|Clearance bar level 2 color, in RGB code##}}
{{|clearance-one= ##blue|Clearance bar level 1 color, in RGB code##}}
{{|inc-clearance= @@--@@]]]}}

[[/div]]

Note that you do not need to fill every field here, only the ones with the relevant clearance levels.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|clearance-two= 255,192,203
|inc-clearance= --]]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 2
|container-class= safe
|secondary-class= none
|disruption-class= ekhi
|risk-class= caution
]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|clearance-two= 255,192,203}}
{{|inc-clearance= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 2}}
{{|container-class= safe}}
{{|secondary-class= none}}
{{|disruption-class= ekhi}}
{{|risk-class= caution}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Clearance Bar Images

This subcomponent also changes the clearance bar, but this time it allows for the bars to display a background image in a manner similar to the default settings for the Level 6 clearance. To do so, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|clearance-six-image= ##blue|Clearance bar level 6 image##}}
{{|clearance-five-image= ##blue|Clearance bar level 5 image##}}
{{|clearance-four-image= ##blue|Clearance bar level 4 image##}}
{{|clearance-three-image= ##blue|Clearance bar level 3 image##}}
{{|clearance-two-image= ##blue|Clearance bar level 2 image##}}
{{|clearance-one-image= ##blue|Clearance bar level 1 image##}}
{{|inc-clearance-image= @@--@@]]]}}

[[/div]]

As with the custom clearance bar colors above, you do not need to fill every field here, only the ones with the relevant clearance levels.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:customizable-acs
|clearance-four-image= https://scp-wiki.wdfiles.com/local--files/scp-4456/I%20ship%20it
|clearance-six-image= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/galactic.jpg
|inc-clearance-image= --]]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 4
|container-class= keter
|secondary-class= none
|disruption-class= dark
|risk-class= warning
]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|clearance-four-image= https://scp-wiki.wdfiles.com/local--files/scp-4456/I%20ship%20it}}
{{|inc-clearance-image= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 4}}
{{|container-class= keter}}
{{|secondary-class= none}}
{{|disruption-class= dark}}
{{|risk-class= warning}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Pride Clearance Bars

This subcomponent allows users to change their clearance bars to pride colors with the code below:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|inc-##blue|trans/lgbt/bi/pan/nb##-clearance = @@--@@]]]}}

[[/div]]

You must select exactly one variable from the list in blue above, and it will assign its respective pride flag colors to the clearance bars.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[module CSS]]
body .pride-clearance-example .anom-bar-container.clear-6 .top-center-box > div {
    background: linear-gradient(90deg, #fcf431, #fcfcfc, #9d59d2, #282828)!important;
    background-size: 100%;
}
[[/module]]

[[div_ class="pride-clearance-example"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 6
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= danger
]]

[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|inc-nb-clearance= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 6}}
{{|container-class= euclid}}
{{|secondary-class= none}}
{{|disruption-class= vlam}}
{{|risk-class= danger}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Colored Accents

This subcomponent allows miscellaneous other parts of the ACS header to be colored. This can change the colors of the dividing bars, the danger diamond arrows, and the icon borders. To do so, implement the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|accent-one= #blue|Dividing bar and danger diamond colors, in RGB code#}}
{{|accent-two= #blue|Icon border colors, in RGB code#}}
{{|class-number-color= #blue|Colors of the numbers next to the Risk and Disruption class icons, in RGB code#}}
{{|inc-color-accent = @@--@@]]]}}

[[/div]]

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[module CSS]]
body .accent-example .anom-bar > .bottom-box {
    -webkit-box-shadow: 0 -0.5rem 0 0 rgb(0,135,189);
       -moz-box-shadow: 0 -0.5rem 0 0 rgb(0,135,189);
     box-shadow: 0 -0.5rem 0 0 rgb(0,135,189);
}

body .accent-example .text-part > .main-class::before {
    border: 0.25rem solid rgb(80,0,0);
}

body .accent-example .anom-bar-container.esoteric .text-part > .main-class::before {
    top: 0.5rem;
    right: 1.25rem;
    width: 5rem;
    -webkit-border-radius: -webkit-calc(3.53125rem / 2);
       -moz-border-radius: -moz-calc(3.53125rem / 2);
     border-radius: calc(3.53125rem / 2);
    background-color: rgb(3, 3, 3);
    border-color: rgb(80,0,0);
    -webkit-filter: invert(0);
     filter: invert(0);
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Acustomizable-acs/esoteric-icon.svg");
    -webkit-background-size: 75% 75%;
       -moz-background-size: 75% 75%;
     -o-background-size: 75% 75%;
     background-size: 75% 75%;
    background-repeat: no-repeat;
    background-position: left -10px center;
    background-clip: border-box;
}

body .accent-example .anom-bar-container.esoteric .text-part > .main-class::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 0.25rem;
    width: 3.53125rem;
    height: 3.53125rem;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
     border-radius: 50%;
    border: 0.25rem solid rgb(80,0,0);
    -webkit-background-size: contain;
       -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;
    background-position: center center;
}

body .accent-example .text-part .disrupt-class::after,
body .accent-example .text-part .risk-class::after,
body .accent-example .text-part .disrupt-class::before,
body .accent-example .text-part .risk-class::before {
    content: "";
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
     border-radius: 50%;
    border: 0.25rem solid rgb(80,0,0);
    width: 2.5rem;
    height: 2.5rem;
    top: -webkit-calc(50% - 1.5rem);
    top: -moz-calc(50% - 1.5rem);
    top: calc(50% - 1.5rem);
    font-size: 2em;
    background-color: rgb(252, 252, 252);
    background-color: rgb(var(--swatch-background, 252, 252, 252));
    -webkit-background-size: contain;
       -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;
    background-position: center center;
}

body .accent-example .text-part .disrupt-class::before,
body .accent-example .text-part .risk-class::before {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
    background-color: rgb(80,0,0);
    width: 3rem;
    height: 3rem;
    top: -webkit-calc(50% - 1.5rem);
    top: -moz-calc(50% - 1.5rem);
    top: calc(50% - 1.5rem);
    border: 0;
    right: 1rem;
    text-align: left;
    font-size: 1em;
    padding-left: 0.5rem;
    color: rgb(252, 252, 252);
    color: rgb(var(--swatch-text-secondary-color, 252, 252, 252));
}

body .accent-example .bottom-box > .diamond-part {
    -webkit-box-shadow: -0.5rem 0 0 0 rgb(0,135,189);
       -moz-box-shadow: -0.5rem 0 0 0 rgb(0,135,189);
     box-shadow: -0.5rem 0 0 0 rgb(0,135,189);
}

body .accent-example .danger-diamond > .arrows {
    background-color: rgb(0,135,189);
}

body .accent-example .danger-diamond > .top-icon,
body .accent-example .danger-diamond > .right-icon,
body .accent-example .danger-diamond > .left-icon,
body .accent-example .danger-diamond > .bottom-icon {
    border: 0.1875rem solid rgb(80,0,0);
}

body .accent-example .anom-bar-container .text-part .disrupt-class::before,
body .accent-example .anom-bar-container .text-part .risk-class::before {
    color: rgb(212,175,55)!important;
}
[[/module]]

[[div_ class="accent-example"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 1
|container-class= safe
|secondary-class= none
|disruption-class= amida
|risk-class= caution
]]

[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|accent-one= 0,135,189}}
{{|accent-two= 80,0,0}}
{{|class-number-color= 212,175,55}}
{{|inc-color-accent = @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 1}}
{{|container-class= safe}}
{{|secondary-class= none}}
{{|disruption-class= amida}}
{{|risk-class= caution}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Pride Accents

This subcomponent turns the main horizontal bar into a pride gradient! This //only// changes the horizontal bar, and it is compatible with the Colored Accents subcomponent. To implement this, use the code below:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|inc-##blue|trans/lgbt/bi/pan/nb##-accent = @@--@@]]]}}

[[/div]]

You must select exactly one variable from the list in blue above, and it will assign its respective pride flag colors to the horizontal bar.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[module CSS]]
body .pride-accent-example .anom-bar > .bottom-box {
    -webkit-box-shadow: 0 -0.5rem 0 0 rgba(0,255,0,0)!important;
       -moz-box-shadow: 0 -0.5rem 0 0 rgba(0,255,0,0)!important;
     box-shadow: 0 -0.5rem 0 0 rgba(0,255,0,0)!important;
     background-position: center 0rem;
     background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787)!important;
     background-repeat: no-repeat!important;
     background-size: 100% 0.5rem!important;
     padding-top: 0.8rem;
}

body .pride-accent-example .anom-bar > .top-box {
    padding-bottom: 0.5rem;
}
[[/module]]

[[div_ class="pride-accent-example"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 5
|container-class= pending
|secondary-class= none
|disruption-class= none
|risk-class= none
]]

[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|inc-lgbt-accent= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 5}}
{{|container-class= pending}}
{{|secondary-class= none}}
{{|disruption-class= none}}
{{|risk-class= none}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Fonts

This subcomponent sets a custom font into the ACS header. To implement this, use the code below:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|font-import= ##blue|Import code for the font}}
{{|font-name= ##blue|Name of the font}}
{{|inc-custom-font= @@--@@]]]}}

[[/div]]

The import code is the full code line to import the font; most font websites, such as Google Fonts, will provide the proper import code line. For instance, this is what you would apply to the {{font-import}} variable to import the Roboto Slab font:

> {{|font-import= @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');}}

The {{font-name}} variable is simply the actual name of the font, i.e. "Roboto Slab".  Be sure all fonts you use are compatible with the site's license, CC-by-SA 3.0.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

body .font-example .anom-bar-container,
body .font-example .anom-bar-container * {
    font-family: 'Josefin Sans'!important;
}
[[/module]]

[[div_ class="font-example"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 3
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= danger
]]

[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|font-import= @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');}}
{{|font-name= Josefin Sans}}
{{|inc-custom-font= @@--@@]]]}}

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 3}}
{{|container-class= euclid}}
{{|secondary-class= none}}
{{|disruption-class= vlam}}
{{|risk-class= danger}}
{{]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Additional ACS Category Sections

This subcomponent allows you to implement additional ACS classes beneath the ACS header. To implement this, paste the following code where you'd like the additional sections to appear:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|category-count= ##blue|Number of additional categories you'd like to add with this component, with a minimum of 1 and a maximum of 4##}}
{{|class-color-1= ##blue|First category color, in RGB code##}}
{{|class-category-1= ##blue|First category name##}}
{{|class-text-1= ##blue|First category text##}}
{{|class-icon-1= ##blue|First category icon (optional)##}}
{{|class-color-2= ##blue|Second category color, in RGB code##}}
{{|class-category-2= ##blue|Second category name##}}
{{|class-text-2= ##blue|Second category text##}}
{{|class-icon-2= ##blue|Second category icon (optional)##}}
{{|class-color-3= ##blue|Third category color, in RGB code##}}
{{|class-category-3= ##blue|Third category name##}}
{{|class-text-3= ##blue|Third category text##}}
{{|class-icon-3= ##blue|Third category icon (optional)##}}
{{|class-color-4= ##blue|Fourth category color, in RGB code##}}
{{|class-category-4= ##blue|Fourth category name##}}
{{|class-text-4= ##blue|Fourth category text##}}
{{|class-icon-4= ##blue|Fourth category icon (optional)##}}
{{|inc-extra-categories= @@--@@]]]}}

[[/div]]

If the number of additional categories is less than 4, then only the lowest-numbered categories will be displayed; for example, if you are adding two categories, then categories 1 and 2 will be displayed, but not 3 and 4. Additionally, if you need more than four extra categories, or would like the new categories to occupy different-sized areas, then you can implement this component more than once.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 0000
|clearance= 6
|container-class= esoteric
|secondary-class= ticonderoga
|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/ticonderoga-icon.svg
|disruption-class= ekhi
|risk-class= notice
]]

[[include :scp-wiki:component:customizable-acs
|category-count= 2
|class-color-1= 0,135,189
|class-category-1= object type:
|class-text-1= temporal
|class-icon-1= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png
|class-color-2= 66,66,72
|class-category-2= current status:
|class-text-2= decommissioned
|class-icon-2= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Decommissioned.svg
|inc-extra-categories= --]]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:anomaly-class-bar-source}}
{{|item-number= 0000}}
{{|clearance= 6}}
{{|container-class= esoteric}}
{{|secondary-class= ticonderoga}}
{{|secondary-icon= https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/ticonderoga-icon.svg}}
{{|disruption-class= ekhi}}
{{|risk-class= notice}}
{{]]}}

{{[[include :scp-wiki:component:customizable-acs}}
{{|category-count= 2}}
{{|class-color-1= 0,135,189}}
{{|class-category-1= object type:}}
{{|class-text-1= temporal}}
{{|class-icon-1= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png}}
{{|class-color-2= 66,66,72}}
{{|class-category-2= current status:}}
{{|class-text-2= decommissioned}}
{{|class-icon-2= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Decommissioned.svg}}
{{|inc-extra-categories= @@--@@]]]}}

[[/div]]

[[/collapsible]]
@@ @@

+++ Custom Text

##red|Warning:## Do not include the standard ACS component with this subcomponent. Due to the inability to replace text entirely using CSS, this component works by directly importing the ACS component itself, and rewriting parts of the div content.

This subcomponent allows you to replace any part of the ACS component's text (except for sections covered by other parts of this component page). To use it, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|item-number= ##blue|Item number##}}
{{|clearance= ##blue|Clearance level##}}
{{|container-class= ##blue|Containment class##}}
{{|secondary-class= ##blue|Secondary class (optional)##}}
{{|secondary-icon= ##blue|Secondary class icon (optional unless with secondary class)##}}
{{|disruption-class= ##blue|Disruption class##}}
{{|risk-class= ##blue|Risk class##}}
{{|item-text= ##blue|Replaces "ITEM#:" text##}}
{{|level-text= ##blue|Replaces "LEVEL" text##}}
{{|clearance-number-text= ##blue|Replaces level number##}}
{{|clearance-text= ##blue|Replaces clearance name (e.g. "Unrestricted" for Level 2)##}}
{{|containment-text= ##blue|Replaces "CONTAINMENT CLASS:" text##}}
{{|secondary-text= ##blue|Replaces "SECONDARY CLASS:" text##}}
{{|disruption-text= ##blue|Replaces "DISRUPTION CLASS:" text##}}
{{|risk-text= ##blue|Replaces "RISK CLASS:" text##}}
{{|inc-custom-text= @@--@@]]]}}

[[/div]]

All of the above parameters //must// be filled (unless stated to be optional) in order for the component to function.

[[collapsible show="+ Open Example" hide="- Hide Example"]]

[[module CSS]]
.custom-text-wrap .anom-bar-container.clear-3 .top-right-box > .clearance::before {
    content: ""!important;
}
[[/module]]

[[div_ class="custom-text-wrap"]]
[[include :scp-wiki:component:customizable-acs
|item-number= 0000
|clearance= 3
|container-class= euclid
|secondary-class= none
|disruption-class= keneq
|risk-class= warning
|item-text= Yellow#:
|level-text= 🍌🍌
|clearance-number-text= 😂
|clearance-text= Very Yellow
|containment-text= Containment Yellow:
|secondary-text= Secondary Yellow:
|disruption-text= Disruption Yellow:
|risk-text= Risk Yellow:
|inc-custom-text= --]]]
[[/div]]

**Example Code:**

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|item-number= 0000}}
{{|clearance= 3}}
{{|container-class= euclid}}
{{|secondary-class= none}}
{{|disruption-class= keneq}}
{{|risk-class= warning}}
{{|item-text= Yellow#:}}
{{|level-text= 🍌🍌}}
{{|clearance-number-text= 😂}}
{{|clearance-text= Very Yellow}}
{{|containment-text= Containment Yellow:}}
{{|secondary-text= Secondary Yellow:}}
{{|disruption-text= Disruption Yellow:}}
{{|risk-text= Risk Yellow:}}
{{|inc-custom-text= @@--@@]]]}}

[[/div]]

[[/collapsible]]
@@ @@

[[module CSS]]

#page-content .secret-collapsible .collapsible-block-folded .collapsible-block-link {
    opacity: 0;
}

[[/module]]

[[div class="secret-collapsible"]]

[[collapsible show="+ OPEN SECRET COMPONENT AREA?" hide="- DRAMATIC REVEAL!"]]

+++* LEVEL 69 (April Fools 2021)

Do you want to make it clear that your SCP is only for the headest of head honchos? The most exclusive of SCP Foundation personnel? The king of secrets? Then get ready for... LEVEL 69.

To upgrade your ACS header to LEVEL 69, input the following code block wherever you want your ACS header to be. Do not use this in conjunction with the standard ACS tool, this will work on its own.

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|item-number=}}
{{|clearance= 69}}
{{|container-class=}}
{{|secondary-class=}}
{{|disruption-class=}}
{{|risk-class=}}
{{|inc-level-sixty-nine= @@--@@]]]}}

[[/div]]

Of course, you should know what all these variables do. Just input all your fancy object classes and whatnot, and you're good to go. Plus, you can also input any other clearance level in place of the 69 (although why would you even do that?).

One more thing: if you want to change the colors of the clearance bars, input the following code:

[[div class="blockquote"]]

{{[[include :scp-wiki:component:customizable-acs}}
{{|clearance-sixty-nine= ##blue|Clearance bar color, in RGB code##}}
{{|inc-clearance= @@--@@]]]}}

[[/div]]

[[/collapsible]]

[[/div]]

[[footnoteblock]]

[[include :scp-wiki:more-by:calibold]]

Mega Cool Customizable ACS Add-On Ver. 1.8.0 Guide

Module Styles

Inline Styles

Includes

CSS Classes

Page Source