FERMATI SUBITO
Questa è una pagina template utilizzata dal sito della Fondazione SCP.
PER FAVORE, NON TOCCARE QUESTA PAGINA
SENZA IL PERMESSO DELLO STAFF
Cos'è questo
Un component che crea dei riquadri che mostrano i colori di un tema CSS.
Creato da Woedenaz e
Croquembouche.
Questo component è pensato per essere usato nelle pagine dei temi CSS, ma può essere usato in quasi ogni pagina se desiderato.
Utilizzo:
Nella pagina desiderata:
[[include :fondazionescp:component:theme-squares -=-
| color1-name=My Favourite Colour
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]
Si noti il "-=-" dopo il nome del component. Esso deve essere incluso — altrimenti tutto questo testo che spiega come si usa il component apparirà nella pagina.
Per questo component vi sono tre parametri per colore. Rimpiazza N col numero del colore
For this component, there are three parameters per color. Replace N with the number of the color.
Un colore può essere usato solo se è esposto come variabile CSS. Tutti i colori in un tema Black Highlighter hanno una variabile CSS corrispondente di default, quindi per i temi BHL il component dovrebbe funzionare immediatamente. Tuttavia, il tema Sigma9 non usa variabili CSS, per cui le uniche variabili CSS disponibili sono quelle definite nel tuo tema.
This component can hold a maximum of 6 primary colors and 12 secondary colors. I recommend two primary colors and no more than six secondary colors.
Per aggiungere un colore primario basta aggiungere le prime tre dei parametri più sopra nell'include, come mostrato nell'esempio.
Per aggiungere un colore secondario il processo è lo stesso, ma rimpiazza 'color' con 'subcolor'.
Esempio
Ecco un esempio più lungo, tratto dal BHL.
[[include :scp-wiki:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]
Questo produce i seguenti riquadri colorati:
Aggiustamenti
Puoi rifinire l'aspetto del component col CSS
L'intero component ha la classe .colors-container e ogni CSS che lo riguarda dovrebbe includere quella classe per assicurarsi che null'altro nella pagina sia affetto. Ogni riquadro colorato ha la classe .color. I colori primari hanno un parent .colors e i colori secondari hanno un parent .subcolor-
Per sovrascrivere lo sfondo di un riquadro serve usare !important.
Per esempio, il tema Laughter and Knives aggiunge un gradiente nello sfondo del nono colore secondario così:
.colors-container .subcolors .color:nth-of-type(9) { background: var(--pastel-rainbow) !important; }
Strumento per convertire sintassi preesistente in argomenti per questo component