Styling[]
If you have been familiar with Theme Designer, you may want to go further. This is called Custom CSS.
The main File[]
All created wikis come with MpistoAgent CSS file to do anything they want except hiding features that remove a feature.
Wikis coming from FANDOM will Copy the Wikia and Common CSSes onto that file and some selectors will be adjusted to preserve some stylings.
Lets Start[]
The Basics[]
Let's Say we want to make the content in Green color. We do this:
/* Green color for content */
.mpisto-content {
color:green;
}
Result[]
Making it Fancy[]
Lets add add some cool shadow and make the title a bit special
/* Fancy Styling */
.mpisto-content .mpisto-wrapper {
box-shadow: 0 0 10px black, 0 0 5px white, 0 0 6px cyan;
border-color:cyan;
}
.mpisto-content .mpisto-title {
color:red;
text-shadow:0 0 5px black, 0 2px black, 0 -2px black, 0 0 10px white, 2px 0 white, -2px 0 white, 0 0 20px cyan;
-webkit-text-stroke:1px cyan;
}
Result[]
Combining Selectors[]
We want to affect the buttons but only on editor controls...
/* Square buttons on editor toolbar and add purple shadow */
.editor-controls .wds-button {
border-radius:0;
padding:3.5px 12px;
box-shadow:0 0 10px purple;
}
Result[]
Changing fonts[]
We come with Source Sans Pro as default but we want the Secondary Korean Font to be used as Header font and the primary Thai font as a Toolbar and Article font
/* Use custom fonts for the wiki. Fonts can be found at Mpisto.css */
.wds-community-header {
font-family:"Nanum Gothic", sans-serif;
}
.mpisto-article, header.mpisto-footer-container {
font-family:"Prompt", sans-serif;
}
Result[]
Hover Effects[]
We want the modules to lose shadow when we hover on them!!!!
/* No shadows on module when hover on them */
.mpisto-module {
transition:box-shadow 100ms;
}
.mpisto-module:hover {
box-shadow:none;
}
Result[]
Theme it up[]
You know about how Theme Designer works? Theme Designed related theming can also come part of Custom CSS. Just we want to make the title in the color borders usually come. The use of --content-border makes the trick. Be sure to have fallback value without any variables to work on IE. for content-border, #ccc is the color you might want to use
/* New title color */
.mpisto-content .mpisto-title {
color:#ccc; /* IE */
color:var(--content-border); /* Compliant */
}
Result[]
Enchance theming[]
Content area has to use a shadow of 10px blur and 2px vertical offset and should correspond to the color of the buttons. All main content heading 1s must use a shadow of 4px blur radius twice in color of the community header. And that's all
/* Customize the Content Area */
.mpisto-content .mpisto-wrapper {
box-shadow:0 2px 10px #18bbc5; /* IE */
box-shadow:0 2px 10px var(--button-color); /* Compilant */
}
.mpisto-content h1 {
text-shadow: 0 0 4px blue, 0 0 4px blue;
text-shadow: 0 0 4px rgb(var(--community-header-bg)), 0 0 4px rgb(var(--community-header-bg));
}
Result[]
Keep it up[]
We want any link on hover (On all places of course) to have a green text-shadow of 10 pixels in blur and color them in the corresponding background-color for the body element. We want them animated and no use of underlines. Plus we want buttons to be square as well
/* Link Glow + Roundless buttons */
a:hover {
text-decoration:none;
transition:all 200ms;
color:#e995ca!important; /* IE */
color:var(--background-color)!important; /* Compliant */
text-shadow:0 0 10px green;
}
.wds-button {
border-radius:0;
}
Result[]
Almost There[]
Global Nav and Footer can be styled as well, unlike on FANDOM. But hiding things isn't possible. We need the footer to have round corners (TopLeft and TopRight) of 15px and must have some margin of 15px
/* Better Footer */
footer.mpisto-footer {
margin-left:15px;
margin-right:15px;
border-radius:15px 15px 0 0;
width:auto;
}
footer.mpisto-footer:before, footer.mpisto-footer:after {
border-radius:inherit
}
Result[]
Finished[]
After what we leanred with those 9 simple CSS snipsets, we can style Mpisto War Desktop easier. Hope you send us your custom CSS snipset (Or a CSS style pack)