Encabezado Centrado Sigma-9

NO EDITES ESTO ÒwÓ

Esta es una página plantilla utilizada internamente por la Wiki.

NO TOQUES ESTA PÁGINA
SIN PERMISO DEL STAFF Y/O AUTOR

---

Site lafundacionscp does not allow cross-site includes.

Autor:
Lt Flops

---

Bifurcado de:
Tema Penumbra por EstrellaYoshte

---

Atribución de Imágenes:
"logo.svg" por Woedenaz.
Licenciado bajo CC BY-SA 3.0.

---

Como Usar:
Click Aquí

¿Qué es Esto?

---

Este es un componente que introduce un nuevo diseño de cabecera centrado en Sigma-9. Está bifurcado del Tema Penumbra por EstrellaYoshte.

Recomiendo usar este componente en conjunto con la Barra Lateral Alternadora.

Este componente es incompatible con Black Highlighter. La Cabecera Centrada BHL se puede encontrar aquí.

Cómo Utilizarlo

---

Para utilizar este componente, pegue la siguiente sintaxis en la parte superior de su página. Si su página utiliza un tema personalizado de Sigma-9, pegue la siguiente sintaxis después del tema personalizado:

[[include :lafundacionscp:component:centered-header-sigma-9]]

Puede modificar el título de la cabecera, el subtítulo de la cabecera, el color del título de la cabecera, el color del subtítulo de la cabecera y el logotipo de la cabecera como considere oportuno. Sólo tienes que pegar esta sintaxis después del include, y luego darle el estilo adecuado:

[[module CSS]]
:root{
--header-title: "TÍTULO";
--header-subtitle: "SUBTÍTULO";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
--lgurl: url(URL_AQUI);
}
[[/module]]

La fuente por defecto de header-title y header-subtitle es Montserrat.

Si desea mantener la fuente original del header-title de su página, añada este código:

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

Si desea mantener la fuente original del header-subtitle de su página, añada este código:

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

El titleColor por defecto es
hsl(0, 0%, 95%).
El subtitleColor por defecto es
hsl(60, 62%, 85%).

Si desea mantener los colores del título original, puede omitir estos dos campos por completo.

También puede optar por no tener ningún logo:

:root{
--lgurl: none;
}

Dado que este componente adopta un enfoque diferente para el diseño de la cabecera, los componentes del logotipo (como Plantilla del Orgullo SCP, Pride Highlighter, y Los Logos Alternativos Megaguays de SCP de Calibri) no funcionará aquí como se pretende. Si desea utilizar los logos de una de las páginas que acabo de enlazar, por favor, vea la sección "Archivos", y luego enlace la imagen del logo deseado directamente.

[Opcional] Barra lateral de acceso rápido:

[[include :lafundacionscp:component:toggle-sidebar]]

Código Fuente

▷ Mostrar Código ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Encabezado Centrado Sigma-9
 * [2021 Wikidot Component]
 * Por Lt Flops (CC BY-SA 3.0)
 * Bifurcado de:
* Tema Penumbra por EstrellaYoshte
 * También basado en:
   * Encabezado Centrado BHL por Woedenaz
**/
 
/* ---- VARS ---- */
 :root{
     --titleColor: hsl(0, 0%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url(https://lafundacionscp.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg);
}
 
/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 10.55em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "FUNDACIÓN SCP");
}
 
 #header h2::before{
     content: var(--header-subtitle, "SEGURIDAD - CONTENCIÓN - PROTECCIÓN");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 0;
}
 
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;
 
     font-size: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid 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%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @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 .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}