User:Vaileasys/sandbox: Difference between revisions

Latest revision as of 09:40, 29 March 2024

Wiki maintenance!

The wiki will be undergoing some maintenance while we modify the default theme.
Notice any oddities or want to provide feedback? Let us know on the discussion page or the pzwiki discord channel.

Common.css

/* Mediawiki:Sitenotice */
.sitenotice-card {
    display: flex;
    justify-content: space-between;
    align-items: center
    text-align: center;
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eaecf0;
    width: auto;
}

.sitenotice-card > div {
    display: flex;
    flex-direction: column
}

.sitenotice-card .image-container-left {
    margin-right: 1rem
}

.sitenotice-card .image-container-right {
    margin-left: 1rem
}
/* hide images if screen size is less than 720px */
@media screen and (max-width: 719px) {
    .sitenotice-card .image-container-left,
    .sitenotice-card .image-container-right {
        display:none
    }
}

Vector-2022.css

.vector-sitenotice-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sitenotice-card {
    box-sizing: border-box;
    max-width: 1000px;
    width: 944px;
}

TODO

add class="text-container" for div with the text, so it can be modified per skin.

.sitenotice-card .text-container {
    /* styles go here */
}

consider adding <p> or <div> tag with class="title" for styling the title.

.sitenotice-card .text-container .title {
    /* styles go here */
}

create an anonnotice for users that aren't logged in
- wording will be adjusted directing them to create an account to change the theme
Once style implemented, modify to advise how to change the theme

@@ Line 1: / Line 1: @@
-<noinclude><div style="text-align:center;"><big>THIS SANDBOX IS NOT TO BE USED UNDER ANY CIRCUMSTANCES! IT IS BEING TRANSCLUDED ONTO MULTIPLE PAGES!</big></div ></noinclude><includeonly>{| style="background:#F0EEDE; text-align:left; border: 1px solid #000; width:{{#switch:{{lc:{{{size|}}}}} | wide = 90 | thin = 30 | #default = 60}}%" align="center" cellpadding="4px" cellspacing="0px"
+<div class="sitenotice-card">
-|-
+<div class="image-container-left">
-| colspan=2 height=30px style="text-align:center; font-weight:bold; font-size:160%; background-color:#68191B; color:#fff;" | {{{title}}}
+[[File:Spiffo rummage.png|64px]]
-|- style="border-top: 1px solid #000;"
+</div>
-{{#if:{{{above|}}}|
+<div>
-{{!}} colspan=2 style="text-align:center; font-weight:bold; background-color:#DDD6C1; border-top: 1px solid #000;" {{!}} {{{above}}}
+'''Wiki maintenance!'''
-}}
-|-
+The wiki will be undergoing some maintenance while we modify the default theme.<br>
-{{#if:{{{group1|}}}|
+Notice any oddities or want to provide feedback? Let us know on the [[PZwiki_talk:Community_portal/Wiki_theme|discussion page]] or the [https://discord.com/channels/136501320340209664/473467044050894858 pzwiki discord channel].
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group1}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list1}}}
+</div>
-}}
+<div class="image-container-right">
-|-
+[[File:Be crafty.png|64px]]
-{{#if:{{{group2|}}}|
+</div>
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group2}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list2}}}
+</div>
-}}
-|-
+'''[[MediaWiki:Common.css|Common.css]]'''
-{{#if:{{{group3|}}}|
+<syntaxhighlight lang="css">
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group3}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list3}}}
+/* Mediawiki:Sitenotice */
-}}
+.sitenotice-card {
-|-
+    display: flex;
-{{#if:{{{group4|}}}|
+    justify-content: space-between;
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group4}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list4}}}
+    align-items: center
-}}
+    text-align: center;
-|-
+    background-color: #f8f9fa;
-{{#if:{{{group5|}}}|
+    padding: 0.5rem 1rem;
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group5}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list5}}}
+    border-bottom: 1px solid #eaecf0;
-}}
+    width: auto;
-|-
+}
-{{#if:{{{group6|}}}|
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group6}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list6}}}
+.sitenotice-card > div {
-}}
+    display: flex;
-|-
+    flex-direction: column
-{{#if:{{{group7|}}}|
+}
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group7}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list7}}}
-}}
+.sitenotice-card .image-container-left {
-|-
+    margin-right: 1rem
-{{#if:{{{group8|}}}|
+}
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group8}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list8}}}
-}}
+.sitenotice-card .image-container-right {
-|-
+    margin-left: 1rem
-{{#if:{{{group9|}}}|
+}
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group9}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list9}}}
+/* hide images if screen size is less than 720px */
-}}
+@media screen and (max-width: 719px) {
-|-
+    .sitenotice-card .image-container-left,
-{{#if:{{{group10|}}}|
+    .sitenotice-card .image-container-right {
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group10}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list10}}}
+        display:none
-}}
+    }
-|-
+}
-{{#if:{{{group11|}}}|
+</syntaxhighlight>
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group11}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list11}}}
-}}
+'''[[MediaWiki:Vector-2022.css|Vector-2022.css]]'''
-|-
+<syntaxhighlight lang="css">
-{{#if:{{{group12|}}}|
+.vector-sitenotice-container {
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group12}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list12}}}
+    display: flex;
-}}
+    justify-content: center;
-|-
+    align-items: center;
-{{#if:{{{group13|}}}|
+}
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group13}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list13}}}
-}}
+.sitenotice-card {
-|-
+    box-sizing: border-box;
-{{#if:{{{group14|}}}|
+    max-width: 1000px;
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group14}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list14}}}
+    width: 944px;
-}}
+}
-|-
+</syntaxhighlight>
-{{#if:{{{group15|}}}|
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group15}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list15}}}
+===TODO===
-}}
+*add <code>class="text-container"</code> for div with the text, so it can be modified per skin.
-|-
+<syntaxhighLight lang="css">
-{{#if:{{{group16|}}}|
+.sitenotice-card .text-container {
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group16}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list16}}}
+    /* styles go here */
-}}
+}
-|-
+</syntaxhighlight>
-{{#if:{{{group17|}}}|
+*consider adding {{code|<p>}} or {{code|<div>}} tag with <code>class="title"</code> for styling the title.
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group17}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list17}}}
+<syntaxhighLight lang="css">
-}}
+.sitenotice-card .text-container .title {
-|-
+    /* styles go here */
-{{#if:{{{group18|}}}|
+}
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group18}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list18}}}
+</syntaxhighlight>
-}}
+*create an [[MediaWiki:Anonnotice|anonnotice]] for users that aren't logged in
-|-
+**wording will be adjusted directing them to create an account to change the theme
-{{#if:{{{group19|}}}|
+*Once style implemented, modify to advise how to change the theme
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group19}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list19}}}
-}}
-|-
-{{#if:{{{group20|}}}|
-{{!}} style="text-align:right; font-weight:bold; background-color:#DDD6C1; width:10%; padding-right:8px; border-top: 1px solid #000; border-right: 1px solid #000;" {{!}} {{{group20}}} {{!}}{{!}} style="border-top: 1px solid #000;" {{!}} {{{list20}}}
-}}
-|-
-{{#if:{{{below|}}}|
-{{!}} colspan=2 style="text-align:center; font-weight:bold; background-color:#DDD6C1; border-top: 1px solid #000;" {{!}} {{{below}}}}}
-|}</includeonly><noinclude>{{User:Vaileasys/sandbox
-|size=default
-|title=title
-|above=above
-|group1=group1
-|list1=list1
-|group2=group2
-|list2=list2
-|group3=group3
-|list3=list3
-|below=below
-}}</noinclude>