Mega Cool Customizable ACS Add-On Guide

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

rating: +25+x

What is this?

This is an add-on to the 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 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 Black1 ( ): 12,12,12
  • Declassified Gray2 ( ): 66,66,72
  • Unrestricted Green3 ( ): 0,159,107
  • Restricted Blue4 ( ): 0,135,189
  • Confidential Yellow5 ( ): 255,211,0
  • Secret Orange6 ( ): 255,109,0
  • Top-Secret Red7 ( ): 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:

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


Custom Disruption Class

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

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


Custom Risk Class

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

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


Custom Containment Class (With Neutralized Class Layout)

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

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


Custom Containment Class (With Esoteric Class Layout)

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

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

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

[[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]]

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.


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 PepperGhost's ACS Splitter.

To use it, input the following code:

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


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:

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

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


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:

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

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.


Pride Clearance Bars

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

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

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.


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:

[[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 = --]]]


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:

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

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.


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:

[[include :scp-wiki:component:customizable-acs
|category-count= 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= First category color, in RGB code
|class-category-1= First category name
|class-text-1= First category text
|class-icon-1= First category icon (optional)
|class-color-2= Second category color, in RGB code
|class-category-2= Second category name
|class-text-2= Second category text
|class-icon-2= Second category icon (optional)
|class-color-3= Third category color, in RGB code
|class-category-3= Third category name
|class-text-3= Third category text
|class-icon-3= Third category icon (optional)
|class-color-4= Fourth category color, in RGB code
|class-category-4= Fourth category name
|class-text-4= Fourth category text
|class-icon-4= Fourth category icon (optional)
|inc-extra-categories= --]]]

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.


Custom Text

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:

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

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


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License