FANDOM


StylingEdit

If you have been familiar with Theme Designer, you may want to go further. This is called Custom CSS.

The main File Edit

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 StartEdit

The Basics Edit

Let's Say we want to make the content in Green color. We do this:

/* Green color for content */
.mpisto-content {
	color:green;
}

Result Edit

MWG AS1

Making it Fancy Edit

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 Edit

MWG AS2

Combining Selectors Edit

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 Edit

MWG AS3

Changing fonts Edit

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 Edit

MWG AS4

Hover Effects Edit

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 Edit

MWG AS5

Theme it up Edit

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 Edit

MWG AS6

Enchance theming Edit

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 Edit

MWG AS7

Keep it up Edit

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 Edit

MWG AS8

Almost There Edit

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 Edit

MWG AS9

Finished Edit

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)