STÁT
Tuto šablonu interně používá SCP Wiki.
Pokud chcete opravit chybu nebo provést jakékoliv změny,
poraďte se nejdříve s jedním z techniků stránky.
Forked From:
Penumbra Theme by EstrellaYoshte EstrellaYoshte
Image Attribution:
"logo.svg" by Woedenaz Woedenaz .
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-9. It is forked from Penumbra Theme by EstrellaYoshte EstrellaYoshte .
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-9 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
@importurl(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /*CenteredHeaderSigma-9*[2021WikidotComponent]*ByLtFlops (CCBY-SA 3.0) *Forked from: *PenumbraThemebyEstrellaYoshte*Alsobased on: *CenteredHeaderBHLbyWoedenaz**/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg); } /* ---- SITEBANNER ---- */ #header, div#header{background-image:none; }#header::before{position:absolute; width:100%; height:100%; content: ""; background-image: var(--lgurl); background-position:centertop; background-repeat:no-repeat; background-size:auto10.55em; opacity:.33; }#headerh1, #headerh2{float:none; margin-left:0; text-align:center; }#headerh1span, #headerh2span{ /*HidetheExistingText*/ display:none; }#headerh1a::before, #headerh2::before{ /*StyletheNewText*/ font-family: "Montserrat", "Arial", sans-serif; text-shadow:none; }#headerh1a::before{position:relative; bottom:.15em; color: var(--titleColor); font-size:115%; font-weight:700; }#headerh2::before{position:relative; top:.1em; color: var(--subtitleColor); font-size:130%; font-weight:600; }#headerh1a::before{ /*SettheNewText'sContentFromVariable*/ content: var(--header-title, "SCP NADACE"); }#headerh2::before{content: var(--header-subtitle, "ZAJISTIT - ZADRŽET - CHRÁNIT"); } /* ---- SEARCH ---- */ #search-top-box{top:1em; right:0; }#search-top-box-forminput.button{margin-right:0; }#search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-forminput[type=submit], #search-top-box-forminput[type=submit]:hover, #search-top-box-forminput[type=submit]:focus{border-radius:0; box-shadow:none; font-size:100%; } /* ---- TOPBAR ---- */ #top-bar{right:0; display: flex; justify-content:center; }#top-barulliul{border-bottom:1pxsolid hsl(0, 0%, 40%); box-shadow:none; } /* ---- LOGIN ---- */ #login-status{top:1.1em; right: initial; color: hsl(0, 0%, 87%); }#account-topbutton{border-color: hsl(0, 0%, 87%); font-size:100%; } /* ---- PAGETITLE ---- */ .meta-title, #page-title{text-align:center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{text-align:center; } /* ---- MOBILEDISPLAY ---- */ @media (max-width: 767px){#search-top-box{top:1.85em; width: unset; }.mobile-top-bar{position:relative; left:0; display: flex; justify-content:center; }#login-status{top:0; right:0; }#header.printuser{font-size:0; }#header.printuserimg.small{margin:0; transform: translate(6px, 4px); }#my-account{display:none; }#account-topbutton{margin-left:2px; }}