Present Malice Theme
rating: +43+–x
black-highlighter-logo.svg

Theme Colors

Umbrella Red--umbrella-red##8F0000
Barry's Magnum--barry-magnum#E6E6E6
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Light S.T.A.R.S Blue--menu-blue#DCDAEB
Medium S.T.A.R.S Blue--light-stars-blue#525366
S.T.A.R.S Blue--stars-blue#000854
Wesker's Shades--weskers-shades#141414
Itchy. Tasty.--itchy-tasty#7E4026
Chris's Blood--chris-blood#B90000
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
umbrella-scp.png

Signature Care Pharmaceuticals Logo

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.





On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:present-malice]]

This theme also has code for WoedenazWoedenaz's BHL Toggle Sidebar. If you want it removed, simply remove its include above.

centered-pmal.PNG

Alternate Centered Header

This theme has code for WoedenazWoedenaz's BHL Centered Header. If you want to add it, simply add:

[[include :scp-wiki:component:centered-header-bhl |malice=--]]]

after all of the includes above.

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

Just use your imagination and pretend there's `Lorem Ipsum` here.

This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

And another1

This is a table
You should know how to make these
already

The Header font is Anton.
The Title font is Courier Prime.
The Body font is DM Sans.
The "Monospace" font used is Zilla Slab.

[[iftags +component]]

rating: +43+–x

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

[[/iftags]]

[[div [[iftags -component]]style="display: none"[[/iftags]]]]

+ Show component code
/*
   Present Malice Theme
   [2021 Wikidot Theme]
   by JackalRelated
           and greatly inspired by Resident Evil (1996)
 
   Toggle Sidebar BHL by Woedenaz
*/
 
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "present-malice";
   --theme-name: "Present Malice Theme";
 
   --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:present-malice/umbrella-scp.png");
   --header-title: "SCP FOUNDATION";
   --header-subtitle: "SECURE. CONTAIN. PROTECT.";
 
   --body-font: "DM Sans", sans-serif;
   --header-font: "Anton", sans-serif;
   --title-font: "Courier Prime", sans-serif;
   --mono-font: "Zilla Slab", serif;
 
   --umbrella-red: 143, 0, 0;
   --alternate-white: 240, 235, 235;
   --itchy-tasty: 126, 64, 38;
   --stars-blue: 0, 8, 84;
   --light-stars-blue: 82, 83, 102;
   --menu-blue: 220, 218, 235;
   --chris-blood: 185, 0, 0;
   --chris-green: 9, 112, 0;
   --jill-grey: 198, 205, 215;
   --barry-magnum: 230, 230, 230;
   --barry-jacket: 165, 51, 51;
   --weskers-shades: 20, 20, 20;
 
   --white-monochrome: var(--jill-grey);
   --pale-gray-monochrome: var(--barry-magnum);
   --light-gray-monochrome: var(--barry-jacket);
   --gray-monochrome: var(--weskers-shades);
   --dark-gray-monochrome: var(--menu-blue);
   --black-monochrome: var(--weskers-shades);
   --pale-accent: var(--barry-jacket);
   --bright-accent: var(--chris-blood);
   --medium-accent: var(--umbrella-red);
   --dark-accent: var(--itchy-tasty);
 
   --swatch-menubg-color: var(--light-stars-blue);
   --swatch-menutxt-light-color: var(--alternate-white);
   --swatch-menutxt-dark-color: var(--alternate-white);
   --swatch-menubg-medium-color: var(--itchy-tasty);
   --swatch-menubg-medium-dark-color: var(--weksers-shades);
   --swatch-text-light: var(--alternate-white);
 
   --rating-module-color: var(--umbrella-red);
   --rating-module-button-color: var(--light-stars-blue);
   --rating-module-text-color: var(--dark-monochrome);
 
   --swatch-headerh1-color: var(--umbrella-red);
   --swatch-headerh2-color: var(--alternate-white);
   --swatch-topmenu-border-color: var(--weskers-shades);
   --swatch-topmenu-bg-color: var(--weskers-shades);
   --swatch-primary: var(--umbrella-red);
 
   --header-gradient-color-bottom: var(--weskers-shades);
   --header-gradient-color-middle: var(--weskers-shades);
   --header-gradient-color-top: var(--weskers-shades);
   --background-gradient-distance: 0rem;
   --diagonal-stripes: linear-gradient(transparent 0);
 
   --sidebar-transition-timing: 0.8s ease-in-out 0.1s;
 
   --hover-link-color: var(--umbrella-red);
 
   --toggle-button-bg: rgb(var(--weskers-shades));
   --toggle-border-color: rgb(var(--umbrella-red));
   --toggle-icon-color: rgb(var(--barry-magnum));
   --toggle-roundness: 0%;
 
}
 
/* HEADER AND TOPBAR */
#page-title {
  text-align: center;
}
 
#header h1 {
  font-weight: 400;
}
 
#header h1 a::before{
  color: rgb(var(--chris-blood));
}
 
#header h2 {
  text-indent: -0.2em;
}
 
#header-extra-div-1 {
   --drop-shadow: none;
   filter: drop-shadow(0rem 0rem 0rem var(--drop-shadow));
}
 
@media only screen and (max-width: 768px) {
    #header h2 {
        text-indent: 0em;
    }
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li, #top-bar div.top-bar>ul>li>ul>li{
  background: rgb(var(--stars-blue));
} 
 
#top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:hover {
   background: rgb(var(--stars-blue));
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover, #top-bar div.top-bar>ul>li>ul>li:hover {
    background: rgb(var(--umbrella-red));
}
 
#login-status {
   color: rgb(var(--chris-blood));
}
 
#login-status ul a{
   background-color: rgb(var(--weskers-shades));
   color: rgb(var(--chris-blood));
}
 
#account-options {
   background-color: rgb(var(--weskers-shades));
   color: rgb(var(--chris-blood));
}
 
#search-top-box input.empty{
    color: rgb(var(--stars-blue));
    background: rgb(var(--light-stars-blue));
}
 
#search-top-box input{
    background: rgb(var(--stars-blue));
}
 
#search-top-box-input:focus, #search-top-box-input:hover {
    background: rgb(var(--stars-blue));
    color: rgb(var(--alternate-white));
}
 
#search-top-box-form input[type=submit] {
    background: rgb(var(--umbrella-red));
}
 
#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    background: rgb(var(--chris-blood));
}
 
/* MISC. */
.page-rate-widget-box{
  background-color: rgb(var(--alternate-white));
}
 
hr {
   background-color: rgb(0, 0, 0, 0);
}
 
/* SCROLLBAR AND SIDEBAR */
 
html,body {
  scrollbar-color: 
    rgb(var(--umbrella-red)) 
    rgb(var(--weskers-shades));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 18px;
  background: #transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgb(var(--weskers-shades));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgb(var(--umbrella-red));
  border: rgb(var(--weskers-shades)) 1px solid;
  border-radius: 0px;
}
 
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--chris-blood));
}
 
#side-bar .heading {
    background: rgb(var(--umbrella-red));
}
 
#side-bar .side-block.media,
#side-bar .side-block.resources {
    background-color: rgba(var(--stars-blue), .25);
}
 
.owindow .button-bar a{
    background-color: rgb(var(--umbrella-red));
    border: 1px solid rgb(var(--weskers-shades));
}
 
.owindow .button-bar a:hover{
    background-color: rgb(var(--stars-blue));
    border: 1px solid rgb(var(--weskers-shades));
}
 
/* TABLES / TABS(YUINAVS) */
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
   filter: hue-rotate(0deg);
   color: rgb(var(--alternate-white));
}
 
.yui-navset .yui-content {
   background-color: rgb(var(--alternate-white));
   border-color: rgb(var(--weskers-shades));
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    color: rgb(var(--barry-magnum));
}
 
table.wiki-content-table th, table.wiki-content-table tr {
    border: .0625rem solid rgba(var(--menu-blue),.25)!important;
}
 
table.wiki-content-table td {
    border: 1px solid #141414;
}
 
table.wiki-content-table {
    background-color: rgba(var(--menu-blue), .5);
}
 
table.form td div.sub, form div.sub {
    color: rgb(var(--umbrella-red));
}
 
/* FOOTERS AND BELOW */
#footer {
    color: rgb(var(--chris-blood, 66, 66, 72));
    background: rgb(var(--jill-grey, 100, 3, 15));
}
 
.footnotes-footer{
   color: rgb(var(--weskers-shades));
   background-color: rgba(var(--menu-blue), .5);
}
 
div#page-options-bottom-2>a, div#page-options-bottom>a {
   color: rgb(var(--alternate-white));
   background-color: rgb(var(--umbrella-red));
   border: .125rem solid rgba(var(--weskers-shades),1)
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, 
div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
  background-color: rgb(var(--stars-blue));
}
 
.page-source {
    background: rgb(var(--barry-magnum));
}
 
form#edit-page-form {
    background-color: rgba(var(--menu-blue), 1);
}
 
.change-textarea-size a {
    background-color: rgba(var(--chris-green));
}
 
#lock-info, div.note, input.checkbox, input.text, textarea {
    scrollbar-color: rgba(var(--umbrella-red), 1) rgba(var(--weskers-shades), 1);
    border: .0625rem solid rgba(var(--swatch-border-color),.25);
    background-color: rgb(var(--alternate-white));
    color: rgb(var(--swatch-text-general));
    font-family: var(--body-font);
}
 
div.buttons.alignleft>input {
    background-color: rgb(var(--umbrella-red));
}
 
/* TOGGLE SIDEBAR (BHL) CHANGES */
 
    @supports((display: -ms-grid) or (display: grid)) {
       @media only screen and (min-width: 769px) {
           #main-content::before {
               background: rgba(var(--stars-blue), .45) 1px 1px repeat;
           }
        }
    }
 
    #side-bar::-webkit-scrollbar-track,
    #side-bar:hover::-webkit-scrollbar-track {
        background-color: rgba(var(--weskers-shades), 0);
    }
 
    #side-bar::-webkit-scrollbar-thumb {
        background-color: rgb(var(--stars-blue));
    }
 
    #side-bar:hover::-webkit-scrollbar-thumb {
        background-color: rgb(var(--chris-blood));
    } 
}
Footnotes
theme
page revision: 29, last edited: 30 Mar 2021 17:15
Edit Rate (+43) Tags Discuss (11) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License