Centered Header Sigma

NOTICE:

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

rating: +32+x

Author:
Lt FlopsLt Flops


Forked From:
Penumbra Theme by EstrellaYoshteEstrellaYoshte


Image Attribution:
"logo.svg" by WoedenazWoedenaz.
Licensed under CC BY-SA 3.0.


How to Use:
Click Here

What Is This?


This is a component that introduces a new centered header design to Sigma-10. It is forked from Penumbra Theme by EstrellaYoshteEstrellaYoshte.

I recommend using this component in tandem with Toggle Sidebar.

This component is incompatible with Black Highlighter. Centered Header BHL can be found here.

How to Use


To use this component, please paste the following syntax onto the top of your page. If your page uses a custom Sigma theme, please paste the following syntax after the custom theme:

[[include :scp-wiki:component:centered-header-sigma-9]]

You may alter the header-title, header-subtitle, header-title colour, header-subtitle colour, and header logo as you see fit. Just paste this syntax after the include, then style it accordingly:

[[module CSS]]
:root{
--header-title: "TITLE";
--header-subtitle: "SUBTITLE";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
--lgurl: url(URL_HERE);
}
[[/module]]

The default header-title and header-subtitle font is Montserrat.

If you wish to keep your page's original header-title font, add this code:

#header h1 a::before{
font-family: unset;
}

If you wish to keep your page's original header-subtitle font, add this code:

#header h2::before{
font-family: unset;
}

The default titleColor is
hsl(0, 0%, 95%).
The default subtitleColor is
hsl(60, 62%, 85%).

If you wish to keep the original title colours, you may omit these two fields entirely.

You can also choose to have no logo:

:root{
--lgurl: none;
}

Because this component takes a different approach to designing the header, logo components (like SCP Pride Template, Pride Highlighter, and Calibri's Mega Cool Alternate SCP Logos) won't work here as intended. If you do wish to use logos from one of the pages I just linked, please instead view their "Files" sections, then link the desired logo image directly.

[Optional] Quick-access Toggle Sidebar:

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

Source Code

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